/* AtlasLaunch Theme components. Every class starts with atl-; values come from tokens.css (theme.json presets). */

.atl-wrap { max-width: 1200px; margin-inline: auto; padding-inline: 20px; }
.atl-eyebrow { font: 600 13px/16px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--brand-ink); }
.atl-lead { font-size: 19px; line-height: 30px; color: var(--text); }
.atl-muted { color: var(--muted); }
.atl-mono { font-family: var(--font-mono); font-size: 13px; line-height: 20px; font-weight: 500; }
.atl-icon { width: 20px; height: 20px; flex: none; }

/* Button */
.atl-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: 0 22px; border-radius: var(--radius-md); border: 1.5px solid transparent; font: 600 16px/1 var(--font-body); text-decoration: none; cursor: pointer; transition: background .12s ease-out, border-color .12s ease-out, transform .12s ease-out; white-space: nowrap; }
.atl-btn--primary { background: var(--brand); color: var(--on-brand); }
.atl-btn--primary:hover { background: var(--brand-ink); color: var(--on-brand); }
.atl-btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--line-strong); }
.atl-btn--secondary:hover { border-color: var(--brand); color: var(--brand-ink); }
.atl-btn--ghost { background: transparent; color: var(--ink); padding: 0 12px; }
.atl-btn--ghost:hover { color: var(--brand-ink); background: var(--surface-sunken); }
.atl-btn--sm { min-height: 40px; padding: 0 16px; font-size: 15px; }
.atl-btn[aria-disabled="true"] { background: var(--surface-sunken); color: var(--muted); border: 1.5px dashed var(--line-strong); cursor: not-allowed; }
.atl-btn svg { width: 18px; height: 18px; }

/* Badge and status chip */
.atl-badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 4px 10px; border-radius: var(--radius-full); font: 600 13px/18px var(--font-body); background: var(--brand-soft); color: var(--brand-ink); }
.atl-badge--pro { background: var(--navy); color: #f3d27a; }
.atl-badge--new { background: var(--success-soft); color: var(--success); }
.atl-badge--soon { background: var(--warning-soft); color: var(--warning); }
.atl-badge--outline { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-strong); }
.atl-dot { width: 8px; height: 8px; border-radius: var(--radius-full); background: currentColor; flex: none; }

.atl-tile { width: 44px; height: 44px; border-radius: var(--radius-md); display: grid; place-items: center; background: color-mix(in srgb, var(--p, var(--brand)) 14%, var(--surface)); color: var(--p, var(--brand)); flex: none; }
.atl-type { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: var(--radius-full); border: 1px solid var(--line); background: var(--surface); color: var(--muted); font: 600 12px/1 var(--font-body); white-space: nowrap; }
.atl-tile svg { width: 22px; height: 22px; }

/* Card */
.atl-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); transition: transform .2s ease-out, box-shadow .2s ease-out, border-color .2s ease-out; }
.atl-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-raised); border-color: color-mix(in srgb, var(--p, var(--brand)) 40%, var(--line)); }
.atl-card h3 { font-size: 20px; line-height: 26px; }
.atl-card p { font-size: 15px; line-height: 24px; color: var(--muted); }
.atl-card__foot { margin-top: auto; padding-top: var(--space-3); border-top: 1px solid var(--line); font: 600 14px/20px var(--font-body); color: var(--ink); display: flex; align-items: center; gap: var(--space-2); }
.atl-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* Section heading */
.atl-sec { padding-block: var(--space-9); }
.atl-sechead { display: flex; flex-direction: column; gap: 14px; max-width: 680px; margin-bottom: var(--space-7); }
.atl-sechead--center { margin-inline: auto; text-align: center; align-items: center; }
.atl-sechead h2 { font-size: clamp(30px, 4vw, 42px); line-height: 1.12; letter-spacing: -.02em; }

