/* ============================================================
   MEGA LAB PEPTIDES - HOMEPAGE (was inline in page-homepage.php)
   Extracted in design-refresh-v2 Phase 4a (Ticket 7).
   ============================================================ */

/* Blocksy flush fix */
.page-template-page-homepage .ct-main,
.page-template-page-homepage .entry-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
/* Page bg white — sections handle their own backgrounds.
   Prevents dark navy body colour bleeding through gaps. */
.page-template-page-homepage {
    background: #fff !important;
}

/* ============================================================
   Phase 4c homepage. Every section: full-bleed background, content
   on .xlml-rail, vertical padding only. No decorative motion.
   ============================================================ */

/* -- Hero: product-led, navy ----------------------------------- */
.xlml-home-hero { background: var(--c-dark); color: #fff; padding-block: var(--sp-8) var(--sp-8); --eyebrow-c: var(--c-primary); }
.xlml-home-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); align-items: center; }
/* Text column (4c.4): the column sets the measure, not the h1. At 1024px+ the
   rail is a two-column grid, text minmax(0,1fr) capped at 720px and the panel a
   fixed 400px, so the headline runs three lines at 1440 and 1920. */
.xlml-home-hero__copy { min-width: 0; }
.xlml-home-hero__title { color: #fff; margin: 0 0 var(--sp-3); line-height: 1.1; letter-spacing: -0.01em; }
.xlml-home-hero__lead { color: var(--n-300); margin: 0 0 var(--sp-4); max-width: 560px; }
.xlml-home-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* Featured product card (4c.2, restructured 4c.4). One layout at every width:
   a 1:1 image frame the full width of the card (off-white, contain), then a
   body with 20px padding: eyebrow (8px) name (12px) price (20px) CTA. The
   price is the mono price alone, left-aligned (the stock line was removed in
   4c.5); the CTA runs the full width of the content block at 48px, so it
   reads as the card's base edge inside the 20px inset. */
.xlml-home-hero__product { background: #fff; color: var(--c-text); border: 1px solid var(--c-border); display: flex; flex-direction: column; --eyebrow-c: var(--n-700); /* white panel inside the navy hero */ }
.xlml-home-hero__media { display: block; width: 100%; aspect-ratio: 1 / 1; background: var(--c-off); border-bottom: 1px solid var(--c-border); overflow: hidden; }
.xlml-home-hero__img { width: 100%; height: 100%; object-fit: contain; display: block; }
.xlml-home-hero__body { padding: 20px; display: flex; flex-direction: column; }
.xlml-home-hero__body .xlml-card__eyebrow { display: block; font-size: var(--t-label); color: var(--n-700); margin: 0 0 8px; } /* display: the row rule hides card eyebrows below 768px; the hero keeps its */
.xlml-home-hero__name { font-size: var(--t-h2); line-height: var(--lh-h2); margin: 0 0 12px; }
.xlml-home-hero__name a { color: var(--c-dark); text-decoration: none; }
.xlml-home-hero__name a:hover { color: var(--c-link); }
.xlml-home-hero__price { font-family: var(--f-mono); font-weight: 700; font-size: var(--t-h3); line-height: 1; color: var(--c-dark); font-variant-numeric: tabular-nums; margin: 0 0 20px; text-align: left; }
.xlml-home-hero__price .woocommerce-Price-amount { font-family: inherit; font-weight: inherit; }
.xlml-home-hero__cta { width: 100%; min-height: 48px; padding-block: 0; justify-content: center; font-size: var(--t-body); }
@media (min-width: 640px) and (max-width: 1023px) {
	/* tablets: the panel stacks above the copy; cap it so the 1:1 frame is not 670px tall */
	.xlml-home-hero__product { max-width: 480px; }
}
@media (min-width: 1024px) {
	.xlml-home-hero { padding-block: var(--sp-10) var(--sp-10); }
	.xlml-home-hero__grid { grid-template-columns: minmax(0, 1fr) 400px; gap: var(--sp-8); align-items: center; }
	.xlml-home-hero__copy { max-width: 720px; }
	/* 4c.4: frame capped at 380px so the card (frame + body with the 48px CTA)
	   still ends above 855px at 1920; the 1:1 ratio yields to the cap and the
	   square photo sits centred with 10px off-white bands. */
	.xlml-home-hero__media { max-height: 380px; }
	.xlml-home-hero__product { width: 100%; }
}
@media (max-width: 1023px) {
	/* phones and tablets: the product panel paints first so the product image is the LCP element */
	.xlml-home-hero__product { order: -1; }
}

/* -- Shop grid: eight products + category tabs ----------------- */
.xlml-home-grid { background: var(--c-off); padding-block: var(--sp-8); }
.xlml-home-grid__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: var(--sp-4); }
.xlml-home-grid__head h2 { margin: 0; }
.xlml-home-grid__all { font-size: var(--t-small); font-weight: 600; color: var(--c-link); text-decoration: none; white-space: nowrap; }
.xlml-home-grid__all:hover { text-decoration: underline; }
.xlml-home-grid__tabs { margin-top: var(--sp-4); border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); justify-content: flex-start; }

