/* =========================================================================
   TrueMuscle Product Blocks — stylesheet
   File: /assets/css/truemuscle-product.css
   -------------------------------------------------------------------------
   Starting styles. Rebrand fast via the two variables. All class names match
   the PHP renderer. Selectors are kept modest; if the theme overrides something,
   raise specificity by prefixing with `.single-product` .
   ========================================================================= */

:root {
	--tm-accent: #0066cc;   /* headings / borders / buttons — TrueMuscle blue */
	--tm-border: #e3e3e3;
	--tm-zebra:  #f2f7fc;
	--tm-warn:   #c62828;
	--tm-info:   #1565c0;
	--tm-ok:     #2e7d32;
	--tm-radius: 8px;
}

/* ---- Two-column layout ------------------------------------------------- */
.tm-product-row {
	display: flex;
	flex-wrap: wrap;
	gap: 4rem;
	align-items: flex-start;
}
.tm-product-desc  { flex: 1 1 55%; min-width: 300px; }
.tm-product-facts { flex: 1 1 35%; min-width: 300px; }
.tm-product-row.tm-no-facts .tm-product-desc { flex-basis: 100%; }

@media (max-width: 781px) {
	.tm-product-row { gap: 1.5rem; }
	.tm-product-desc,
	.tm-product-facts { flex-basis: 100%; min-width: 0; }
}

/* ---- Section / sub titles (class hooks) -------------------------------- */
.tm-section-title {
	font-size: 1.4rem;
	line-height: 1.2;
	margin: 0 0 1rem;
	color: var(--tm-accent);
}
.tm-subtitle {
	font-size: 1.05rem;
	margin: 1.25rem 0 .5rem;
	color: var(--tm-accent);
}

/* =========================================================================
   FREE-TEXT (left column body) — style manager-created elements that carry
   no classes, by context.
   ========================================================================= */
.tm-product-desc h2 { margin: 1.5rem 0 .75rem; }
.tm-product-desc h3 { font-size: 1.4rem; margin: 1.25rem 0 .5rem; color: var(--tm-accent); }

.tm-product-desc ul { list-style: none; padding-left: 0; margin: 0 0 1rem; }
.tm-product-desc ul li {
	position: relative;
	padding-left: 1.4rem;
	margin-bottom: .5rem;
	text-align: justify;
}
.tm-product-desc ul li::before {
	content: "";
	position: absolute;
	left: 0; top: .55em;
	width: .5rem; height: .5rem;
	border-radius: 50%;
	background: var(--tm-accent);
}

.tm-product-desc table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.tm-product-desc table th,
.tm-product-desc table td { border: 1px solid var(--tm-border); padding: .5rem .65rem; text-align: left; }

/* ---- AiVi placeholder -------------------------------------------------- */
.aivi { margin: 0 0 1.25rem; }
.aivi-inner { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.aivi-link {
	display: inline-block;
	padding: .4rem .9rem;
	border: 1px solid var(--tm-accent);
	border-radius: 999px;
	font-size: .9rem;
	text-decoration: none;
	color: var(--tm-accent);
	transition: background .15s, color .15s;
}
.aivi-link:hover { background: var(--tm-accent); color: #fff; }

/* =========================================================================
   INSTRUCTION BLOCK (Δοσολογία, Οδηγίες, Αντενδείξεις, etc.)
   ========================================================================= */
.tm-instruction-block { margin-top: 1.5rem; }
.tm-ib-title {
	font-size: 1.05rem;
	margin: 1.25rem 0 .4rem;
	padding-bottom: .3rem;
	border-bottom: 2px solid var(--tm-accent);
	color: var(--tm-accent);
}
.tm-ib-content { text-align: left; margin-bottom: .5rem; }
.tm-ib-content p { margin: .25rem 0; }

/* Precaution badges */
.tm-precaution-list {
	list-style: none;
	padding: 0;
	margin: .75rem 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
}
.tm-pbadge {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem .85rem;
	border-radius: var(--tm-radius);
	font-size: .85rem;
	border: 1px solid transparent;
}
.tm-pbadge img { width: 28px; height: 28px; flex: 0 0 auto; }
.tm-pbadge--warning { background: #fdecea; border-color: var(--tm-warn); color: var(--tm-warn); }
.tm-pbadge--info    { background: #e8f0fb; border-color: var(--tm-info); color: var(--tm-info); }
.tm-pbadge--ok      { background: #e9f5ea; border-color: var(--tm-ok);   color: var(--tm-ok); }

/* =========================================================================
   SUPPLEMENT FACTS panel (right column)
   ========================================================================= */
.tm-facts-box {
	border: 1px solid var(--tm-border);
	border-radius: var(--tm-radius);
	padding: 1.25rem;
	background: #fff;
}
.tm-facts-meta { margin: 0 0 .55rem; font-weight: 600; font-size: .95rem; line-height: normal;}
.tm-facts-meta span { font-weight: 400; }

.tm-facts-table { width: 100%; border-collapse: collapse; margin: 1.3rem 0 .5rem; font-size: .85rem; }
.tm-facts-table thead th {
	font-family: 'Proxima Nova Regular', sans-serif;
	background: #0066cc;
	color: #fff;
	font-weight: 600;
	text-align: left;
	padding: .5rem .6rem;
	vertical-align: top;
	word-break: normal;
}
.tm-facts-table tbody td { border-bottom: 1px solid var(--tm-border); padding: .5rem .6rem; vertical-align: top; word-break: normal; line-height: normal; font-family: 'Proxima Nova Regular', sans-serif; font-size: .9rem;}
.tm-facts-table tbody tr:nth-child(even) td { background: var(--tm-zebra); }
.tm-facts-table .tm-col-amount,
.tm-facts-table .tm-col-dv { white-space: normal; line-height: normal; }

.tm-facts-footnote { font-size: .75rem; color: #666; margin: 0 0 0; }
.tm-facts-excipients p { margin: .25rem 0; font-size: .9rem; line-height: normal;}

.tm-badge-list {
	list-style: none;
	padding-left: 0!important;
	margin: 1.25rem 0 0;
	display: block;
	flex-wrap: wrap;
	gap: 1rem;
}
.tm-badge {
	display: flex;
	flex-direction: column;
	align-items: left;
	text-align: center;
	width: 100%;
	font-size: 5px;
	color: #fff;
	line-height: 0;
}
.tm-badge img { width: 100%; max-width: 200px!important; height: auto; margin-bottom: .35rem; }

/* Feature badge entered without an icon URL */
.tm-badge--text {
	width: auto;
	flex-direction: row;
	padding: .4rem .85rem;
	border: 1px solid var(--tm-accent);
	border-radius: 999px;
	color: var(--tm-accent);
	font-size: .8rem;
	line-height: 1.2;
}