/* Announcement bar */
.atl-announce { background: var(--navy); color: var(--on-navy); font-size: 14px; line-height: 20px; }
.atl-announce__in { display: flex; align-items: center; justify-content: center; gap: 8px 16px; flex-wrap: wrap; min-height: 44px; padding: 8px 56px 8px 20px; position: relative; text-align: center; }
.atl-announce code { font-family: var(--font-mono); font-size: 12px; padding: 3px 8px; border-radius: 6px; border: 1px dashed rgba(255,255,255,.5); background: rgba(255,255,255,.12); }
.atl-announce a { color: #fff; font-weight: 600; text-underline-offset: 3px; }
.atl-announce__x { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; border-radius: 8px; background: transparent; color: #b4c0d3; font-size: 20px; cursor: pointer; }

/* Header and mega menu */
.atl-header { background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line); position: relative; }
.atl-header__in { display: flex; align-items: center; gap: 24px; min-height: 72px; }
.atl-logo { display: flex; align-items: center; gap: 10px; font: 800 20px/1 var(--font-display); color: var(--ink); text-decoration: none; letter-spacing: -.02em; }
.atl-logo__mark { width: 34px; height: 34px; border-radius: 10px; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; font-size: 17px; }
.atl-logo b { color: var(--brand-ink); }
.atl-nav { display: flex; gap: 4px; }
.atl-nav a, .atl-nav button { font: 600 15px/1 var(--font-body); color: var(--text); text-decoration: none; padding: 12px 14px; border-radius: 10px; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.atl-nav a:hover, .atl-nav button:hover, .atl-nav [aria-expanded="true"] { background: var(--surface-sunken); color: var(--ink); }
.atl-header__tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.atl-iconbtn { width: 42px; height: 42px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.atl-kbd { font: 600 12px/1 var(--font-mono); padding: 3px 6px; border-radius: 6px; border: 1px solid var(--line); color: var(--muted); }
.atl-search { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--bg); color: var(--muted); font-size: 15px; min-width: 220px; }
.atl-mega { position: absolute; left: 0; right: 0; top: 100%; padding-top: 8px; z-index: 5; }
.atl-mega__card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-raised); display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 8px; padding: 12px; }
.atl-mega h5 { margin: 6px 12px 8px; font: 600 12px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.atl-mega__item { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; text-decoration: none; color: var(--text); }
.atl-mega__item:hover { background: var(--surface-sunken); }
.atl-mega__item strong { display: block; color: var(--ink); font-size: 15px; line-height: 20px; }
.atl-mega__item span span { font-size: 14px; line-height: 20px; color: var(--muted); }
.atl-mega__links a { display: block; padding: 8px 12px; border-radius: 10px; color: var(--text); text-decoration: none; font-size: 15px; }
.atl-mega__links a:hover { background: var(--surface-sunken); color: var(--brand-ink); }
.atl-mega__feature { border-radius: 16px; background: var(--navy); color: var(--on-navy); padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.atl-mega__feature h6 { margin: 0; font: 700 18px/1.3 var(--font-display); }
.atl-mega__feature a { color: #fff; font-weight: 600; margin-top: auto; }

/* Hero */
.atl-hero { position: relative; overflow: hidden; isolation: isolate; padding-block: 88px 104px; }
.atl-hero::before { content: ""; position: absolute; inset: -30% -20% auto auto; width: 70%; height: 140%; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 24%, transparent), transparent 70%); z-index: -1; }
.atl-hero::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(color-mix(in srgb, var(--brand) 22%, transparent) 1px, transparent 1.3px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse 55% 70% at 75% 40%, #000, transparent 75%); mask-image: radial-gradient(ellipse 55% 70% at 75% 40%, #000, transparent 75%); z-index: -1; }
.atl-hero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.atl-hero h1 { font-size: clamp(40px, 5.4vw, 64px); line-height: 1.04; letter-spacing: -.035em; font-weight: 800; }
.atl-hero h1 em { font-style: normal; color: var(--brand-ink); background: linear-gradient(transparent 70%, color-mix(in srgb, var(--accent) 45%, transparent) 70%); }
.atl-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.atl-proof { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 15px; color: var(--muted); }
.atl-proof strong { color: var(--ink); }
.atl-stars { color: var(--star); letter-spacing: 2px; }

/* Stats band */
.atl-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-card); }
.atl-stat { background: var(--surface); padding: 24px; display: flex; flex-direction: column; gap: 4px; }
.atl-stat strong { font: 800 36px/1 var(--font-display); color: var(--ink); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.atl-stat span { font-weight: 700; color: var(--ink); font-size: 15px; }
.atl-stat small { font-size: 13px; line-height: 18px; color: var(--muted); }

/* Pricing */
.atl-billing { display: inline-flex; padding: 4px; border-radius: var(--radius-full); border: 1px solid var(--line); background: var(--surface); }
.atl-billing button { min-height: 40px; padding: 0 18px; border-radius: var(--radius-full); border: 0; background: transparent; color: var(--muted); font: 600 14px/1 var(--font-body); cursor: pointer; }
.atl-billing [aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.atl-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; align-items: stretch; }
.atl-plan { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 28px; display: flex; flex-direction: column; gap: 14px; position: relative; }
.atl-plan--featured { border: 2px solid var(--brand); box-shadow: var(--shadow-raised); }
.atl-plan__ribbon { position: absolute; top: -13px; left: 28px; }
.atl-plan__price { font: 800 44px/1 var(--font-display); color: var(--ink); letter-spacing: -.03em; }
.atl-plan__price small { font: 500 15px/1 var(--font-body); color: var(--muted); letter-spacing: 0; }
.atl-plan ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.atl-plan li { display: flex; gap: 10px; }
.atl-plan li::before { content: "✓"; color: var(--success); font-weight: 700; }
.atl-plan .atl-btn { margin-top: auto; }

/* FAQ */
.atl-faq { display: flex; flex-direction: column; gap: 12px; }
.atl-faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.atl-faq details[open] { border-color: color-mix(in srgb, var(--brand) 40%, var(--line)); box-shadow: var(--shadow-card); }
.atl-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; font: 700 17px/1.4 var(--font-display); color: var(--ink); }
.atl-faq summary::-webkit-details-marker { display: none; }
.atl-faq summary::after { content: "+"; width: 30px; height: 30px; flex: none; border-radius: var(--radius-full); background: var(--brand-soft); color: var(--brand-ink); display: grid; place-items: center; font: 600 22px/1 var(--font-body); transition: transform .2s; }
.atl-faq details[open] summary::after { transform: rotate(45deg); }
.atl-faq details p { padding: 0 22px 20px; font-size: 16px; line-height: 26px; }

