/**
 * Brand-styled informational tables (delivery rates, comparison grids, FAQ
 * pricing). Paste the HTML below into any Elementor HTML widget and the
 * styling applies automatically.
 *
 *   <div class="ly-info-table-wrap">
 *     <table class="ly-info-table">
 *       <thead>
 *         <tr><th>Zone</th><th>Delivery method</th><th>Rate</th></tr>
 *       </thead>
 *       <tbody>
 *         <tr>
 *           <td rowspan="5">Metropolitan France</td>
 *           <td>🏠 Colissimo Home Delivery<small>Delivery 48h to 72h</small></td>
 *           <td>4,90€ <span class="ly-info-table__free">Free from €69 purchase</span></td>
 *         </tr>
 *         ...
 *       </tbody>
 *     </table>
 *   </div>
 *
 * Wrap in `.ly-info-table-wrap` so the table can horizontally scroll on
 * mobile instead of breaking the page layout.
 */

/* Section heading that sits above the table (Elementor widget control). */
.ly-info-table-heading {
	font-family: var( --ly-text-heading, 'Bricolage Grotesque', sans-serif );
	font-size: 1.25rem;
	font-weight: 700;
	color: var( --ly-color-primary, #53225e );
	border-bottom: 2px solid var( --ly-color-primary, #53225e );
	padding-bottom: 8px;
	margin: 0 0 12px;
}

/* Icon/emoji glyph rendered before the method name. */
.ly-info-table__icon {
	display: inline-block;
	margin-right: 4px;
}

.ly-info-table-wrap {
	width: 100%;
	overflow-x: auto;
	margin: 0 0 24px;
	-webkit-overflow-scrolling: touch;
}

.ly-info-table {
	width: 100%;
	border-collapse: collapse;
	font-family: inherit;
	font-size: 0.95rem;
	color: var( --ly-color-text, #1f1f23 );
	background: #ffffff;
}

.ly-info-table thead th {
	background: var( --ly-color-primary, #53225e );
	color: #ffffff;
	font-weight: 700;
	text-align: left;
	padding: 16px 20px;
	border: none;
	letter-spacing: 0.005em;
}

.ly-info-table tbody td {
	padding: 16px 20px;
	border-top: 1px solid var( --ly-color-border, #ece6e0 );
	vertical-align: top;
	line-height: 1.5;
}

/* The first column ("Zone") — bold label, no top border on first row's cell
   because thead already provides the separator. */
.ly-info-table tbody td:first-child {
	font-weight: 700;
	color: var( --ly-color-text, #1f1f23 );
	background: var( --ly-color-surface-subtle, #faf6f1 );
	width: 1%;
	white-space: nowrap;
}

/* Sub-text inside a cell — e.g. "Delivery 48h to 72h" below the method name.
   Drop a <small> or <span class="ly-info-table__sub"> on its own line. */
.ly-info-table small,
.ly-info-table .ly-info-table__sub {
	display: block;
	margin-top: 4px;
	font-size: 0.85rem;
	color: var( --ly-color-text-muted, #4a4a52 );
	font-weight: 400;
}

/* Highlighted "Free from …" line in the Rate column. */
.ly-info-table__free {
	display: block;
	margin-top: 4px;
	font-weight: 700;
	color: #16803c;
}

/* Optional alternating-row tint inside a rowspan group can be expressed by
   adding `.is-alt` to a <tr> manually if needed. Not used in the default
   layout but available. */
.ly-info-table tbody tr.is-alt td {
	background: var( --ly-color-surface-subtle, #faf6f1 );
}

@media ( max-width: 600px ) {
	.ly-info-table thead th,
	.ly-info-table tbody td {
		padding: 12px 14px;
		font-size: 0.9rem;
	}
}