/* -------------------------------------------------- Style -------------------------------------------------- */


/*font-family: 'Lato', sans-serif;
font-family: 'Open Sans', sans-serif;
font-family: var(--font-family);*/




 *{
	-webkit-tap-highlight-color: transparent;
  }

  body{
	  overflow-x: hidden;
  }

  .container-fluid{
	  width: 100%;
	  max-width: 1280px;
	  margin: 0 auto;
	  padding: 0;
  }

  div#wpadminbar{
	  display: none !important;
  }

  p, label, input, a, button, label, span, del, select{
	  font-family: var(--font-family);
  }

  h1	{
	  font-size: 82px;
	  font-family: var(--font-family);
	  font-weight: 200 !important;
	  text-align: center;
	  color: white;
	  margin: 20px 0;
  }

  h2:not(.section-title){
	  font-size: 72px;
	  line-height: 56px;
	  font-family: var(--font-family);
	  font-weight: 200 !important;
	  text-align: center;
  }

  h3{
	  font-size: 72px;
	  line-height: 56px;
	  font-family: var(--font-family);
	  font-weight: 300;
	  text-align: center;
	  color: white;
	  margin: 20px 0;
  }

  /* .tab {
		display: inline-block;
		padding: 10px 20px;
		font-size: 16px;
		color: gray;
		cursor: pointer;
		border-bottom: 2px solid transparent;
		transition: all 0.3s ease;
	}


	.tab.active {
		color: #007bff;
		border-bottom: 2px solid #007bff;
		font-weight: bold;
	} */

	.tab {
		margin: 0 15px 0 0;
		display: flex;
    	align-items: center;
	}

	.d-flex{
		display: flex;
		align-items: center;
		justify-content: center;
		/* flex-direction: column; */
	}

	.group-radio{
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
		margin: 20px 0;
	}

	.group-radio input{
		width: auto !important;
		margin: 0 5px 0 0;
	}

	.group-radio label{
		width: 100%;
	}

  p{
	  font-size: 18px;
	  line-height: 24px;
	  font-family: var(--font-family);
  }

  .white{
	  color: white;
  }

  /* Botões — sistema canônico .btn + modifiers vive em design-tokens.css (task #226) */

  .cashback {
    background-color: var(--color-success, #059669);
    margin: 0;
    font-size: var(--font-xs, 11px);
    color: #fff;
    padding: 2px var(--space-1, 4px);
    width: 100%;
    margin-top: var(--space-2, 8px);
    position: relative;
    bottom: 0;
    text-align: center;
    border-radius: var(--radius-xs, 4px);
}

  .boxCashback{
	  background-color: var(--color-success, #059669);
	  color: #fff;
	  padding: var(--space-3, 12px) var(--space-5, 20px);
	  margin: 0 var(--space-3, 12px) var(--space-5, 20px);
	  border-radius: var(--radius-md, 12px);
  }

  .boxCashback p{
	  color: #fff;
	  font-size: var(--font-md, 15px);
	  margin: var(--space-3, 12px) 0;
  }

  .boxCashback p:first-child{
	  margin-top: 0;
	  margin-bottom: 10px;
  }

  .boxCashback p:last-child{
	  margin: 0;
  }

  section.homeApp{
	  position: relative;
	  min-height: 100vh;
	  background-size: cover;
	  background-position: center;
	  display: flex;
	  justify-content: flex-start;
	  align-items: center;
	  flex-direction: column;
	  padding-top: 100px;
  }

  section.homeApp::before{
	  content: '';
	  display: block;
	  width: 100%;
	  height: 100%;
	  position: absolute;
	  top: 0;
	  left: 0;
	  background-color: rgba(0,0,0,0.5);
	  z-index: 0;
	  backdrop-filter: blur(5px);
  }

  section.homeApp h1{
	  margin-bottom: 50px;
  }

  section.homeApp *{
	  position: relative;
	  z-index: 2;
  }

  section.homeApp .btn.btn--primary,
  section.homeApp .btn.btn--secondary{
	  margin-top: var(--space-3);
	  text-transform: none;
	  transition: transform var(--transition-fast), filter var(--transition-fast);
	  min-width: 250px;
	  text-align: center;
	  justify-content: center;
  }

  /* Pulse removido — feedback apenas no toque */

  section.homeApp h3{
	  margin-bottom: -30px;
  }

  section.ofertasPage{
	  padding: 100px 0;
	  padding-top: 50px;
	  position: relative;
	  min-height: 100vh;
	  background-size: cover;
	  background-position: center;
	  display: flex;
	  justify-content: flex-start;
	  align-items: center;
	  flex-direction: column;
  }

  section.ofertasPage h2{
	  color: white;
	  margin-bottom: var(--space-8);
	  font-family: var(--font-family);
	  font-size: var(--font-2xl);
	  font-weight: var(--weight-bold);
	  text-align: center;
  }

  section.ofertasPage::before{
	  content: '';
	  display: block;
	  width: 100%;
	  height: 100%;
	  position: absolute;
	  top: 0;
	  left: 0;
	  background-color: rgba(0,0,0,0.5);
	  z-index: 1;
	  backdrop-filter: blur(5px);
  }

  section.ofertasPage *,
  article#auth *{
	  position: relative;
	  z-index: 2;
  }

  article#auth{
	  width: 100%;
	  height: 100%;
	  min-height: 100vh;
	  overflow-y: auto;
	  position: relative;
	  top: 0;
	  left: 0;
	  background-color: rgba(0,0,0,0.9);
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  padding: 100px 0;
	  z-index: 1;
	  background-position: center;
	  background-size: cover;
  }
  article#auth select{
	padding: 9px 5px;
  }

  article#auth::before{
	  content: '';
	  display: block;
	  width: 100%;
	  height: 100%;
	  position: absolute;
	  top: 0;
	  left: 0;
	  background-color: rgba(0,0,0,0.5);
	  z-index: 0;
	  backdrop-filter: blur(5px);
  }

  article#auth .content{
	  max-width: 400px;
	  width: calc(100% - 40px);
	  height: auto;
	  padding: 50px 20px;
	  border-radius: 10px;
	  background-color: rgba(255,255,255,1);
	  box-shadow: 0px 0px 15px 0px rgba(255,255,255,0.5);
  }

  article#auth .btn{
	  padding: 10px 25px;
	  text-transform: uppercase;
	  font-size: 14px;
  }

  article#auth.remove{
	  transform: translateY(-200vh);
	  transition: 1s all;
  }

  article#auth .step-0{
	  display: block;
  }
  article#auth :is(.step-1, .step-2, .step-3, .step-4, .step-5){
	  display: none;
  }

  .select2-container--default .select2-selection--single .select2-selection__arrow b{
	display: none !important;
  }

  .select2-container--default .select2-selection--single{

	border-radius: 8px !important;
    color: #212529;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
	height: auto !important;
	padding: 5px 0 3px 0 !important;
  }

  .select2-container--default .select2-selection--single .select2-selection__rendered{
	color: #212529 !important;
  }

  .select2-results__option[aria-selected]{
	list-style: none !important;
	font-size: 10px !important;
	color: #444;
  }

  .select2-container--default .select2-selection--single .select2-selection__placeholder{
	font-size: 12px !important;
	color: #212529 !important;
  }

  .select2-container .select2-selection--single .select2-selection__rendered{
	font-size: 12px !important;
	color: #212529 !important;
	text-transform: lowercase;
  }

  article#auth.forgot-password .step-3{
	  display: block;
  }

  article#auth.forgot-password > div{
	display: flex;
	align-items: center;
	justify-content: center;
  }

  article#auth.forgot-password :is(.step-1, .step-2){
	  display: none;
  }

  .step-1 .d-flex{
	  display: flex;
	  align-items: center;
	  justify-content: space-between;
  }
  article#auth .step-1 .btn {
    margin: 0;
    width: 100%;
    justify-content: center;
    margin-bottom: 10px;
    padding: 15px 25px;
  }
  article#auth .step-1 .d-flex.btn-login{
	display: flex;
    flex-direction: column;
    margin-top: 10px;
  }
  article#auth .step-1 .d-flex.btn-login .btnForgotPassword{
	font-size: 12px;
	text-decoration: underline;
	margin-top: 5px;
  }

  /* v4.90.x (task #307 item 4) — simetria do step-3 (forgot-password):
     form em coluna, inputs/label/button todos com a mesma largura (100%),
     link "Voltar ao login" centralizado. Espelha o padrão do step-1. */
  article#auth .step-3 #forgot-password{
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  article#auth .step-3 #forgot-password > label,
  article#auth .step-3 #forgot-password > .form-control,
  article#auth .step-3 #forgot-password > .message,
  article#auth .step-3 #forgot-password > .btn-login,
  article#auth .step-3 #forgot-password > .btns{
    width: 100%;
  }
  article#auth .step-3 .btn {
    margin: 0;
    width: 100%;
    justify-content: center;
    margin-bottom: 10px;
    padding: 15px 25px;
  }
  article#auth .step-3 .d-flex.btn-login{
    display: flex;
    flex-direction: column;
    margin-top: 10px;
  }
  article#auth .step-3 .d-flex.btns{
    display: flex;
    justify-content: center;
  }
  article#auth .step-3 .d-flex.btns .createAccount{
    font-size: 12px;
    text-decoration: underline;
  }


  article#auth.login .step-1{
	display: block;
  }
  article#auth.login .step-0,
  article#auth.login .step-2{
	  display: none;
  }


  article#auth.register .step-0,
  article#auth.register .step-1{
	display: none;
  }

  article#auth.forgot-password .step-0,
  article#auth.forgot-password .step-1,
  article#auth.forgot-password .step-2{
	display: none;
  }

  article#auth.register .step-2{
	  display: block;
  }

  article#auth .step-0 h2 {
    margin-bottom: var(--space-6);
    line-height: var(--leading-tight);
    font-weight: var(--weight-bold);
    font-family: var(--font-family);
  }

  article#auth .step-0 .btns{
	align-items: center;
  }

  article#auth .step-0 .btns .btn{
	justify-content: center;
	padding: 0;
	height: var(--button-height);
	margin: var(--space-2) 0;
	border-radius: var(--radius-xl);
	font-size: 16px;
	width: 90%;
	font-weight: var(--weight-semibold);
  }

  article#auth .step-0 .btns .btn.btn--primary{
	color: white !important;
  }

  article#auth .step-0 .btns .btn.btn--secondary{
	background-color: transparent !important;
	border: 1.5px solid var(--gray-200);
	color: var(--text-primary) !important;
  }

  article#auth h2{
	  font-family: var(--font-family);
	  font-size: var(--font-xl);
	  text-align: center;
	  font-weight: var(--weight-bold);
	  letter-spacing: var(--tracking-tight);
  }

  article#auth p{
	  text-align: center;
  }

  article#auth form{
	  margin-top: 30px;
	  margin-bottom: 50px;
  }

  article#auth .btns{
	  display: flex;
	  justify-content: center;
  }

  article#auth form .btn{
	  margin: 0;
  }

  article#auth form ~ p{
	  margin-bottom: 20px;
	  margin-top: -20px;
  }

  .input-group {
	  display: flex;
	  align-items: center;
  }

  .input-group {
	  position: relative !important;
	  display: flex !important;
	  align-items: stretch !important;
  }

  .input-group-append {
	  cursor: pointer;
	  position: absolute !important;
	  right: 4px;
	  top: 50%;
	  transform: translateY(-50%);
	  width: var(--touch-target);
	  height: var(--touch-target);
	  display: flex !important;
	  align-items: center;
	  justify-content: center;
	  z-index: 5;
	  visibility: visible !important;
	  opacity: 1 !important;
  }

  .input-group .form-control {
	  padding-right: 52px;
  }

  .input-group-text.eye {
	  padding: 0;
	  background: none !important;
	  border: none !important;
  }

  .fa-eye,
  .fa-eye-slash {
	  font-size: 18px;
	  color: var(--gray-400);
  }

  .form-check{
	  display: flex;
	  align-items: center;
	  gap: var(--space-2);
	  min-height: var(--touch-target);
  }

  .form-check input[type="checkbox"]{
	  width: 18px !important;
	  height: 18px !important;
	  flex-shrink: 0;
	  border-radius: var(--radius-xs) !important;
	  accent-color: var(--main-color, #3B82F6);
	  cursor: pointer;
  }

  .form-check .form-check-label{
	  font-size: var(--font-sm);
	  color: var(--text-secondary);
	  cursor: pointer;
	  margin: 0;
	  line-height: 1.3;
  }

  .message{
	  display: none;
	  padding: 10px;
	  border-radius: 6px;
	  /* margin-top: -20px !important; */
  }

  .success .message.success,
  .success .message{
	  display: block;
	  background-color: #a2db58;
	  color: #3c763d;
  }

  .error .message.error,
  .error .message{
	  display: block;
	  background-color: #f2dede;
	  color: #a94442;
  }

  .message.success{
	  background-color: #a2db58;
	  color: #3c763d;
  }

  .message.error{
	  background-color: #f2dede;
	  color: #a94442;
  }

  .createAccount {
    text-decoration: none;
    text-align: center;
    font-size: 16px;
    line-height: 1.4;
    padding: var(--space-3) 0 !important;
    font-weight: var(--weight-semibold);
    color: var(--main-color, #3B82F6) !important;
  }

  .btnForgotPassword {
    color: var(--text-secondary) !important;
    font-size: var(--font-sm);
  }

  /* Apple Sign-In Button */
  .apple-signin-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 400px;
    padding: 10px 24px;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    cursor: pointer;
    transition: background 0.2s;
  }
  .apple-signin-btn:hover { background: #333; }
  .apple-signin-btn i { font-size: 18px; }

  label{
	  font-size: 14px;
  }

  input, select{
	  width: 100%;
	  padding: 10px 5px;
	  border: none;
	  margin-bottom: 15px;
  }

  select[name="loja"]{
	  margin-top: 5px;
  }

  .blocoFilter{
		display: flex;
		align-items: center;
		justify-content: space-between;
		background-color: var(--bg-primary, #fff);
		border-radius: var(--radius-md, 12px);
		padding: var(--space-4, 16px) var(--page-padding, 20px) var(--space-3, 12px);
		position: sticky;
		top: 0;
		z-index: var(--z-sticky, 100);
		margin-bottom: var(--space-2, 8px);
		gap: var(--space-3, 12px);
  }

  .blocoFilter.fixed{
	position: fixed;
    top: 0;
	left: 0;
    z-index: 999;
    margin: 0;
    width: 100%;
    border-radius: 0;
  }

  .blocoFilter.fixed select{
	display: none;
  }

  .blocoFilter label{
	font-size: 14px;
	color: white;
	margin-bottom: 10px;
  }

  .blocoFilter select{
	margin-bottom: 10px !important;
  }

  .blocoFilter input{
	  margin-bottom: 0;
  }

  .blocoFilter > div,
  .blocoFilter > form {
	  position: relative;
	  flex: 1;
  }

  .blocoFilter .form-control{
	  width: 100%;
	  display: block;
	  background: var(--gray-100, #f4f4f5);
	  border: none;
	  border-radius: var(--radius-sm, 8px);
	  padding: 0 var(--space-4, 16px);
	  height: var(--touch-target, 44px);
	  font-size: var(--font-md, 15px);
	  color: var(--text-primary, #18181b);
  }

  .blocoFilter .form-control:focus {
	  box-shadow: 0 0 0 2px var(--main-color, #3B82F6);
	  border: none;
	  outline: none;
  }

  .blocoFilter .form-control::placeholder {
	  color: var(--gray-400, #a1a1aa);
  }

  .blocoFilter i.fa-magnifying-glass{
	  display: none;
  }

  .blocoOferta{
	  display: flex;
	  background-color: white;
	  border-radius: 6px;
	  padding: 10px;
	  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
	  cursor: pointer;
	  margin-bottom: 20px;
	  width: 100%;
	  transition: opacity 0.5s ease-in-out;
	  opacity: 1;
  }

  .blocoOfertaApp{
	  transition: opacity 0.5s ease-in-out;
	  opacity: 1;
  }

  .columnOferta > a{
	  width: 100%;
  }

  .blocoOferta:hover {
	  opacity: 0.7;
  }

  .blocoOferta .imagemProduto{
	  width: 30%;
	  height: 150px;
	  margin-right: 20px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  flex-direction: column;
	  position: relative;
  }

  .blocoOferta .infosOferta{
	  width: calc(70% - 20px);
	  padding: 10px 0;
  }

  .imagemProduto img {
	  max-height: 150px;
  }

	#modalProduto .imagemProduto img{
	max-width: 320px;;
  }

  .nomeProduto{
	  height: 50px;
	  font-size: 18px;
	  font-weight: bold;
	  margin: 0 0 10px 0;
	  text-transform: uppercase;
	  color: #4c4c4c;
  }

  .precoAntigo{
	  font-size: 14px;
	  font-weight: normal;
	  color: gray;
	  margin: 0;
	  text-decoration: line-through;;
  }

  .precoOferta{
	  font-size: 16px;
	  font-weight: bold;
	  color: orange;
	  margin: 0 0 10px 0;
  }

  .descricaoOferta{
	font-size: 14px;
	font-weight: normal;
	margin: 0;
	background-color: #c1c1c1;
	color: white;
	text-align: center;
  }

  .lgpd{
	  display: flex;
	  align-items: center;
	  margin-top: 10px;
	  margin-bottom: 20px;
  }

  .lgpd input{
	  width: auto;
	  margin: 0;
	  margin-right: 5px;
  }

  .lgpd span {
    font-size: 12px;
  }

  .lgpd span a{
	  text-decoration: underline;
  }

  #cadastro div{
	  padding: 0 1px !important;
  }

  .headApp{
	  width: 100%;
	  padding: 0 10px;
	  margin-bottom: 100px;
	  background-position: center top;
	  background-size: cover;
	  background-position: center;
	  position: relative;
  }

  .headApp::before{
	  content: '';
	  display: block;
	  position: absolute;
	  top: 0;
	  left: 0;
	  background-color: rgba(0,0,0,0.5);
	  width: 100%;
	height: 100%;
  }

  .headApp .col-xs-12:first-child .boxIntrod{
	  margin-top: 0;
  }

  .boxInfo{
	  width: 100%;
	  border-radius: 6px;
	  background-color: white;
	  padding: 20px;
	  margin-bottom: 20px;
	  display: flex;
	  justify-content: space-between;
  }

  .boxInfo .pC{
	  display: flex;
	  align-items: center;
  }

  .boxInfo a{
	  text-align: center;
	  font-size: 16px;
  }

  .boxInfo .pC p{
	  margin: 0;
  }

  .boxInfo .pC p:first-child{
	  font-size: 18px;
	  font-weight: bold;
	  margin-right: 10px;
  }

  .boxInfo .pC p:nth-child(2){
	  font-size: 18px;
  }

  .boxIntrod{
	  display: flex;
	  justify-content: space-between;
	  margin: 20px 0;
  }

  .boxIntrod a{
	  font-size: 18px;
  }

  .boxIntrod *{
	  color: white;
	  margin: 0;
  }

  .boxInd{
	  border-radius: var(--radius-md, 12px);
	  padding: var(--space-4, 16px);
  }

  .boxInd label{
	  font-size: var(--font-sm, 13px);
	  line-height: 1.4;
	  color: white;
	  font-weight: var(--weight-medium, 500);
	  margin-bottom: var(--space-2, 8px);
  }

  .boxInd p{
	  margin: var(--space-2, 8px) 0;
	  overflow-wrap: break-word;
	  background-color: rgba(255, 255, 255, 0.15);
	  padding: var(--space-2, 8px) var(--space-3, 12px);
	  font-size: var(--font-sm, 13px);
	  border-radius: var(--radius-sm, 8px);
	  color: rgba(255,255,255,0.9);
  }

  .paddingHidde{
	  padding: 0 !important;
  }

  .clipboard {
	  position: relative;
	  display: flex;
	  align-items: center;
	  gap: var(--space-2, 8px);
	  margin-top: var(--space-3, 12px);
  }

  .copy-input {
	  flex: 1;
	  cursor: pointer;
	  background: rgba(255,255,255,0.15);
	  border: 1px solid rgba(255,255,255,0.2);
	  color: white;
	  font-size: var(--font-xs, 11px);
	  border-radius: var(--radius-sm, 8px);
	  padding: var(--space-3, 12px);
	  font-family: var(--font-family);
	  margin: 0;
  }

  .copy-input:focus {
	  outline: none;
	  border-color: rgba(255,255,255,0.5);
  }

  .copy-btn {
	  width: var(--touch-target, 44px);
	  height: var(--touch-target, 44px);
	  background: rgba(255,255,255,0.2);
	  font-size: 16px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  border-radius: var(--radius-sm, 8px);
	  border: none;
	  color: white;
	  cursor: pointer;
	  transition: background var(--transition-normal, 0.2s ease);
	  flex-shrink: 0;
  }

  .copy-btn:active {
	  background: rgba(255,255,255,0.35);
  }

  .copied {
	font-family: var(--font-family);
	width: 100px;
	opacity:0;
	position:absolute !important;
	  bottom: 20px;
	  left: 0;
	  right: 0;
	  margin: auto;
	color:#4c4c4c;
	padding: 15px 15px;
	background-color: #fff;
	border-radius: 5px;
	transition: .4s opacity;
  }

  .change-password{
	  font-size: 14px !important;
  }

  .separateTable{
	  border-bottom: 1px solid;
	  padding: 10px 0;
	  font-weight: bold;
  }

  .modal {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	padding: 0;
	display: none !important;
	z-index: var(--z-modal, 400);
  }

  .page-template-page-offer .modal {
	top: var(--header-height, 56px);
	height: calc(100vh - var(--header-height, 56px));
  }

  /* v4.77.48 — #modalProduto agora segue Padrão B (head__app + bottom-nav
     visíveis). Regra antiga escondia head__app/bottom-nav — removida pra
     dar contexto de navegação. Shim em pharus-modal.css já posiciona o
     modal entre head__app (56px top) e atalhosApp (57px bottom). */

  .modal.open {
	display: flex !important;
	overflow-y: hidden !important;
	animation: modalSlideIn 0.2s ease forwards;
  }

  @keyframes modalSlideIn {
	from { transform: translateX(-30px); opacity: 0.5; }
	to { transform: translateX(0); opacity: 1; }
  }

  .modal .container-fluid{
	padding: 0;
	overflow: hidden !important;
  }

  .modal h3{
	  color: var(--text-primary, #1a1a1a);
	  text-align: left;
	  font-size: 20px;
	  line-height: 26px;
	  font-weight: bold;
  }

  .modal h3 ~ p{
	  margin: 0;
	  font-size: 12px;
  }

  .modal#notificacao .contentModal{
	display: flex;
	flex-direction: column-reverse;
  }

  /* Empty state de notificações fica no topo quando é o único elemento */
  .modal#notificacao .contentModal:has(.pharus-empty) {
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding-top: var(--space-8, 32px);
  }

  /* ========================================
     Empty state canônico — .pharus-empty
     Uso: <div class="pharus-empty">
            <div class="pharus-empty__icon"><i class="fa-solid fa-inbox"></i></div>
            <h3 class="pharus-empty__title">Titulo</h3>
            <p class="pharus-empty__text">Descricao.</p>
          </div>
     ======================================== */
  /* Empty state — estilo iOS/Apple: ícone grande outline, sem fundo,
     tipografia hierárquica bem espaçada, paleta muted. */
  .pharus-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: var(--space-10, 48px) var(--space-6, 24px);
	text-align: center;
	min-height: 320px;
	animation: pharusEmptyFadeIn .35s ease both;
  }
  .pharus-empty__icon {
	width: 96px;
	height: 96px;
	border-radius: 0;
	background: none;
	color: var(--gray-300, #d4d4d8);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 72px;
	line-height: 1;
	margin-bottom: var(--space-1, 4px);
  }
  .pharus-empty__icon i {
	/* v4.78.3 — removido font-weight:300 "Apple-like thin" que quebrava os
	   ícones: Font Awesome 6 Free só tem Solid (900) + Regular (400) + Brands.
	   Forçar 300 fazia o browser procurar variante Light (paga, não carregada)
	   e renderizar tofu (quadrado com X). Deixamos o weight natural da classe
	   fa-solid/fa-regular usada pelo consumidor. */
	font-size: 64px;

  }
  .pharus-empty__title {
	font-size: var(--font-xl, 20px);
	font-weight: var(--weight-semibold, 600);
	letter-spacing: -0.02em;
	color: var(--text-primary, #18181b);
	margin: 0;
  }
  .pharus-empty__text {
	font-size: var(--font-md, 15px);
	color: var(--text-muted, #71717a);
	margin: 0;
	max-width: 320px;
	line-height: var(--leading-normal, 1.5);
  }
  .pharus-empty .btn { margin-top: var(--space-4, 16px); }
  .pharus-empty > i:first-child {
	/* Retrocompat: empty states antigos com <i> solto (ex: chat, sacola).
	   v4.78.6 — removido font-weight:300 pelo mesmo motivo de .pharus-empty__icon i:
	   Font Awesome 6 Free não tem variante Light (paga) → renderizava tofu
	   (quadrado com X) em vez do glyph. Weight herda da classe fa-solid/fa-regular. */
	font-size: 72px;
	color: var(--gray-300, #d4d4d8);
	margin-bottom: var(--space-3, 12px);
  }
  .pharus-empty > p {
	margin: 0;
	font-size: var(--font-md, 15px);
	color: var(--text-muted, #71717a);
	line-height: var(--leading-normal, 1.5);
  }
  .pharus-empty > p:first-of-type {
	font-size: 18px;
	/* font-weight: var(--weight-semibold, 600); */
	font-weight: 400;
	letter-spacing: -0.02em;
	color: var(--text-primary, #18181b);
  }
  /* Task #308 Fase 2 Item 27 — modificador compacto do .pharus-empty
     Uso: mensagens inline (dentro de card/lista/dropdown) onde o empty
     canônico de 320px é grande demais. Ex: aba Endereço do Minha Conta
     quando cliente sem endereço salvo. Card branco com borda sutil,
     ícone 32px, título 15px, texto 13px, padding compacto. */
  .pharus-empty--compact {
    min-height: auto;
    padding: var(--space-4, 16px) var(--space-4, 16px);
    gap: 8px;
    background: var(--bg-primary, #fff);
    border: 1px solid var(--border-light, #e5e7eb);
    border-radius: var(--radius-md, 12px);
    margin: var(--space-3, 12px) 0;
  }
  .pharus-empty--compact .pharus-empty__icon {
    width: 40px;
    height: 40px;
    font-size: 28px;
    margin-bottom: 0;
  }
  .pharus-empty--compact .pharus-empty__icon i {
    font-size: 28px;
  }
  .pharus-empty--compact .pharus-empty__title {
    font-size: var(--font-md, 15px);
  }
  .pharus-empty--compact .pharus-empty__text {
    font-size: 13px;
    max-width: 100%;
  }

  @keyframes pharusEmptyFadeIn {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
  }

  @keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
  }

  .modal .box{
	  width: 100%;
	  max-width: 100%;
	  min-height: 100vh;
	  background-color: white;
	  /* overflow-y: auto; */
	  overflow-y: hidden;
  }

  @keyframes translate {
	from { transform: translateX(-100%); }
	to { transform: translateX(0); }
  }

  @keyframes translateReverse {
	from { transform: translateX(0); }
	to { transform: translateX(-100%); }
  }

  @media(min-width: 768px){
	  .modal .box{
		  max-width: 400px;
	  }
	  .modal .container-fluid{
		  max-width: 100%;
	  }
  }

  .modal#recoveryInfo .box{
	  min-height: auto !important;
	  margin: 0 auto;
	  margin-top: 100px !important;
	  transform: translateX(0) !important;
	  animation: none !important;
	  border-radius: 6px;
	  height: auto !important;
  }

  .segTable{
	  background-color: white !important;
  }

  .segTable th{
	  padding: 0 !important;
	  padding-bottom: 20px !important;
  }

  .segTable p{
	  margin: 0 !important;
  }

  .modal .box table{
	  min-height: calc(100vh - 200px);
  }

  .headModal{
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
	  position: relative;
	  width: 100%;
	  background-size: cover;
	  background-position: center;
	  height: 140px;
	  padding: 0 var(--page-padding, 20px);
  }

  .headModal::after{
	  content: '';
	  position: absolute;
	  inset: 0;
	  background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.75) 100%);
	  z-index: 1;
  }

  .headModal h3{
	  color: white;
	  font-size: var(--font-2xl, 24px);
	  line-height: 1.3;
	  padding: 0;
	  margin: 0;
	  text-align: center;
	  position: relative;
	  z-index: 2;
	  font-weight: var(--weight-bold, 700);
	  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
	  width: 100%;
  }

  .headModal p{
	  color: rgba(255,255,255,0.8);
	  font-size: var(--font-sm, 13px);
	  font-weight: var(--weight-medium, 500);
	  text-align: center;
	  position: relative;
	  z-index: 2;
	  margin: var(--space-1, 4px) 0 0;
	  width: 100%;
	  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
  }

  .contentModal{
	border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0;
	background-color: var(--bg-primary, #fff);
	margin-top: -16px;
    padding: var(--page-padding, 20px) var(--page-padding, 20px) 120px;
	position: relative;
	z-index: 2;
	overflow-y: auto;
    max-height: calc(100vh - 120px);
    max-height: calc(100dvh - 120px);
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
  }

  .headModal .myAccount{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	flex-direction: column;
	padding: var(--space-6, 24px) var(--space-4, 16px);
	border: none;
	box-shadow: none;
	border-radius: 0;
	margin-top: 0;
  }

  .myAccount h3{
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	font-size: var(--font-lg, 17px);
	line-height: 1.3;
	font-weight: var(--weight-semibold, 600);
	text-transform: capitalize;
	color: #fff;
  }

  .myAccount h3 i{
	  font-size: 48px;
	  margin-bottom: var(--space-3, 12px);
	  width: 72px;
	  height: 72px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  background: rgba(255,255,255,0.15);
	  border-radius: 50%;
	  border: 2px solid rgba(255,255,255,0.25);
  }

  .myAccount h3 span{
	  font-size: var(--font-sm, 13px);
	  font-weight: var(--weight-regular, 400);
	  opacity: 0.7;
	  margin-top: var(--space-1, 4px);
  }

  /* Botão fechar dos modais — padronizado */
  .modal-close-btn,
  #closeModal{
	  position: absolute;
	  top: 50%;
	  transform: translateY(-50%);
	  right: var(--page-padding, 20px);
	  cursor: pointer;
	  font-size: 20px;
	  width: var(--touch-target, 44px);
	  height: var(--touch-target, 44px);
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  z-index: 3;
	  color: white;
	  background: rgba(255,255,255,0.15);
	  border-radius: 50%;
	  border: none;
  }

  .modal-close-btn:active,
  #closeModal:active{
	  background: rgba(255,255,255,0.3);
  }

  #recoveryInfo form{
	  margin-top: 30px;
  }

  .modal#change-password .message{
	  display: none;
	  margin-top: 10px !important;
  }

  .modal#change-password .formPassword.message_1 .m1{
	  display: block;
  }

  .modal#change-password .formPassword.message_2 .m2{
	  display: block;
  }

  .modal#change-password .formPassword.message_3 .m3{
	  display: block;
  }

  #atualizarPerfil.message_1 .m1{
	  display: block;
  }

  #atualizarPerfil.message_2 .m2{
	  display: block;
  }

  .modal#change-password form{
	  margin-bottom: 20px;
  }

  .resultadoImagem{
	cursor: pointer;
    height: 150px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
  }

  .resultadoImagem img{
	width: auto;
    height: 100%;
    margin: 0 auto;
    display: block;
  }

  .resultadoImagem img.selected{
	border: 1px solid black
  }

  .form-search-image{
	width: 100%;
	margin: 20px 0
  }

  #modalProduto .imagemProduto{
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  width: 100%;
	  /* height: 150px; */
	  flex-direction: column;
	  padding: 20px 0 0 0;
  }

  #modalProduto .infoProduto{
	margin-top: 20px;
  }

  #modalProduto .imagemProduto img{
	  width: auto;
	  height: auto;
  }

  #modalProduto .infoProduto *{
	  /* text-align: center; */
	    font-size: 18px;
    	line-height: 26px;
  }

  #modalProduto .infoProduto p{
	display: flex;
	flex-direction: column;
	/* align-items: center; */
  }

  #modalProduto .infoProduto p:not(:first-child) strong{
	  font-size: 16px;
  }

  #modalProduto .infoProduto p:first-child{
	  font-weight: bold;
	  margin-top: 10px;
  }

  #modalProduto .infoProduto p:nth-child(2n){
	  margin: 0;
	  opacity: 0.5;
	  font-size: 20px;
  }

  #modalProduto .infoProduto p:nth-child(2n) strong{
	  font-size: 14px;
  }

  #modalProduto .infoProduto p:nth-child(2n) label{
	  text-decoration: line-through;
  }

  #modalProduto .infoProduto p:last-child{
	  color: #107410;
	  margin-top: 10px;
	  margin-bottom: 0;
  }

  #modalProduto .infoProduto p label{
	  font-weight: bold;
	font-size: 26px;
  }

  #modalProduto .infoProduto p:nth-child(2n) label{
	  font-size: 20px;
  }

  #modalProduto .infoProduto p:last-child label{
	  font-size: 32px;
	line-height: 36px;
  }

  #modalConfirmacao{
	  align-items: center;
	padding: 0 20px;
  }

  #modalConfirmacao .box{
	  max-width: 300px;
	height: auto !important;
	min-height: auto;
	padding: 15px;
	border-radius: 6px !important;
  }

  #modalConfirmacao .botoesModal{
	  display: flex;
	  justify-content: space-between;
  }

  #modalConfirmacao .botoesModal button{
	  padding: 10px 20px;
  }

  .noResults{
	  text-align: center;
	  font-size: 22px;
	  line-height: 32px;
	  color: #4c4c4c;
	  margin-bottom: 150px;
	margin-top: 50px !important;
  }

  .loading {
	  text-align: center;
	  color: white;
	  font-size: 16px;
	  line-height: 32px;
		animation: pulse 5s ease-in-out infinite;
		margin-bottom: 150px;
  }

  @keyframes pulse {
	0% {
	  transform: scale(1);
	}
	50% {
	  transform: scale(1.05);
	}
	100% {
	  transform: scale(1);
	}
  }

  .page-id-990 footer{
	    padding: 75px 0px 110px 0px;
    	background-color: #ededed;
  }

  table {
	font-family: arial, sans-serif;
	border-collapse: collapse;
	width: 100%;
  }

  td, th {
	border: 1px solid #dddddd;
	text-align: left;
	padding: 10px !important;
	font-size: 16px;
  }

  /* tr:nth-child(even) {
	background-color: #dddddd;
  } */

  #closeAddApp{
	  position: absolute;
	  top: 50%;
	  transform: translateY(-50%);
	  right: 10px;
	  cursor: pointer;
	  font-size: 16px;
  }

  .addApp {
	  transition: 0.3s all;
  /*  	width: 100%;*/
		position: fixed;
	  top: auto;
	  left: auto;
	  right: 0;
	  bottom: 0;
	  z-index: 9999;
	  padding: 10px;
	  display: flex;
	  justify-content: flex-start;
	  cursor: pointer;
	  transform: translateX(0);
  }

  .addApp img{
	  max-width: 100px;
  }

  .addApp button{
	  font-size: 18px;
	  font-weight: 600;
	  color: black;
	  background-color: transparent;
	  border: none;
	  cursor: pointer;
  }

  .boxAddApp{
	  /* animation: pulse 1.5s infinite; */
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		max-width: 100%;
		padding: 8px 20px;
		min-width: 160px;
		padding-left: 10px;
		border-radius: 6px;
		background-color: #FFF;
		-webkit-box-shadow: 0px -5px 10px 0px rgba(0,0,0,0.25);
		-moz-box-shadow: 0px -5px 10px 0px rgba(0,0,0,0.25);
		box-shadow: 0px -5px 10px 0px rgba(0,0,0,0.25);
		color: white !important;
  }

  .boxAddApp i,
  .boxAddApp button{
	  font-size: 18px;
	  color: white !important;
	  line-height: 20px;
  }

  .cc-revoke.cc-bottom{
	  display: none !important;
  }

  .modal-backdrop{
	  display: none !important;
  }

  .lb-dataContainer{
	  display: none !important;
  }

  .listOfertas .hidden{
	  display: none !important;
  }

  #webpushr-notification-card-wrapper notification_title{
	  height: auto !important;
  }

  #safari :is(p, li){
	  font-size: 18px;
  }

  #safari  ul li{
	  margin: 20px 0;
	  line-height: 26px;
	  list-style: none;
  }

  footer .copyright{
	  z-index: 1;
	  position: relative;
	  /* background: #4c4c4c; */
	  padding: 10px;
  }

  footer .copyright a{
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  color: white;
  }

  footer .copyright img{
	  max-width: 85px;
	  margin-left: 10px;
  }

	#atualizarPerfil{
		margin-left: 0px;
		margin-right: 0px;
	}

	.formPassword{
		margin-right: 0px;
		margin-left: 0px;
	}

  .disabledAcount{
	  position: relative;
  }

  .disabledAcount .step{
	  display: none;
  }

  .disabledAcount .step.show{
	  display: block;
  }

  .disabledAcount .step.show#step-1{
	  display: flex;
	  justify-content: center;
  }

  .disabledAcount .step .d-flex{
	  display: flex;
  }

  .disabledAcount .step p{
	  font-size: 24px;
	  line-height: 30px;
  }

  .disabledAcount .step#step-5 p{
	  text-align: center;
  }

  .disabledAcount .step#step-5 p:first-child{
	  font-size: 28px;
	  line-height: 32px;
	  font-weight: bold;
  }

  .disabledAcount .step#step-5 p:first-child > p{
	  font-size: 18px;
	  line-height: 24px;
  }

  .disabledAcount .step#step-5 span{
	   margin: 0 auto;
	  position: relative;
	  display: block;
	  font-size: 12px;
	  width: 100%;
	  text-align: center;
  }

  .columnTabloide{
	  padding: 0 !important;
  }

  .columnTabloide img{
	  border-radius: 6px;
  }

  .politica-de-privacidade{
	  margin-top: 10px;
	font-size: 12px;
	text-decoration: underline;
  }

  #wp-admin-bar-root-default li:not(#wp-admin-bar-site-name):not(#wp-admin-bar-menu-toggle){
	  display: none !important;
  }

  .lb-loader, .lightbox{
	  z-index: 999999999 !important;
  }

  .lightboxOverlay{
	  z-index: 999999998 !important;
  }

  .slick-dots{
	  display: flex;
	  justify-content: center;
	  padding: 0;
	  margin: 10px 0 0;
  }

  .slick-dots li{
	  list-style: none;
	  margin: 0 4px;
	  line-height: 0;
  }

  .slick-dots li button{
	  border: none !important;
	  font-size: 0 !important;
	  line-height: 0 !important;
	  padding: 0 !important;
	  width: 10px !important;
	  height: 10px !important;
	  min-height: 10px !important;
	  background-color: #ccc !important;
	  border-radius: 50% !important;
	  cursor: pointer;
	  display: block !important;
	  outline: none !important;
	  color: transparent !important;
  }

  .slick-dots li button:before{
	  display: none !important;
  }

  .slick-dots li.slick-active button{
	  background-color: #444 !important;
	  width: 12px !important;
	  height: 12px !important;
  }

  .ofertasRotate > p{
	  margin: 20px 0;
	  text-align: center;
	  font-size: 32px;
	  color: #666;
  }

  .etiqueta{
	 	/* position: absolute;
	  	right: 10px;
	  	top: 40px; */
	    border-radius: 5px;
		padding: 4px 7px;
		text-align: center;
		color: white;
		font-size: 12px;
		width: max-content;
		margin: 10px 0;
  }

  .etiqueta.oferta{
	  background-color: #b11515;
  }

  .etiqueta.clube{
	  background-color: #107410;
  }

  .aviso{
	display: block;
    width: 100%;
    text-align: center;
    font-size: 11px;
    margin-bottom: 10px;
  }


  @media(max-width:  768px){
	  table{
		  display: block;
		max-width: -moz-fit-content;
		max-width: fit-content;
		margin: 0 auto;
		overflow-x: auto;
		white-space: nowrap;
	  }
	  #modalConfirmacao .box{
		  max-width: 100%;
	  }
	  .columnTabloide{
		  margin-top: 50px;
	  }
	  .reverseMobile{
		  flex-direction: column-reverse !important;
	  }
	  .boxAddApp{
		  width: 100%;
	  }
	  .modal .box{
		  overflow-x: scroll;
		  height: 100vh;
	  }
	  .modal.open{
		  overflow-y: scroll;
		  height: 100%;
	  }
	  .selectLojas{
		  width: 100%;
	  }
	  .footer.ios{
		  height: auto;
	  position: relative;
	  bottom: 0;
	  z-index: 2;
	  width: 100%;
	  background-color: #4c4c4c;
	  display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: column;
	  }
	  .footer.ios .boxAddApp {
		  width: 100%;
		  box-shadow: none;
		  border-radius: 0;
		  background-color: transparent;
		  justify-content: center;
		  padding-left: 0;
	  }
	  .footer.ios .addApp img {
		  max-width: 35px;
	  }
	  .footer.ios .addApp{
		  position: relative;
		  padding: 0 10px;
		  transform: translateX(-100%);
	  }
	  .footer.ios  #closeAddApp{
		  display: none;
	  }
	  .blocoFilter{
			flex-direction: column-reverse;
			padding: 10px;
			margin-bottom: 5px;
	  }
	  .columnTabloide img{
		  border-radius: 6px;
	  }
	  .columnTabloide div.col-xs-12:not(:last-child){
		  margin-bottom: 20px;
	  }
  }



  div#__wp-uploader-id-2 {
    z-index: 999999999999999;
}