/* Code with language tabs */
.atl-code { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); background: #0b1220; color: #e2e8f0; }
.atl-code__tabs { display: flex; gap: 2px; padding: 6px; background: #111a2e; border-bottom: 1px solid #1f2b45; }
.atl-code__tabs button { border: 0; background: transparent; color: #a9b6cc; font: 600 13px/1 var(--font-body); padding: 8px 12px; border-radius: 8px; cursor: pointer; }
.atl-code__tabs [aria-selected="true"] { background: #1f2b45; color: #fff; }
.atl-code__copy { margin-left: auto; }
.atl-code pre { margin: 0; padding: 16px 18px; font: 500 13px/20px var(--font-mono); overflow-x: auto; }
.atl-code .k { color: #7fb2ff; } .atl-code .s { color: #ffb27f; } .atl-code .c { color: #8a96a8; }

/* Tabs (product tour) */
.atl-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.atl-tab { display: flex; flex-direction: column; gap: 8px; min-width: 150px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); font: 600 14px/1.2 var(--font-body); color: var(--muted); cursor: pointer; text-align: left; }
.atl-tab[aria-selected="true"] { color: var(--ink); border-color: color-mix(in srgb, var(--p, var(--brand)) 55%, var(--line)); }
.atl-tab__bar { display: block; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.atl-tab[aria-selected="true"] .atl-tab__bar::after { content: ""; display: block; height: 100%; width: 60%; background: var(--p, var(--brand)); }
.atl-tab__dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--p, var(--brand)); margin-right: 6px; }

/* CTA band */
.atl-cta { position: relative; overflow: hidden; isolation: isolate; border: 1px solid var(--line); border-radius: var(--radius-2xl); background: linear-gradient(135deg, var(--surface-sunken), var(--surface) 60%); padding: 64px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; box-shadow: var(--shadow-card); }
.atl-cta h2 { font-size: clamp(30px, 4vw, 44px); line-height: 1.1; letter-spacing: -.02em; }
.atl-cta p { margin-top: 14px; color: var(--muted); font-size: 18px; }
.atl-cta__side { display: flex; flex-direction: column; gap: 12px; }

/* Footer */
.atl-footer { border-top: 1px solid var(--line); background: var(--surface); padding-block: 64px 28px; }
.atl-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1.4fr; gap: 40px; }
.atl-footer h4 { font: 700 13px/1 var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.atl-footer ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.atl-footer ul a { color: var(--text); text-decoration: none; font-size: 15px; }
.atl-footer ul a:hover { color: var(--brand-ink); }
.atl-footer__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }
.atl-input { height: 48px; border-radius: var(--radius-md); border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink); padding: 0 14px; font: 500 15px var(--font-body); min-width: 0; }

