/* L1 DRAFT checkout (owner 2026-10-28): Ledisa checkout layout in American BioLabs brand. Only
   presentation; every SDK binding is the regular checkout's. */
/* War Patches (owner 2026-10-29: "copy it one-to-one and just adjust the colors"): the ABL L1 checkout stylesheet
   (americanbiolabs-cpk draft/l1-round10) with only colours swapped: ink #171717 for navy, gold #FBDC30 / deep gold
   #A5830B for the blues, warm neutrals for the blue-greys. Sizes and spacing are ABL's, unchanged; the font is DM Sans as 'WP Sans' (abl-fonts.css), scaled to
   take the same space as ABL's fonts. */
.abl-checkout--l1 { --l1-navy:#171717; --l1-navy-2:#000; --l1-blue:#A5830B; --l1-blue-e:#FBDC30; --l1-blue-b:#FBDC30; --l1-blue-l:#faf6e1; --l1-green:#1A7F4E; --l1-gold:#E8A33D; }
.l1co-stars { display:inline-flex; gap:1px; vertical-align:-2px; }
.l1co-stars svg { width:13px; height:13px; fill:var(--l1-gold); }
.abl-checkout--l1 .abl-reserve,
.abl-checkout--l1 .abl-checkout-header .abl-trust-badge,
.abl-checkout--l1 .abl-checkout-cart-link,
.abl-checkout--l1 .abl-contact > .form-section__title,
.abl-checkout--l1 [data-next-component="shipping-form"] .form-section__title,
.abl-checkout--l1 .abl-payment-section > .form-section__title,
.abl-checkout--l1 .abl-payment-section > .abl-section-help { display:none !important; }

.l1co-reserve { margin:0; padding:8px 12px; background:var(--l1-navy); color:#fff; font-size:14px; text-align:center; }
.l1co-reserve strong { color:var(--l1-blue-b); font-variant-numeric:tabular-nums; }
.l1co-secure { display:flex; flex-direction:column; align-items:flex-end; gap:2px; margin:0 0 0 auto; font-size:12px; }
.l1co-secure span { display:inline-flex; align-items:center; gap:6px; color:var(--l1-navy); font-size:14px; font-weight:700; letter-spacing:.02em; }
.l1co-secure svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; }
.l1co-secure small { color:#6B6660; font-size:12px; }
.l1co-secure a { color:var(--l1-blue); text-decoration:none; }
.abl-checkout--l1 .abl-checkout-header > div { display:flex; align-items:center; }

.l1co-head { display:flex; align-items:center; gap:12px; margin:26px 0 12px; }
.l1co-head svg { flex:none; width:34px; height:34px; fill:none; stroke:var(--l1-navy); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.l1co-head h2 { margin:0; color:var(--l1-navy); font:700 22px/1.15 'WP Sans',sans-serif; }
.l1co-head p { margin:2px 0 0; color:#6B6660; font-size:13px; }
.l1co-happy { display:flex; align-items:center; justify-content:center; gap:8px; margin:0 0 12px; padding:8px 10px; border-radius:8px; background:#faf6e1; color:var(--l1-navy); font-size:13px; }
.l1co-faces { display:inline-flex; }
.l1co-faces img { width:22px; height:22px; margin-left:-6px; border:2px solid #fff; border-radius:50%; object-fit:cover; }
.l1co-vb svg { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.l1co-savings { display:flex; align-items:center; justify-content:center; gap:8px; margin:0 0 12px; padding:10px 12px; border:1px solid #efdc8f; border-radius:8px; background:var(--l1-blue-l); color:var(--l1-navy); font-size:15px; }
.l1co-savings[hidden] { display:none; }
.l1co-savings svg { width:18px; height:18px; fill:none; stroke:var(--l1-blue); stroke-width:1.8; }

/* Complete Order: navy (owner round 11: the colour was better), smaller, one guarantee line under the label. */
.abl-checkout--l1 .submit-button { min-height:0; padding:14px 16px 12px; border-radius:10px; background:var(--l1-navy) !important; box-shadow:0 6px 16px rgba(23,23,23,.22); }
.abl-checkout--l1 .submit-button:hover { background:var(--l1-navy-2) !important; }
.abl-checkout--l1 .submit-button__main-text { font:700 19px/1.15 'WP Sans',sans-serif; letter-spacing:.01em; }
.abl-checkout--l1 .submit-button__subtext { display:block; margin-top:3px; color:#fff; font-size:12.5px; font-weight:500; opacity:.9; }
.l1co-cards { display:flex; justify-content:center; flex-wrap:wrap; gap:10px; margin:16px 0 0; }
.l1co-cards img { width:44px; height:28px; object-fit:contain; }

.l1co-why { margin:30px 0 0; }
.l1co-why h2, .l1co-comments h2, .l1co-real h2, .l1co-faq h2 { margin:0 0 14px; color:var(--l1-navy); font:700 24px/1.2 'WP Sans',sans-serif; text-align:center; }
.l1co-why > div { display:flex; gap:14px; padding:14px 0; border-bottom:1px solid #E7E4DC; }
.l1co-why > div:last-child { border-bottom:0; }
.l1co-why-ico { flex:none; display:grid; place-items:center; width:58px; height:58px; }
.l1co-why-ico svg { width:46px; height:46px; fill:none; stroke:var(--l1-navy); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.l1co-shield { position:relative; }
.l1co-shield svg { width:52px; height:52px; fill:var(--l1-blue-l); stroke:var(--l1-blue-e); stroke-width:1.6; }
.l1co-shield b { position:absolute; inset:0; display:grid; place-items:center; padding-bottom:4px; color:var(--l1-navy); font:800 15px/1 'WP Sans',sans-serif; }
.l1co-why p { margin:0; color:#6B6660; font-size:15px; }
.l1co-why p strong { display:block; margin-bottom:3px; color:var(--l1-navy); font-size:17px; }

.l1co-comments { margin:30px 0 0; }
.l1co-comments h2 { display:flex; align-items:center; gap:12px; font-size:18px; }
.l1co-comments h2::before, .l1co-comments h2::after { content:""; flex:1; height:1px; background:#E7E4DC; }
.l1co-comment { display:flex; align-items:flex-start; gap:10px; margin:0 0 12px; }
.l1co-comment img { flex:none; width:36px; height:36px; border-radius:50%; object-fit:cover; }
.l1co-comment p { margin:0; padding:10px 13px; border-radius:16px; background:#f2f1ed; color:#1c1e21; font-size:14.5px; line-height:1.45; }
.l1co-comment .l1co-stars { display:flex; margin:2px 0 3px; }
.l1co-initials { flex:none; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:var(--l1-navy); color:#fff; font-size:12px; font-weight:700; letter-spacing:.03em; }
.l1co-comment strong { display:flex; align-items:center; gap:6px; font-size:12.5px; }
.l1co-vb { display:inline-flex; align-items:center; gap:3px; color:var(--l1-green); font-size:11px; font-weight:600; }
.l1co-desktop-only { display:none; }

.l1co-real { margin:34px 0 0; }
.l1co-real-grid { display:grid; gap:16px; }
.l1co-real article { overflow:hidden; border:1px solid #E7E4DC; border-radius:14px; background:#fff; box-shadow:0 6px 18px rgba(23,23,23,.06); }
/* Before/after pairs: every photo in the same 4:5 frame, so no single face dominates the grid. */
.l1co-ba { display:grid; grid-template-columns:1fr 1fr; gap:2px; background:#fff; }
.l1co-ba figure { position:relative; margin:0; }
.l1co-ba img { display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:center top; }
.l1co-ba--one { grid-template-columns:1fr; }
.l1co-ba--one img { aspect-ratio:8/5; }
.l1co-ba figcaption { position:absolute; right:8px; bottom:8px; padding:3px 8px; border-radius:6px; background:var(--l1-blue-e); color:var(--l1-navy); font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.l1co-ba figure:first-child:not(:only-child) figcaption, .l1co-ba .l1co-ba-l { right:auto; left:8px; background:rgba(23,23,23,.75); color:#fff; }
.l1co-real article > div:last-child { padding:14px 16px 16px; }
.l1co-real article strong { display:block; color:var(--l1-navy); }
.l1co-real article h3 { margin:6px 0 4px; color:var(--l1-navy); font:700 18px/1.25 'WP Sans',sans-serif; }
.l1co-real article p { margin:0; color:#2B2A27; font-size:15px; }

.l1co-faq { margin:34px 0 10px; }
/* FAQ: the landing page's card dropdowns (abl-l1.css), opening without animation. */
.l1co-faq details { margin-bottom:10px; border:1px solid #E4E1DA; border-radius:12px; background:#fff; }
.l1co-faq details[open] { border-color:#cfcabf; }
.l1co-faq summary { display:flex; justify-content:space-between; align-items:center; gap:14px; padding:15px 16px; color:var(--l1-navy); font-size:16px; font-weight:600; line-height:1.35; list-style:none; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent; }
.l1co-faq summary::-webkit-details-marker { display:none; }
.l1co-faq summary::after { content:""; flex:none; width:8px; height:8px; margin-top:-4px; border-right:2px solid var(--l1-navy); border-bottom:2px solid var(--l1-navy); transform:rotate(45deg); }
.l1co-faq details[open] summary::after { margin-top:4px; transform:rotate(225deg); }
.l1co-faq p { margin:-4px 0 0; padding:0 16px 16px; color:#2B2A27; font-size:15px; line-height:1.6; }
.l1co-order-now { display:block; margin:22px 0 0; padding:16px; border-radius:10px; background:var(--l1-navy); color:#fff !important; font:700 18px/1 'WP Sans',sans-serif; text-align:center; text-decoration:none; }
.abl-checkout--l1 .abl-checkout-footer { flex-wrap:wrap; }
.l1co-legal { flex-basis:100%; margin:14px 0 0; color:#6B6660; font-size:11.5px; line-height:1.6; }

/* Ledisa's "Recurring subtotal" row under the total. */
.l1co-recurring { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-top:12px; padding-top:12px; border-top:1px solid #E7E4DC; color:#6B6660; font-size:13px; line-height:20px; }
.l1co-recurring[hidden] { display:none; }
.l1co-recurring > span:first-child { display:flex; flex-direction:column; }
.l1co-recurring small { font-size:11.5px; line-height:17px; }
.l1co-recurring [data-l1co-recurring-value] { text-align:right; }
.l1co-recurring-label { display:inline-flex; align-items:center; gap:4px; }
/* "?" drawn like the Shipping row's help icon; a tap (or hover) shows the note, a second tap hides it. */
.l1co-tip { position:relative; display:inline-flex; align-items:center; justify-content:center; width:24px; height:24px; padding:0; border:0; border-radius:50%; background:none; color:#6B6660; font-size:11px; font-weight:600; cursor:pointer; }
.l1co-tip::before { content:''; position:absolute; width:13px; height:13px; border:1px solid currentColor; border-radius:50%; }
.l1co-tip b { position:relative; font-weight:600; }
.l1co-tip span { position:absolute; bottom:calc(100% + 4px); left:-8px; z-index:5; display:none; width:220px; padding:8px 10px; border-radius:8px; background:var(--l1-navy); color:#fff; font-size:12px; font-weight:400; line-height:1.4; text-align:left; }
.l1co-tip[aria-expanded="true"] span { display:block; }
@media (hover:hover) { .l1co-tip:hover span { display:block; } }

@media (min-width:1000px) {
  .l1co-desktop-only { display:block; }
  .l1co-mobile-only { display:none; }
  .l1co-real-grid { grid-template-columns:repeat(2,1fr); }
}

/* Express box like Ledisa: bordered box, "Express Checkout" on the top edge, "Or" on the bottom edge,
   then a link down to the card form (owner 2026-10-28). */
.abl-checkout--l1 .exp-checkout { position:relative; margin:22px 0 0; padding:22px 16px 20px; border:1.5px solid #DDD9CF; border-radius:14px; }
.abl-checkout--l1 .exp-checkout .express-checkout__title { position:absolute; top:-11px; left:50%; margin:0; padding:0 12px; background:#fff; color:var(--l1-navy); font-size:15px; line-height:20px; white-space:nowrap; transform:translateX(-50%); }
.abl-checkout--l1 .exp-checkout .divider-section { position:absolute; bottom:-11px; left:50%; display:block; margin:0; padding:0 12px; background:#fff; transform:translateX(-50%); }
.abl-checkout--l1 .exp-checkout .divider-section__line-v2 { display:none; }
.abl-checkout--l1 .exp-checkout .divider-section__text-v2 { color:var(--l1-navy); font-size:15px; line-height:20px; text-transform:lowercase; }
.abl-checkout--l1 .exp-checkout .divider-section__text-v2::first-letter { text-transform:uppercase; }
.abl-checkout--l1 .exp-checkout .abl-pay-logos { display:none; }
.l1co-continue { display:block; margin:18px 0 4px; color:var(--l1-navy); font-size:15px; text-align:center; text-decoration:none; }
.l1co-continue:hover { text-decoration:underline; }
.abl-checkout--l1 .exp-checkout[hidden] + .l1co-continue, .abl-checkout--l1 .exp-checkout[style*="none"] + .l1co-continue { display:none; }
#l1co-customer { scroll-margin-top:16px; }
.l1co-desktop-inline { display:none; }
@media (min-width:1000px) { .l1co-desktop-inline { display:inline; } }
/* Ledisa shows free shipping as the green banner only; no separate shipping-method box. */
.abl-checkout--l1 .abl-shipping-section { display:none !important; }

/* Round 5 (owner 2026-10-28: "checkout looks poorly done", "too tight and narrow on mobile"). */
/* Phones: Ledisa's slim side margins, and the card fields use the full box width. */
@media (max-width:999px) {
  .abl-checkout--l1 .abl-checkout-main { padding:16px 10px 36px; }
  .abl-checkout--l1 .abl-checkout-summary-panel > summary { padding:16px 12px; }
  .abl-checkout--l1 .abl-checkout-summary-content { padding:0 12px 20px; }
  .abl-checkout--l1 .abl-checkout-header > div { padding:14px 12px; }
  .abl-checkout--l1 .payment-method__form { padding:12px 10px; }
  .abl-checkout--l1 .exp-checkout { padding:22px 12px 20px; }
  .l1co-head { gap:10px; margin:24px 0 12px; }
  .l1co-head svg { width:30px; height:30px; }
}
/* Desktop like Ledisa: white page, a wider form column, the summary in a bordered card, reviews four across. */
@media (min-width:1000px) {
  .abl-checkout.abl-checkout--l1 { background:#fff; }
  .abl-checkout--l1 .abl-checkout-header > div { max-width:1180px; padding:18px 32px; }
  .abl-checkout--l1 .abl-checkout-grid { grid-template-columns:minmax(0,620px) minmax(0,460px); justify-content:center; gap:56px; max-width:1180px; padding:0 32px; }
  .abl-checkout--l1 .abl-checkout-main { padding:32px 0 48px; }
  .abl-checkout--l1 .abl-checkout-side { padding:32px 0 48px; border-left:0; background:none; }
  .abl-checkout--l1 .abl-checkout-side-inner { top:24px; }
  .abl-checkout--l1 .abl-checkout-summary-panel { padding:20px 22px; border:1px solid #E7E4DC; border-radius:14px; background:#fff; box-shadow:0 6px 18px rgba(23,23,23,.06); }
  .abl-checkout--l1 .abl-checkout-summary-panel > summary { display:block; margin:0 0 14px; padding:0 0 12px; border-bottom:1px solid #E7E4DC; color:var(--l1-navy); font-size:17px; font-weight:600; list-style:none; pointer-events:none; }
  .abl-checkout--l1 .abl-checkout-summary-panel > summary::-webkit-details-marker { display:none; }
  .abl-checkout--l1 .abl-checkout-summary-panel > summary svg, .abl-checkout--l1 .abl-checkout-summary-panel > summary > strong { display:none; }
  .l1co-comments.l1co-desktop-only { margin-top:28px; }
}

/* Motion (round 13): short, transform/opacity only, off for Reduce Motion. */
.l1co-faq summary::after { transition:transform .2s ease, margin-top .2s ease; }
.l1co-faq details[open] > p { animation:l1co-in .2s ease-out; }
.abl-checkout--l1 .submit-button, .l1co-order-now { transition:transform .12s ease, background-color .15s ease; }
.abl-checkout--l1 .submit-button:active, .l1co-order-now:active { transform:scale(.985); }
@keyframes l1co-in { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce) { .abl-checkout--l1 *, .abl-checkout--l1 *::after { animation:none !important; transition:none !important; } }

/* No double-tap zoom on iPhone (ABL 2026-10-29): iOS Safari honours touch-action only on the tapped element. */
html, body, body * { touch-action:manipulation; }

/* Loading screen (ABL 2026-10-29): the logo in faint grey, filling up left to right with a slightly darker copy. */
.l1co-loader { position:fixed; inset:0; z-index:10001; display:flex; align-items:center; justify-content:center; background:#f7f6f3; transition:opacity .3s ease, visibility .3s ease; }
.l1co-loader.is-hidden { opacity:0; visibility:hidden; }
.l1co-loader-logo { position:relative; width:min(200px,55vw); }
.l1co-loader-logo img { display:block; width:100%; height:auto; filter:grayscale(1) opacity(.1); }
.l1co-loader-logo .l1co-loader-fill { position:absolute; inset:0; filter:grayscale(1) opacity(.26); clip-path:inset(0 100% 0 0); animation:l1co-fill 1.6s cubic-bezier(.65,0,.35,1) infinite; }
@keyframes l1co-fill { 0% { clip-path:inset(0 100% 0 0); } 75%, 100% { clip-path:inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .l1co-loader-logo .l1co-loader-fill { animation:none; clip-path:inset(0 0 0 0); } }