/* ── Acessibilidade & SEO ── */

/* Focus visible para navegação por teclado */
:focus-visible {
    outline: 2px solid var(--color-brand, #3B82F6);
    outline-offset: 2px;
}

/* Touch targets mínimo 44px */
button, a, input[type="checkbox"], input[type="radio"], select {
    min-height: 44px;
}

/* Skip to content (acessibilidade) */
.skip-to-content {
    position: absolute;
    top: -100%;
    left: 0;
    background: #000;
    color: #fff;
    padding: 12px 20px;
    z-index: 999999999;
    font-size: 14px;
    transition: top 0.2s;
}
.skip-to-content:focus {
    top: 0;
}

/* Footer links */
.footer-links {
    text-align: center;
    padding: 8px 10px 0;
}
.footer-links a {
    font-size: 12px;
    color: var(--main-color) !important;
    text-decoration: underline;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .btn, .apple-signin-btn {
        border: 2px solid currentColor;
    }
}

.fancybox-container{
	z-index: 999999999999999 !important;
}

.lista-pagamentos {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 15px;
    padding: 0px 10px 0px 0px;
}

.filter-list{
	width: 35px;
    height: 35px;
    font-size: 18px;
    background: white;
    border: none;
}

/* v4.77.46 — submodal #busca-filtros (half_page) em mobile: ocupa toda a
   tela (antes era 50% → aparecia na metade direita + cabeçalho cortado +
   bug visual). Mantém o fade/slide do .filter__page.actived padrão. */
article.filter__page.half_page.actived {
	width: 100% !important;
	padding: 0 !important;
}

/* Fix #251 — scroll horizontal ao abrir painel de busca */
body.modal__actived {
    overflow-x: hidden;
}
article.filter__page {
    overflow-x: hidden;
}
article.filter__page .container__filter__page {
    overflow-x: hidden;
}

/* =====================================================================
   FILTER__PAGE como modal canonico (v4.77.38)
   Modal de busca (#busca) e submodal de filtros (#busca-filtros).
   Padroniza .headModal, padding interno, input e botoes do search-row.
   ===================================================================== */

/* Reset do padding externo do container — .headModal precisa ficar colada
   ao topo (sticky), e o padding vai pro body__filter__page. */
article.filter__page .container__filter__page {
    padding: 0 !important;
}

/* headModal canonico dentro de filter__page (espelha o shim de pharus-modal.css
   mas escopado para article.filter__page — pharus-modal.css so cobre article.modal). */
article.filter__page .headModal {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--main-color, var(--color-brand, #3B82F6)) !important;
    background-image: none !important;
    color: #fff;
    padding: var(--space-4, 16px) var(--page-padding, 16px);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: var(--space-3, 12px);
    height: auto;
    min-height: var(--touch-target, 44px);
    width: 100%;
    box-sizing: border-box;
    text-align: left;
}

article.filter__page .headModal::after {
    content: none !important;
    background: transparent !important;
    display: none !important;
}

article.filter__page .headModal .modal-close-btn {
    position: static !important;
    transform: none !important;
    top: auto !important;
    right: auto !important;
    order: 1;
    width: var(--touch-target, 44px);
    height: var(--touch-target, 44px);
    min-width: var(--touch-target, 44px);
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    color: #fff !important;
    font-size: 20px;
    cursor: pointer;
    margin: 0 0 0 -8px !important;
    padding: 0 !important;
    z-index: 3;
}

article.filter__page .headModal .modal-close-btn:active {
    background: rgba(255, 255, 255, 0.15) !important;
    border-radius: var(--radius-full, 9999px) !important;
}

article.filter__page .headModal .modal-close-btn i {
    color: #fff !important;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

article.filter__page .headModal h3 {
    order: 2;
    flex: 1;
    min-width: 0;
    margin: 0;
    padding: 0;
    color: #fff;
    font-size: var(--font-lg, 17px);
    font-weight: var(--weight-semibold, 600);
    line-height: 1.3;
    text-align: left;
    text-shadow: none;
    position: relative;
    z-index: 2;
    width: auto;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Body interno do filter__page ganha o padding — container perdeu o dele */
article.filter__page .body__filter__page {
    padding: var(--space-4, 16px) var(--page-padding, 16px);
    padding-top: var(--space-4, 16px);
}

/* Footer do filter__page com padding compativel */
article.filter__page .foot__filter__page {
    padding-left: var(--page-padding, 16px);
    padding-right: var(--page-padding, 16px);
    padding-bottom: calc(var(--space-3, 12px) + env(safe-area-inset-bottom, 0px));
}

/* ── Input de busca padronizado (touch-target + tokens) ─────
   v4.77.48 — radius oval (full 9999px) trocado por radius-md (12px),
   casa com a identidade do resto do app (botões, cards, inputs
   quadrados suaves) em vez de pílula. */
article.filter__page #searchInputModal,
article.filter__page input.form-control#searchInputModal {
    height: var(--touch-target, 44px) !important;
    min-height: var(--touch-target, 44px) !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 40px 0 var(--space-4, 16px) !important;
    border: 1px solid var(--border-default, #e4e4e7) !important;
    border-radius: var(--radius-md, 12px) !important;
    background: var(--bg-secondary, #fafafa) !important;
    color: var(--text-primary, #18181b) !important;
    font-size: 16px !important; /* antizoom iOS */
    line-height: 1 !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.15s, background 0.15s;
}

article.filter__page #searchInputModal:focus {
    border-color: var(--main-color, #3B82F6) !important;
    background: var(--bg-primary, #fff) !important;
}

article.filter__page #searchInputModal::placeholder {
    color: var(--text-muted, #71717a);
    opacity: 1;
}

/* Icone lupa dentro do input — reposiciona pro novo radius */
article.filter__page .search-row .box__search .search-row-icon {
    right: 16px;
    color: var(--text-muted, #71717a);
}

/* ── Botoes da search-row canonicos (sobrescreve os antigos) ──
   v4.77.48 — radius quadrado suave (12px) casando com o input. */
article.filter__page .search-row .search-row-btn,
article.filter__page .search-row .filter-list {
    width: var(--touch-target, 44px) !important;
    height: var(--touch-target, 44px) !important;
    min-width: var(--touch-target, 44px);
    border: none !important;
    border-radius: var(--radius-md, 12px) !important;
    background: var(--main-color, #3B82F6) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    font-size: 16px;
    padding: 0;
    transition: opacity 0.15s;
}

article.filter__page .search-row .search-row-btn:active,
article.filter__page .search-row .filter-list:active {
    opacity: 0.85;
}

article.filter__page .search-row .search-row-btn i {
    color: #fff;
    font-size: 16px;
    line-height: 1;
}

/* Gear admin (secundario) mantem fundo claro pra diferenciar do filtro */
article.filter__page .search-row .search-row-btn.gear {
    background: var(--bg-secondary, #fafafa) !important;
    color: var(--text-secondary, #52525b) !important;
    border: 1px solid var(--border-default, #e4e4e7) !important;
}

/* #297 A2: productsArea padding lateral 15px — Bootstrap .row tem margin negativo
   próprio; adiciona padding pra dar respiro lateral igual às categorias acima. */
#productsArea.row {
    padding: 0 15px !important;
}

article.filter__page .search-row .search-row-btn.gear i {
    color: var(--text-secondary, #52525b);
}

/* Oculta o .head__filter__Page legado quando marcado com [hidden] */
article.filter__page .head__filter__Page[hidden] {
    display: none !important;
}

/* Título de seção dentro do submodal de filtros (v4.77.48) */
article.filter__page#busca-filtros .filter-section-title {
    margin: 0 0 var(--space-3, 12px) 0;
    font-size: var(--font-sm, 13px);
    font-weight: var(--weight-semibold, 600);
    color: var(--text-primary, #18181b);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Footer com botão Aplicar — cola no fundo do submodal (v4.77.48) */
article.filter__page#busca-filtros .foot__filter__page {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background: var(--bg-primary, #fff);
    border-top: 1px solid var(--border-light, #f4f4f5);
    box-shadow: 0 -4px 16px rgba(0,0,0,0.06);
    padding: var(--space-3, 12px) var(--page-padding, 16px) calc(var(--space-3, 12px) + env(safe-area-inset-bottom, 0px)) !important;
    margin-top: auto;
}

/* Chips do submodal de filtros */
article.filter__page#busca-filtros .chips-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2, 8px);
    margin-top: var(--space-2, 8px);
}

/* CTA DE GRUPO */

.cta-modal {
  	display: none;
  	position: fixed;
  	top: 0; left: 0;
  	width: 100%; height: 100%;
  	background: rgba(0,0,0,0.7);
  	z-index: 9999999999;
  	justify-content: center;
  	align-items: center;
  	font-family: Arial, sans-serif;
}

.cta-modal .cta-content {
  	background: #fff;
    padding: 20px;
    border-radius: 12px;
    text-align: center;
    width: calc(100% - 20px);
    box-shadow: 0 4px 10px rgba(85, 82, 82, 0.3);
}

.cta-modal .cta-content .title__group_modal{
	font-size: 28px;
    font-weight: bold;
	line-height: 34px;
	margin: 0
}

.cta-modal .cta-content p:not(.title__group_modal){
	font-size: 16px;
	line-height: 22px;
	margin: 15px 0;
}

.cta-modal .cta-content img{
	max-height: 320px;
}

.cta-modal button {
  	padding: 12px 20px;
  	border: none;
  	border-radius: 6px;
  	font-size: 16px;
  	cursor: pointer;
    min-width: 200px;
}

#joinNowBtn { background: #128c7E; color: #fff; }

#laterBtn {
	background: transparent;
    text-decoration: underline;
}

#countdownText { margin-top: 15px; font-size: 14px; color: #555; }

/* =====================================================================
   CHAT — modal-chat.php (v4.77.34)
   Fale conosco: cliente <> administrador. Segue canonico de chat mobile.
   Correcoes v4.77.34: respiro topo/fundo das mensagens, input 44px canonico,
   botao enviar 44x44, safe-area no form, separador de data como chip central.
   ===================================================================== */

/* Override do .contentModal quando conteudo e chat — layout flex column full height */
.modal#modal-chat .contentModal.chat-content {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    padding: 0 !important;
    background: var(--bg-secondary, #fafafa) !important;
    overflow: hidden !important; /* scroll fica no .chat-messages interno */
    border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0;
}

/* Header do chat com info da loja */
.chat-store-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--space-3, 12px);
    padding: var(--space-3, 12px) var(--space-4, 16px);
    background: var(--bg-primary, #fff);
    border-bottom: 1px solid var(--border-light, #f4f4f5);
    color: var(--text-primary, #18181b);
}

.chat-store-logo {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full, 50%);
    object-fit: cover;
    flex-shrink: 0;
}

.chat-store-name {
    display: block;
    font-size: var(--font-md, 15px);
    font-weight: var(--weight-semibold, 600);
    color: var(--text-primary, #18181b);
    line-height: 1.2;
}

.chat-store-status {
    margin: 2px 0 0;
    font-size: var(--font-xs, 12px);
    color: var(--text-muted, #71717a);
    line-height: 1.2;
}

/* Container de mensagens — scrollable com respiro topo/fundo */
.chat-messages {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    display: flex;
    flex-direction: column;
    gap: var(--space-2, 8px);
    padding: var(--space-4, 16px) var(--space-3, 12px) var(--space-4, 16px);
    background: var(--bg-secondary, #fafafa);
}

/* Bolhas de mensagem — classes canonicas */
.chat-bubble {
    max-width: 78%;
    padding: var(--space-3, 12px) var(--space-4, 16px);
    border-radius: var(--radius-lg, 16px);
    font-size: var(--font-sm, 13px);
    line-height: var(--leading-normal, 1.5);
    word-wrap: break-word;
    overflow-wrap: break-word;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.chat-bubble--customer {
    align-self: flex-end;
    background: var(--main-color, #3B82F6);
    color: #fff;
    border-bottom-right-radius: var(--radius-sm, 8px); /* tail sutil */
}

.chat-bubble--admin {
    align-self: flex-start;
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #18181b);
    border: 1px solid var(--border-light, #f4f4f5);
    border-bottom-left-radius: var(--radius-sm, 8px); /* tail sutil */
}

.chat-bubble__time {
    display: block;
    font-size: var(--font-xs, 11px);
    opacity: 0.7;
    margin-top: 2px;
    color: inherit;
}

.chat-bubble--admin .chat-bubble__time {
    color: var(--text-muted, #71717a);
}

/* Bolha de resposta da IA (cliente final). Variante visual sutil da admin
   pra deixar claro que é atendimento automático sem soar artificial. */
.chat-bubble--ai {
    background: var(--bg-secondary, #f4f4f5);
    border-color: var(--border-light, #e4e4e7);
}

.chat-bubble__ai-label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-brand, #6b7280);
    margin-bottom: 2px;
    opacity: 0.85;
}

.chat-bubble__text {
    display: block;
    /* O chatbot responde com quebras de linha; sem isto a bolha
       colapsava tudo num paragrafo so. 06/10/2026 */
    line-height: 1.45;
    overflow-wrap: anywhere;   /* link longo nao estoura a bolha */
}

/* Negrito do WhatsApp (*assim*) convertido em <strong> pelo JS. */
.chat-bubble__text strong {
    font-weight: 600;
}

/* Links das respostas — herdam a cor da bolha pra nao brigar com ela. */
.chat-bubble__text a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    opacity: .92;
}

.chat-bubble__text a:hover {
    opacity: 1;
}

/* Conversa escalada — cliente pediu humano, IA fora do ar até admin atender */
.chat-store-status--escalated {
    color: var(--color-warning, #b45309) !important;
    font-weight: 600;
}

/* Separador de data / chip central — ex: "00:43" ou "Ontem" */
.chat-date-separator,
.chat-day-label {
    align-self: center;
    font-size: var(--font-xs, 11px);
    color: var(--text-muted, #71717a);
    background: var(--bg-primary, #fff);
    border-radius: var(--radius-full, 9999px);
    padding: 2px var(--space-3, 12px);
    margin: var(--space-2, 8px) 0;
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
}

/* Form de envio — sticky no fundo do modal, respeita safe-area iOS */
.modal#modal-chat .chat-form {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
    padding: var(--space-3, 12px) var(--space-3, 12px) calc(var(--space-3, 12px) + env(safe-area-inset-bottom, 0px));
    background: var(--bg-primary, #fff);
    border-top: 1px solid var(--border-light, #f4f4f5);
}

.modal#modal-chat .chat-input {
    flex: 1;
    min-width: 0;
    /* v4.77.48 — altura e margem com !important pra vencer Bootstrap
       .form-control (que adiciona margin-bottom e padding-block). Isso
       garante que input e .chat-send-btn tenham exatamente a mesma
       box-height (40px) e fiquem alinhados. */
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    margin: 0 !important;
    padding: 0 var(--space-3, 12px) !important;
    border: 1px solid var(--border-default, #e4e4e7) !important;
    border-radius: var(--radius-sm, 8px) !important;
    background: var(--bg-secondary, #fafafa) !important;
    color: var(--text-primary, #18181b) !important;
    font-size: 16px !important; /* antizoom iOS */
    line-height: 1 !important;
    box-sizing: border-box !important;
    outline: none !important;
    transition: border-color 0.15s ease, background 0.2s ease;
}

.modal#modal-chat .chat-input:focus {
    border-color: var(--main-color, #3B82F6);
    background: var(--bg-primary, #fff);
}

.modal#modal-chat .chat-input::placeholder {
    color: var(--text-muted, #71717a);
}

.modal#modal-chat .chat-send-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-height: 40px !important;
    flex-shrink: 0;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: var(--radius-sm, 8px) !important;
    background: var(--main-color, #3B82F6) !important;
    color: #fff !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-sizing: border-box !important;
    cursor: pointer;
    transition: transform 0.1s ease, background 0.15s ease;
}

.modal#modal-chat .chat-send-btn:active {
    transform: scale(0.94);
}

.modal#modal-chat .chat-send-btn:hover {
    background: color-mix(in srgb, var(--main-color, #3B82F6) 85%, #000);
}

.modal#modal-chat .chat-send-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.modal#modal-chat .chat-send-btn i {
    font-size: var(--font-md, 15px);
    line-height: 1;
}

/* Empty state dentro do chat — centraliza verticalmente */
.chat-messages .pharus-empty {
    margin: auto;
}