/* -- Reference table -------------------------------------------- */
.xlml-home-ref { background: #fff; padding-block: var(--sp-8); }
.xlml-home-ref__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 24px; margin-bottom: var(--sp-3); }
.xlml-home-ref__head h2 { margin: 0; }
.xlml-home-ref__count { margin: 0; color: var(--n-700); }
.xlml-home-ref__search { margin-left: auto; display: flex; flex-direction: column; gap: 4px; font-size: var(--t-label); font-weight: 600; color: var(--n-800); min-width: min(100%, 280px); }
.xlml-home-ref__search input { font-family: var(--f-body); font-size: var(--t-body); padding: 8px 12px; border: 1px solid var(--c-border); border-radius: 0; background: #fff; color: var(--c-dark); }
.xlml-home-ref__search input:focus-visible { outline: 2px solid var(--c-dark); outline-offset: 1px; }
.xlml-home-ref__scroll { background: #fff; border: 1px solid var(--c-border); }
.xlml-ref { width: 100%; border-collapse: collapse; font-size: var(--t-small); line-height: var(--lh-small); }
.xlml-ref th, .xlml-ref td { text-align: left; vertical-align: top; padding: 12px 16px; border-bottom: 1px solid var(--c-border); }
.xlml-ref thead th { font-size: var(--t-label); font-weight: 600; color: var(--n-800); background: #fff; border-bottom: 1px solid var(--c-dark); }
.xlml-ref tbody tr:last-child th, .xlml-ref tbody tr:last-child td { border-bottom: 0; }
.xlml-ref tbody th { font-weight: 600; }
.xlml-ref tbody th a { color: var(--c-dark); text-decoration: none; }
.xlml-ref tbody th a:hover { color: var(--c-link); text-decoration: underline; }
.xlml-ref td, .xlml-ref__cas { font-variant-numeric: tabular-nums; }
.xlml-ref__num { text-align: right; }
.xlml-ref .woocommerce-Price-amount { font-weight: 600; }
.xlml-ref__sort { appearance: none; background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.xlml-ref__sort::after { content: ""; display: inline-block; width: 0; height: 0; margin-left: 6px; vertical-align: middle; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid var(--n-400); }
.xlml-ref th[aria-sort="ascending"] .xlml-ref__sort::after { border-top: 0; border-bottom: 5px solid var(--c-dark); }
.xlml-ref th[aria-sort="descending"] .xlml-ref__sort::after { border-top: 5px solid var(--c-dark); }
.xlml-home-ref__empty { margin: 12px 0 0; color: var(--n-700); }
@media (max-width: 639px) {
	/* card-rows: name (bold link) with the price right-aligned on the same line,
	   then a two-column label / value grid for amount, form and storage; empty
	   values are omitted entirely. Padding 16px, rule between rows, 12px grid gap. */
	.xlml-home-ref__head { display: block; }
	.xlml-home-ref__head h2 { margin-bottom: 4px; }
	.xlml-home-ref__search { margin: 16px 0 0; min-width: 0; width: 100%; }
	.xlml-home-ref__scroll { border: 0; background: transparent; }
	.xlml-ref thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	/* 4c.2 sizes: title --t-h3, price --f-mono at --t-body, labels --t-small muted, values --t-body, one 10px row gap */
	.xlml-ref tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 10px; align-items: baseline; padding: 16px; border-top: 1px solid var(--c-border); }
	.xlml-ref tbody tr:first-child { border-top: 1px solid var(--c-dark); }
	.xlml-ref tbody tr:last-child { border-bottom: 1px solid var(--c-border); }
	.xlml-ref tbody th, .xlml-ref tbody td { display: block; padding: 0; border: 0; text-align: left; }
	.xlml-ref tbody th { grid-column: 1; grid-row: 1; font-size: var(--t-h3); line-height: var(--lh-h3); font-weight: 600; }
	.xlml-ref tbody td.xlml-ref__price { grid-column: 2; grid-row: 1; text-align: right; font-family: var(--f-mono); font-size: var(--t-body); font-weight: 600; }
	.xlml-ref tbody td.xlml-ref__price::before { content: none; }
	.xlml-ref tbody td:not(.xlml-ref__price) { grid-column: 1 / -1; display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 12px; margin: 0; font-size: var(--t-body); line-height: var(--lh-small); color: var(--c-dark); }
	.xlml-ref tbody td:not(.xlml-ref__price)::before { content: attr(data-label); font-size: var(--t-small); line-height: inherit; color: var(--n-700); }
	.xlml-ref tbody td.is-empty { display: none; }
	.xlml-ref.is-collapsed tbody tr:nth-child(n+7) { display: none; }
	.xlml-home-ref__more { margin-top: 16px; }
}
@media (min-width: 900px) { .xlml-ref th, .xlml-ref td { padding: 14px 16px; } }

/* -- How we handle material: ruled list, no cells ---------------- */
.xlml-home-handling { background: var(--c-off); padding-block: var(--sp-8); scroll-margin-top: 24px; }
.xlml-home-handling h2 { margin: 0 0 var(--sp-4); }
.xlml-home-handling__list { border-top: 1px solid var(--c-dark); }
.xlml-home-handling__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 32px; padding-block: 18px; border-bottom: 1px solid var(--c-border); }
.xlml-home-handling__row h3 { margin: 0; }
.xlml-home-handling__row p { margin: 0; color: var(--c-text-2); max-width: 70ch; }
.xlml-home-handling__link { margin: var(--sp-3) 0 0; font-size: var(--t-small); font-weight: 600; }
.xlml-home-handling__link a, .xlml-home-about__link a, .xlml-home-pay__link a { color: var(--c-link); text-decoration: none; }
.xlml-home-handling__link a:hover, .xlml-home-about__link a:hover, .xlml-home-pay__link a:hover { text-decoration: underline; }
@media (min-width: 900px) { .xlml-home-handling__row { grid-template-columns: 220px minmax(0, 1fr); padding-block: 22px; } }

/* -- About, short: reading column ------------------------------- */
.xlml-home-about { background: #fff; padding-block: var(--sp-8); }
.xlml-home-about h2 { margin: 0 0 var(--sp-3); }
.xlml-home-about p { color: var(--c-text-2); margin: 0 0 1em; }
.xlml-home-about__link { margin: var(--sp-2) 0 0; font-size: var(--t-small); font-weight: 600; }

/* -- Payment and shipping facts: two ruled columns, off background -- */
.xlml-home-pay { background: var(--c-off); padding-block: var(--sp-8); }
.xlml-home-pay__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-5); border-top: 1px solid var(--c-dark); }
.xlml-home-pay__col { padding-top: var(--sp-3); border-bottom: 1px solid var(--c-border); padding-bottom: var(--sp-4); }
.xlml-home-pay__col h3 { margin: 0 0 var(--sp-2); }
.xlml-home-pay__col p { margin: 0; color: var(--c-text-2); max-width: 60ch; }
.xlml-home-pay__chips { list-style: none; margin: 0 0 var(--sp-2); padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.xlml-home-pay__chips li { font-size: var(--t-small); font-weight: 600; color: var(--n-800); background: #fff; border: 1px solid var(--c-border); padding: 6px 12px; }
.xlml-home-pay__dl { margin: 0; }
.xlml-home-pay__dl > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 24px; padding-block: 10px; border-top: 1px solid var(--c-border); }
.xlml-home-pay__dl > div:first-child { border-top: 0; padding-top: 0; }
.xlml-home-pay__dl dt { font-size: var(--t-label); font-weight: 600; color: var(--n-800); }
.xlml-home-pay__dl dd { margin: 0; color: var(--c-text-2); font-size: var(--t-small); line-height: var(--lh-small); }
.xlml-home-pay__link { margin: var(--sp-3) 0 0; font-size: var(--t-small); font-weight: 600; }
@media (min-width: 640px) { .xlml-home-pay__dl > div { grid-template-columns: 200px minmax(0, 1fr); } }
@media (min-width: 900px) { .xlml-home-pay__cols { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--sp-8); } }

/* -- Phone width: task-sized spacing (Phase 4c height budget) ----- */
@media (max-width: 639px) {
	.xlml-home-hero { padding-block: var(--sp-5) var(--sp-6); }
	/* the panel stays stacked (full-width image) so the product image, not the h1, is the LCP element */
	.xlml-home-hero__title { margin-bottom: var(--sp-2); }
	.xlml-home-hero__lead { margin-bottom: var(--sp-3); }
	.xlml-home-grid, .xlml-home-ref, .xlml-home-handling, .xlml-home-about, .xlml-home-pay { padding-block: var(--sp-6); }
	.xlml-home-handling__row { padding-block: 14px; }
}
.xlml-home-ref__more { display: none; margin: 12px 0 0; }
.xlml-ref.is-collapsed ~ .xlml-home-ref__more, .xlml-home-ref__scroll:has(.xlml-ref.is-collapsed) + .xlml-home-ref__more { display: inline-flex; }
@media (min-width: 640px) { .xlml-home-ref__more { display: none !important; } }