/* Site assistant (search and chat) */
.atl-assist { width: 380px; max-width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-raised); display: flex; flex-direction: column; overflow: hidden; }
.atl-assist__head { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.atl-assist__head strong { color: var(--ink); font: 700 16px/1.2 var(--font-display); }
.atl-assist__head small { display: block; color: var(--muted); font-size: 13px; line-height: 18px; }
.atl-assist__body { padding: 16px; display: flex; flex-direction: column; gap: 12px; background: var(--bg); }
.atl-msg { max-width: 88%; padding: 10px 14px; border-radius: 14px; font-size: 15px; line-height: 22px; }
.atl-msg--me { align-self: flex-end; background: var(--brand); color: var(--on-brand); border-bottom-right-radius: 4px; }
.atl-msg--bot { align-self: flex-start; background: var(--surface); color: var(--text); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.atl-msg--bot a { display: block; margin-top: 6px; font-weight: 600; }
.atl-assist__src { display: flex; gap: 6px; flex-wrap: wrap; }
.atl-assist__foot { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); align-items: center; }
.atl-assist__foot .atl-input { flex: 1; height: 44px; }
.atl-mic { width: 44px; height: 44px; border-radius: var(--radius-full); border: 0; background: var(--brand-soft); color: var(--brand-ink); display: grid; place-items: center; cursor: pointer; }
.atl-mic[aria-pressed="true"] { background: var(--danger); color: #fff; }
.atl-assist__note { padding: 0 16px 12px; font-size: 12px; line-height: 17px; color: var(--muted); }
.atl-launcher { display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 20px 0 16px; border-radius: var(--radius-full); border: 0; background: var(--ink); color: var(--surface); font: 600 15px/1 var(--font-body); box-shadow: var(--shadow-raised); cursor: pointer; }

@media (max-width: 860px) {
  .atl-hero__grid, .atl-cta { grid-template-columns: 1fr; }
  .atl-stats { grid-template-columns: repeat(2, 1fr); }
  .atl-footer__grid { grid-template-columns: 1fr 1fr; }
  .atl-mega__card { grid-template-columns: 1fr; }
  .atl-nav, .atl-search { display: none; }
}

/* ---------- Accessibility ---------- */
.atl-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.atl-skip { position: absolute; left: 16px; top: -100px; z-index: 1000; padding: 12px 18px; border-radius: var(--radius-md); background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-raised); }
.atl-skip:focus { top: 12px; }
/* Windows High Contrast / forced colours */
@media (forced-colors: active) {
  .atl-btn, .atl-card, .atl-plan, .atl-badge, .atl-tab, .atl-input, .atl-assist { border: 1px solid CanvasText; }
  .atl-btn--primary { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .atl-tab[aria-selected="true"] .atl-tab__bar { background: Highlight; }
}

/* Site search (header "/" panel, page search field, voice) */
.atl-sfield { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 8px 0 16px; border-radius: var(--radius-lg); border: 1px solid var(--line-strong); background: var(--surface); box-shadow: var(--shadow-card); }
.atl-sfield:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent); }
.atl-sfield svg { width: 22px; height: 22px; color: var(--muted); flex: none; }
.atl-sfield input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: 400 17px/1 var(--font-body); color: var(--ink); height: 100%; }
.atl-sfield input::placeholder { color: var(--muted); }
.atl-sfield .atl-kbd { flex: none; }
.atl-sfield__clear { border: 0; background: none; color: var(--muted); font-size: 20px; width: 36px; height: 36px; border-radius: var(--radius-sm); cursor: pointer; }
.atl-sfield--sm { height: 44px; }
.atl-sfield--sm input { font-size: 15px; }
.atl-mic { flex: none; }
.atl-mic[aria-pressed="true"] { background: var(--danger); color: #fff; box-shadow: 0 0 0 6px color-mix(in srgb, var(--danger) 18%, transparent); }
.atl-spanel { width: min(680px, 100%); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-xl); box-shadow: var(--shadow-raised); overflow: hidden; }
.atl-spanel .atl-sfield { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; box-shadow: none; }
.atl-spanel__filters { display: flex; gap: 6px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--line); }
.atl-spanel__filters button[aria-pressed="true"] { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.atl-spanel__list { max-height: 360px; overflow: auto; padding: 6px 0; margin: 0; list-style: none; }
.atl-spanel__group { padding: 10px 16px 4px; font: 600 12px/16px var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.atl-sres { display: flex; align-items: center; gap: 12px; padding: 10px 16px; cursor: pointer; color: var(--ink); }
.atl-sres[aria-selected="true"], .atl-sres:hover { background: var(--surface-sunken); box-shadow: inset 3px 0 0 var(--brand); }
.atl-sres .atl-tile { width: 36px; height: 36px; }
.atl-sres__text { flex: 1; min-width: 0; }
.atl-sres__text b { display: block; font: 600 15px/20px var(--font-body); }
.atl-sres__text span { display: block; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atl-sres mark { background: color-mix(in srgb, var(--brand) 18%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.atl-sres--ask { border-top: 1px solid var(--line); margin-top: 6px; }
.atl-spanel__foot { display: flex; gap: 16px; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.atl-spanel__empty { padding: 28px 16px; text-align: center; color: var(--muted); }
.atl-spanel__empty b { display: block; color: var(--ink); font-size: 16px; margin-bottom: 4px; }
.atl-listening { display: flex; align-items: center; gap: 12px; padding: 18px 16px; color: var(--ink); }
.atl-listening__bars { display: flex; gap: 3px; align-items: center; height: 24px; }
.atl-listening__bars i { width: 4px; border-radius: 2px; background: var(--danger); animation: atl-eq 1s ease-in-out infinite; }
.atl-listening__bars i:nth-child(2) { animation-delay: .15s; } .atl-listening__bars i:nth-child(3) { animation-delay: .3s; } .atl-listening__bars i:nth-child(4) { animation-delay: .45s; }
@keyframes atl-eq { 0%, 100% { height: 6px; } 50% { height: 22px; } }
@media (prefers-reduced-motion: reduce) { .atl-listening__bars i { animation: none; height: 14px; } }
@media (forced-colors: active) { .atl-sres[aria-selected="true"] { outline: 2px solid Highlight; } }

/* ---------- Site header on small screens ----------
   One line: logo and title (cut with an ellipsis), the menu button, the shop icons and search.
   The header button is compact under 600px and hidden under 480px (the menu still has every link). */
.atl-sticky-header .alignwide { gap: 12px 16px; }
.atl-sticky-header .alignwide > .wp-block-group:first-child { min-width: 0; flex: 0 1 auto; }
.atl-sticky-header .alignwide > :not(:first-child) { flex-shrink: 0; }
.atl-sticky-header .wp-block-site-title { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.atl-sticky-header .wp-block-search { flex: none; }
.atl-sticky-header .wp-block-button__link { white-space: nowrap; }
@media (max-width: 781px) {
  .atl-sticky-header .wp-block-site-title { font-size: 1.0625rem; }
  .atl-sticky-header .wp-block-site-logo img { width: 30px; height: auto; }
}
@media (max-width: 599px) {
  .atl-sticky-header { padding-top: 10px !important; padding-bottom: 10px !important; }
  .atl-sticky-header .alignwide { gap: 8px; }
  .atl-sticky-header .alignwide > .wp-block-group:last-child { gap: 6px; }
  .atl-sticky-header .wp-block-buttons .wp-block-button__link { padding: 9px 12px !important; }
  .wp-block-navigation__responsive-container-open { min-width: 40px; min-height: 40px; justify-content: center; align-items: center; }
}
@media (max-width: 479px) {
  .atl-sticky-header .wp-block-buttons { display: none; }
}

/* ---------- Footer ---------- */
footer.wp-block-template-part :is(ul.wp-block-list, ul.wp-block-page-list, .wp-block-navigation ul) { list-style: none; padding-left: 0; }
footer.wp-block-template-part ul.wp-block-list { display: flex; flex-direction: column; gap: var(--space-2); }
footer.wp-block-template-part ul.wp-block-list > li { margin: 0; }
/* Link lists in the footer read as navigation: underline on hover and focus only. Links in text keep theirs. */
footer.wp-block-template-part li a { text-decoration: none; }
footer.wp-block-template-part li a:is(:hover, :focus-visible) { text-decoration: underline; text-underline-offset: 3px; }
footer.wp-block-template-part li a, .atl-footer-nav .wp-block-navigation-item__content { display: inline-block; padding-block: 2px; min-height: 24px; }
/* Room at the bottom right for a floating chat or cookie button, so it never covers the last line. */
.atl-footer-credit { padding-bottom: max(56px, env(safe-area-inset-bottom, 0px)); }

/* ---------- Headings and reading width in content ---------- */
/* Section headings of the theme's patterns (a centred h2 in a full-width group) stay large; h2 in text is smaller. */
.wp-block-group.alignfull :where(h2.wp-block-heading.has-text-align-center):not([class*="-font-size"]) { font-size: var(--wp--preset--font-size--xx-large); line-height: 1.12; }
/* More space above a heading than below it, so it belongs to the text it introduces. */
:is(.wp-block-post-content, .entry-content) > :is(h2, h3) { margin-block-start: 1.6em; }
:is(.wp-block-post-content, .entry-content) > h4 { margin-block-start: 1.4em; }
:is(.wp-block-post-content, .entry-content) > :is(h2, h3, h4) + * { margin-block-start: var(--space-3); }
:is(.wp-block-post-content, .entry-content) > :first-child { margin-block-start: 0; }

/* ---------- Post cards (blog, archive, search) ----------
   Same height in a row, with or without a featured image; the date (or a product's price) sits at the bottom. */
.wp-block-post-template.is-layout-grid > li { display: flex; }
.wp-block-post-template > li > .atl-card { flex: 1; overflow: hidden; }
.atl-card > .wp-block-group:last-child { flex: 1; display: flex; flex-direction: column; }
.atl-card > .wp-block-group:last-child > .wp-block-post-excerpt .wp-block-post-excerpt__excerpt { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.atl-card > .wp-block-group:last-child > :is(.wp-block-post-date, .atl-card-price):last-child { margin-top: auto; padding-top: var(--space-2); }
/* Cards saved before this version had no top padding on the text: give it one when there is no picture. */
.atl-card:not(.atl-post-card):not(:has(> .wp-block-post-featured-image)) > .wp-block-group:first-child { padding-top: var(--space-5); }
.atl-post-card .wp-block-post-featured-image { margin: 0; }
.atl-post-card .wp-block-post-featured-image img { border-radius: 0; }
.atl-post-card .wp-block-post-title a:is(:hover, :focus-visible) { text-decoration: underline; }
/* Products in mixed results: a square picture and the price instead of a date. */
.wp-block-post-template > li.type-product .wp-block-post-featured-image img { aspect-ratio: 1 / 1 !important; object-fit: cover; }
.atl-card-price { font: 700 17px/1.3 var(--font-body); color: var(--ink); }
.atl-card-price del { color: var(--muted); font-weight: 400; margin-right: 6px; }
.atl-card-price ins { text-decoration: none; }

/* ---------- Post featured image: natural shape, never stretched or blown up ---------- */
.wp-block-post-featured-image.atl-post-hero img { display: block; width: auto; height: auto; max-width: 100%; max-height: min(75vh, 720px); margin-inline: auto; object-fit: contain; border-radius: var(--radius-xl); }

/* ---------- Pagination: targets of at least 40px (WCAG 2.5.8 asks for 24px) ---------- */
:is(.wp-block-query-pagination, .wp-block-comments-pagination) { gap: var(--space-2); flex-wrap: wrap; }
:is(.wp-block-query-pagination-numbers, .wp-block-comments-pagination-numbers) { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); }
:is(.wp-block-query-pagination, .wp-block-comments-pagination, .woocommerce-pagination) :is(a, .page-numbers),
.wc-block-components-pagination__page { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-sm); }
:is(.wp-block-query-pagination, .wp-block-comments-pagination, .woocommerce-pagination) .page-numbers.current,
.wc-block-components-pagination__page--active { background: var(--ink); color: var(--surface); font-weight: 700; }
:is(.wp-block-query-pagination, .wp-block-comments-pagination) a:hover { background: var(--surface-sunken); }

/* ---------- WooCommerce ----------
   Works with the block templates WooCommerce brings for block themes (no theme templates needed) and with
   the classic shortcodes. Colours come from the tokens, so style variations and dark mode follow. */

/* Product pictures in lists: one square shape, unless the block was given its own aspect ratio. */
.wc-block-components-product-image--aspect-ratio-auto img,
.wc-block-grid__product-image img,
.woocommerce ul.products li.product a img,
.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img { aspect-ratio: 1 / 1; width: 100%; height: auto; object-fit: cover; }
.wc-block-components-product-image img, .woocommerce ul.products li.product a img { border-radius: var(--radius-lg); }

/* Cards: the add-to-cart button lines up at the bottom of every card in a row. */
.wc-block-product-template > li.wc-block-product,
.wc-block-grid__product,
.woocommerce ul.products li.product { display: flex; flex-direction: column; }
.wc-block-product > :is(.wp-block-woocommerce-product-button, .wc-block-components-product-button),
.wc-block-grid__product > .wc-block-grid__product-add-to-cart,
.woocommerce ul.products li.product > .button { margin-top: auto; }
.wc-block-product .wp-block-post-title a { text-decoration: none; color: var(--ink); }
.wc-block-product .wp-block-post-title a:is(:hover, :focus-visible) { text-decoration: underline; }

/* Sale badge: one style everywhere, light text on the error colour (6:1 in light and in dark). */
.wc-block-components-product-sale-badge,
.wc-block-components-sale-badge,
.woocommerce span.onsale {
  background: var(--danger); color: var(--surface); border: 0; border-radius: var(--radius-full);
  font: 700 12px/1 var(--font-body); letter-spacing: .04em; text-transform: uppercase;
  padding: 6px 10px; min-height: 0; min-width: 0;
}
.wc-block-components-product-image .wc-block-components-product-sale-badge { margin: 10px; }

/* Price and sale price. */
.wc-block-components-product-price, .woocommerce .price, .woocommerce-Price-amount { color: var(--ink); }
.wc-block-components-product-price, .woocommerce .price { font-weight: 700; }
:is(.wc-block-components-product-price, .woocommerce .price) del,
.wc-block-components-product-price__regular { color: var(--muted); font-weight: 400; opacity: 1; }
:is(.wc-block-components-product-price, .woocommerce .price) ins,
.wc-block-components-product-price__value.is-discounted { text-decoration: none; color: var(--danger); background: none; font-weight: 700; }

/* Fields: quantity, selects (sorting, variations), text areas, checkout inputs. */
.woocommerce :is(.quantity .qty, select, textarea, .input-text),
.wp-block-woocommerce-catalog-sorting select,
.wc-block-components-quantity-selector,
.wc-block-components-text-input input,
.wc-block-components-textarea,
.wc-blocks-components-select .wc-blocks-components-select__select {
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background-color: var(--surface); color: var(--ink);
  font: 500 15px/1.4 var(--font-body);
}
.woocommerce :is(select, .quantity .qty, .input-text:not(textarea)), .wp-block-woocommerce-catalog-sorting select { min-height: 44px; padding: 8px 12px; }
.woocommerce .quantity .qty { width: 4.5em; text-align: center; }
.woocommerce textarea { padding: 10px 12px; }
.wc-block-components-quantity-selector { min-height: 44px; }
.wc-block-components-quantity-selector input { color: var(--ink); background: transparent; }
.wc-block-components-quantity-selector__button { min-width: 36px; color: var(--ink); }
.wc-block-components-text-input label, .wc-blocks-components-select__label { color: var(--muted); }

/* Notices. */
.wc-block-components-notice-banner, .woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) { border-radius: var(--radius-md); color: var(--ink); }
.woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--brand); padding: var(--space-4) var(--space-5); list-style: none; }
.woocommerce .woocommerce-error { border-left-color: var(--danger); }
.woocommerce .woocommerce-message { border-left-color: var(--success); }
.wc-block-components-notice-banner__dismiss { min-width: 24px; min-height: 24px; }
.wc-block-components-notice-banner a, .woocommerce :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) a { color: var(--brand-ink); }

/* Product tabs. */
.woocommerce div.product .woocommerce-tabs ul.tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0; margin: 0 0 var(--space-5); border-bottom: 1px solid var(--line); list-style: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::before, .woocommerce div.product .woocommerce-tabs ul.tabs li::after { display: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.woocommerce div.product .woocommerce-tabs ul.tabs li a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-4); color: var(--muted); font-weight: 600; text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a { color: var(--ink); border-bottom-color: var(--brand); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--ink); }
/* Readable line length for the product description. */
.woocommerce-Tabs-panel { max-width: 36rem; }
.woocommerce-Tabs-panel > h2:first-child { font-size: var(--wp--preset--font-size--x-large); }

/* Related and upsell products. */
:is(.related, .upsells, .cross-sells) > h2 { font-size: var(--wp--preset--font-size--x-large); }

/* Cart and checkout blocks follow the theme. */
:is(.wc-block-cart, .wc-block-checkout) { color: var(--text); }
:is(.wc-block-cart, .wc-block-checkout, .wc-block-mini-cart__drawer) :is(.wc-block-components-totals-wrapper, .wc-block-cart-items td, .wc-block-cart-items th, .wc-block-components-panel) { border-color: var(--line); }
:is(.wc-block-cart, .wc-block-checkout) .wc-block-components-title, .wc-block-components-checkout-step__title { color: var(--ink); font-family: var(--font-display); }
:is(.wc-block-cart, .wc-block-checkout) .wc-block-components-product-name { color: var(--ink); font-weight: 600; }
.wc-block-components-text-input input:focus, .wc-blocks-components-select__select:focus { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.wc-block-components-button:not(.is-link) { border-radius: var(--radius-md); }
.wc-block-components-checkbox .wc-block-components-checkbox__input[type="checkbox"], .wc-block-components-radio-control__input { border-color: var(--line-strong); background-color: var(--surface); }

/* ---------- Header search (patterns/header-search.php, assets/js/header-search.js) ----------
   A "Search /" button in the header tools opens a modal panel: the field, voice search where the
   browser has speech recognition, instant results and the voice note. Under 600px the button is
   an icon and the panel fills the top of the screen. Colours come from the tokens, so the dark
   style and automatic dark mode apply. */
.atl-hsearch-wrap { display: flex; }
.atl-hsearch { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 10px 0 12px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--bg); color: var(--muted); font: 500 15px/1 var(--font-body); text-decoration: none; cursor: pointer; white-space: nowrap; }
.atl-hsearch:hover { border-color: var(--line-strong); color: var(--ink); }
.atl-hsearch svg { flex: none; }
.atl-hsearch__kbd { margin-left: 18px; }
@media (max-width: 1023px) { .atl-hsearch__kbd { display: none; } }
@media (max-width: 599px) {
  .atl-hsearch { width: 40px; padding: 0; justify-content: center; }
  .atl-hsearch__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
.atl-sdialog { width: min(680px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 96px); margin: 72px auto auto; padding: 0; border: 0; background: transparent; color: var(--text); overflow: visible; }
.atl-sdialog::backdrop { background: color-mix(in srgb, #050a17 55%, transparent); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.atl-sdialog .atl-spanel { display: flex; flex-direction: column; max-height: calc(100dvh - 96px); }
.atl-sdialog [hidden] { display: none !important; }
.atl-sdialog .atl-spanel { box-sizing: border-box; }
/* The field shows its focus on the whole bar (:focus-within), so the inner input needs no second ring. */
.atl-sdialog .atl-sfield input:focus-visible { outline: none; }
.atl-sdialog .atl-sfield:focus-within { outline: 2px solid var(--focus); outline-offset: -2px; }
.atl-sdialog .atl-sfield { flex: none; height: 60px; }
.atl-sdialog .atl-sfield input { font-size: 17px; }
.atl-sdialog .atl-sfield input::-webkit-search-cancel-button { display: none; }
.atl-sdialog .atl-mic { width: 40px; height: 40px; }
.atl-sdialog .atl-mic[aria-pressed="true"] { border-color: var(--danger); }
.atl-sdialog .atl-sfield__clear { display: grid; place-items: center; }
.atl-sdialog .atl-sfield__clear:hover { background: var(--surface-sunken); color: var(--ink); }
.atl-sdialog .atl-spanel__list { flex: 1 1 auto; max-height: none; min-height: 0; }
.atl-sdialog .atl-spanel__group { list-style: none; }
.atl-sdialog .atl-sres { list-style: none; margin: 0; }
.atl-sdialog .atl-sres--ask b { font-weight: 500; color: var(--brand-ink); }
.atl-sdialog .atl-spanel__empty { margin: 0; }
.atl-sdialog .atl-spanel__foot { flex: none; }
.atl-sdialog .atl-spanel__foot [data-atl-search-voice-note] { flex-basis: 100%; }
@media (max-width: 599px) {
  .atl-sdialog { width: 100%; margin: 0; max-height: 100dvh; }
  .atl-sdialog .atl-spanel { border-radius: 0 0 var(--radius-xl) var(--radius-xl); border-top: 0; max-height: 100dvh; }
  .atl-sdialog [data-atl-search-keys] { display: none; }
}
@media (forced-colors: active) { .atl-hsearch, .atl-sdialog .atl-spanel { border: 1px solid CanvasText; } }