/* Stile base per i tab dentro il popup prodotto (Descrizione, Tabella nutrizionale, Modalità d'uso) */

.popup-tabs-nav {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 16px;
	border-bottom: 0;
}

button.popup-tab-btn {
	background: none;
	padding: 10px 14px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	    color: #0e3a4f;
	
	transition: color 0.2s ease, border-color 0.2s ease;
	
	border-radius:20px;
	border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #CCC13F;
	    font-family: "Hanken Grotesk", Sans-serif;
    font-weight: 800;
}

button.popup-tab-btn:hover {
	background-color:#0e3a4f;
	color:white;
	border:0;
}

button.popup-tab-btn.is-active {
	background-color:#0e3a4f;
	color:white;
	border:0;
}

.popup-tab-panel {
	display: none;
}

.popup-tab-panel.is-active {
	display: block;
}


.popup-tab-panel p{
	font-family: "Hanken Grotesk", Sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: #7a7a7a;
}
/* Nasconde visivamente l'heading che contiene l'ID prodotto, */
/* ma lo lascia nel DOM cosi' il JS puo' leggerlo al click */
.product-id-holder {
	display: none;
}




/* tabella */

.popup-tab-panel {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden; /* impedisce l'uscita orizzontale */
  box-sizing: border-box;
}

.popup-tab-panel table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* fondamentale: forza le colonne a rispettare la larghezza del contenitore */
  font-size: 12px;
  line-height: 1.2;
}

.popup-tab-panel th,
.popup-tab-panel td {
  padding: 4px 6px;
  border: 1px solid #ddd;
  text-align: left;
  vertical-align: middle;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: normal; /* impedisce il testo di restare su una riga sola */
  box-sizing: border-box;
}

.popup-tab-panel thead th {
  background-color: #f2f2f2;
  font-weight: 600;
  font-size: 11px;
}

/* larghezze proporzionali fisse, sommano a 100% */
.popup-tab-panel th:first-child,
.popup-tab-panel td:first-child {
  width: 34%;
}

.popup-tab-panel th:nth-child(2),
.popup-tab-panel td:nth-child(2),
.popup-tab-panel th:nth-child(3),
.popup-tab-panel td:nth-child(3) {
  width: 33%;
  text-align: right;
}

.popup-tab-panel tbody tr:nth-child(even) {
  background-color: #fafafa;
}







/* aggiunbte */
.popup-tab-panel td,
.popup-tab-panel th {
  vertical-align: middle;
  max-height: 40px; /* non blocca il contenuto ma aiuta il layout visivo */
  overflow: hidden;
}

/* azzera l'altezza dei <br> vuoti o consecutivi dentro le celle */
.popup-tab-panel td br,
.popup-tab-panel th br {
  display: none;
}

/* azzera paragrafi vuoti dentro le celle */
.popup-tab-panel td p:empty,
.popup-tab-panel th p:empty {
  display: none;
  margin: 0;
  height: 0;
}

.popup-tab-panel td p,
.popup-tab-panel th p {
  margin: 0;
  line-height: 1.3;
}


.popup-tab-panel th,
.popup-tab-panel td {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 6px 8px !important;
  vertical-align: middle !important;
}

.popup-tab-panel tr {
  height: auto !important;
}

/* nasconde eventuali celle header completamente vuote invece di lasciarle occupare spazio */
.popup-tab-panel th:empty {
  padding: 6px 8px !important;
  line-height: 1;
}