/*
 * Neural LLM — nllm template.css
 *
 * PURPOSE:
 *   Global dark-theme overrides for the Cassiopeia base. Resets every
 *   surface, typography, link, and layout token to the Neural LLM brand.
 *   All values are sourced exclusively from tokens.css (--nllm-* / --pc-*
 *   custom properties). No hardcoded hex values appear below.
 *
 * ARCHITECTURE:
 *   Load order: tokens.css → template.css → components.css → responsive.css
 *   This sheet handles: body/surface reset, typography scale, header/nav,
 *   footer, back-to-top, skip-link, Cassiopeia structural overrides,
 *   utility classes, and per-page body modifiers (pc-page--*).
 *
 * DEPENDENCIES:
 *   ../../../media/com_neurallicense/brand/tokens.css  (--nllm-* / --pc-*)
 *   Cassiopeia Bootstrap 5 base (already loaded by parent template)
 *
 * [claude:sonnet-4.6][hurc:v0.7.0]
 *
 * @copyright  (C) 2026 Neural LLM. All rights reserved.
 * @license    GNU General Public License version 2 or later; see LICENSE.txt
 */

/* ─────────────────────────────────────────────────────────────────────────────
   GLOBAL RESET — dark surface, brand typography
   ───────────────────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    /* Smooth scrolling for anchor links and back-to-top */
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    background-color: var(--nllm-surface-deep);   /* #0f172a deep navy */
    color: var(--nllm-text);                       /* #f8fafc off-white */
    font-family: var(--nllm-font-sans);            /* Inter stack */
    font-size: var(--nllm-text-body);              /* 16px */
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Override Cassiopeia light background */
    --template-bg-light: var(--nllm-surface-deep);
    --template-text-dark: var(--nllm-text);
    --template-text-light: var(--nllm-text);
}

/* ─────────────────────────────────────────────────────────────────────────────
   CASSIOPEIA STRUCTURAL OVERRIDES
   Reset light-mode colors injected by Cassiopeia's own CSS.
   ───────────────────────────────────────────────────────────────────────────── */

/* Cassiopeia wraps content in .site — force dark background */
.site {
    background-color: var(--nllm-surface-deep);
    min-height: 100vh;
}

/* Cassiopeia card module wrapper */
.card {
    background-color: var(--nllm-surface);
    border: 1px solid var(--nllm-surface-soft);
    color: var(--nllm-text);
}

.card-body {
    color: var(--nllm-text);
}

/* Cassiopeia container widths — keep static layout sensible */
.wrapper-static .container-component,
.wrapper-static .site-grid {
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: var(--nllm-space-lg);
}

/* Remove Cassiopeia's light-mode site-grid gap color */
.site-grid {
    background-color: transparent;
}

/* ─────────────────────────────────────────────────────────────────────────────
   TYPOGRAPHY
   ───────────────────────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--nllm-font-sans);
    font-weight: 700;
    line-height: 1.2;
    color: var(--nllm-text);
    /* Subtle gradient text for display headings */
    letter-spacing: -0.02em;
}

h1 { font-size: var(--nllm-text-h1); }   /* 48px */
h2 { font-size: var(--nllm-text-h2); }   /* 36px */
h3 { font-size: var(--nllm-text-h3); }   /* 24px */
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; font-weight: 600; }
h6 { font-size: 0.875rem; font-weight: 600; }

p {
    color: var(--nllm-text-muted);    /* slightly dimmed body text */
    margin-block-end: var(--nllm-space-md);
}

strong, b {
    color: var(--nllm-text);
    font-weight: 600;
}

/* Display-scale heading utility */
.nllm-display {
    font-size: var(--nllm-text-display);   /* 72px */
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.05;
}

/* Gradient text utility — for hero headings */
.nllm-gradient-text {
    background: var(--nllm-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Bolt gradient text — for Power Claude CTAs */
.pc-bolt-text {
    background: var(--pc-bolt-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Monospace / code */
code, kbd, samp, pre {
    font-family: var(--nllm-font-mono);
    font-size: 0.875em;
}

code {
    background-color: var(--nllm-surface-soft);
    color: var(--nllm-cyan-bright);
    padding: 0.15em 0.4em;
    border-radius: var(--nllm-radius-sm);
}

pre {
    background-color: var(--nllm-surface);
    border: 1px solid var(--nllm-surface-soft);
    border-radius: var(--nllm-radius-md);
    padding: var(--nllm-space-lg);
    overflow-x: auto;
    color: var(--nllm-text-muted);
    line-height: 1.6;
}

pre code {
    background: none;
    padding: 0;
    color: inherit;
}

/* ─────────────────────────────────────────────────────────────────────────────
   LINKS
   ───────────────────────────────────────────────────────────────────────────── */

a {
    color: var(--nllm-violet-soft);       /* #a855f7 — readable on dark */
    text-decoration: none;
    transition: color var(--nllm-transition-fast);
}

a:hover,
a:focus-visible {
    color: var(--nllm-cyan-bright);
    text-decoration: underline;
    text-underline-offset: 3px;
}

a:focus-visible {
    outline: 2px solid var(--nllm-violet);
    outline-offset: 3px;
    border-radius: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   SKIP LINK (accessibility)
   ───────────────────────────────────────────────────────────────────────────── */

.nllm-skip-link {
    position: absolute;
    top: -100%;
    left: var(--nllm-space-md);
    z-index: 9999;
    background-color: var(--nllm-violet);
    color: var(--nllm-text) !important;
    padding: var(--nllm-space-sm) var(--nllm-space-md);
    border-radius: 0 0 var(--nllm-radius-sm) var(--nllm-radius-sm);
    font-weight: 600;
    text-decoration: none;
    transition: top var(--nllm-transition-fast);
}

.nllm-skip-link:focus {
    top: 0;
    outline: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   HEADER / NAVIGATION
   ───────────────────────────────────────────────────────────────────────────── */

.nllm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--nllm-space-lg);
    padding-inline: var(--nllm-space-xl);
    padding-block: var(--nllm-space-md);
    background-color: rgba(15, 23, 42, 0.92);   /* --nllm-surface-deep at 92% */
    border-bottom: 1px solid var(--nllm-surface-soft);
    /* Frosted-glass effect on scroll */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 1000;
    /* [claude:opus-4.7-1m][hurc:v0.7.0] No header-level overflow clipping. The W3-era `overflow-x: hidden`
       (mobile cart-overflow safety net at 320px) was redundant once the
       cart was properly pinned, AND it turned the header into a scroll
       container that clipped the mod_hurc_account dropdown panel — any
       absolute-positioned descendant rendering below the header strip got
       clipped to the strip's box. The body-level `overflow-x: hidden`
       at <= 480px (below) is the sole, intentional safety net for
       narrow-mobile page-level horizontal scroll. */
}

/* [claude:opus-4.7-1m][hurc:v0.7.0] Global mobile horizontal-scroll safety net. If any descendant blows
   past the viewport width — wide pre/code, oversized images, mis-laid-out
   tables — the body still doesn't scroll horizontally. Use at 480px and
   below only; larger viewports rarely overflow and the rule could mask real
   bugs at desktop. */
@media (max-width: 480px) {
    body {
        overflow-x: hidden;
    }
}

/* Cassiopeia adds .position-sticky .sticky-top — keep it above page content */
.nllm-header.position-sticky {
    top: 0;
}

/* [claude:opus-4.7-1m][hurc:v0.7.0] Topbar strip — the secondary utility row above the main header
   (Sign in / Sign up). It is a DOM sibling of the brand/actions/nav inside
   the flex `.nllm-header`. Without `order: -1` + `width: 100%` it has zero
   CSS and collapses into a cramped column squeezed between the brand and
   actions; `flex-wrap: wrap` then pushes everything onto extra rows. Forcing
   it full-width on its own row at every breakpoint keeps the header a clean
   two-tier strip (utility row on top, brand/nav below). */
.container-topbar {
    order: -1;
    width: 100%;
}

/* [claude:opus-4.7-1m][hurc:v0.7.0] Thin right-aligned utility menu inside the topbar strip. Renders the
   Joomla mod_menu `<ul>` — strips the default list chrome, lays the items out
   as a small horizontal row, and pins them to the right edge so they read as
   secondary affordances above the primary nav. */
.nllm-topbar__menu {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: var(--nllm-space-md);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--nllm-text-sm);
}

.nllm-topbar__menu .nav-item {
    display: inline-flex;
}

.nllm-topbar__menu a {
    color: var(--nllm-text-muted);
    text-decoration: none;
    transition: color var(--nllm-transition-fast);
}

.nllm-topbar__menu a:hover,
.nllm-topbar__menu a:focus-visible {
    color: var(--nllm-text);
    outline: none;
}

/* [claude:opus-4.7-1m][hurc:v0.7.0] Always-visible action row (cart + hamburger). Sibling of the
   collapsible <nav> so the cart never scrolls off-screen on mobile and the
   toggler stays reachable at every width. On desktop, flex `order` (set in
   responsive.css md+) places this AFTER the nav so the cart sits at the far
   right of the header, matching the pre-restructure visual order. */
.nllm-header__actions {
    display: flex;
    align-items: center;
    gap: var(--nllm-space-sm);
    flex-shrink: 0;
}

/* [claude:opus-4.7-1m][hurc:v0.7.0] Hamburger toggler — pure-CSS 3-bar icon that morphs to an X when the
   nav is open. The middle bar is the .nllm-header__toggler-bar span; the top
   and bottom bars are its ::before / ::after. Hidden at md+ (responsive.css)
   where the nav renders inline. */
.nllm-header__toggler {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--nllm-surface-soft);
    border-radius: var(--nllm-radius-sm);
    color: var(--nllm-text);
    cursor: pointer;
    transition: border-color var(--nllm-transition-fast);
}

.nllm-header__toggler:hover,
.nllm-header__toggler:focus-visible {
    border-color: var(--nllm-violet);
    outline: none;
}

.nllm-header__toggler-bar,
.nllm-header__toggler-bar::before,
.nllm-header__toggler-bar::after {
    display: block;
    width: 22px;
    height: 2px;
    background-color: currentColor;
    border-radius: 2px;
    transition:
        transform var(--nllm-transition-fast),
        opacity var(--nllm-transition-fast);
}

.nllm-header__toggler-bar {
    position: relative;
}

.nllm-header__toggler-bar::before,
.nllm-header__toggler-bar::after {
    content: "";
    position: absolute;
    left: 0;
}

.nllm-header__toggler-bar::before {
    top: -7px;
}

.nllm-header__toggler-bar::after {
    top: 7px;
}

/* Open state: middle bar fades, outer bars rotate into an X */
.nllm-header__toggler[aria-expanded="true"] .nllm-header__toggler-bar {
    background-color: transparent;
}

.nllm-header__toggler[aria-expanded="true"] .nllm-header__toggler-bar::before {
    transform: translateY(7px) rotate(45deg);
}

.nllm-header__toggler[aria-expanded="true"] .nllm-header__toggler-bar::after {
    transform: translateY(-7px) rotate(-45deg);
}

/* Brand / logo area */
.nllm-header__brand {
    display: flex;
    align-items: center;
    gap: var(--nllm-space-sm);
    flex-shrink: 0;
}

.nllm-header__logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: opacity var(--nllm-transition-fast);
}

.nllm-header__logo-link:hover {
    opacity: 0.85;
    text-decoration: none;
}

.nllm-logo {
    height: 28px;
    width: auto;
    display: block;
}

.nllm-logo-text {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--nllm-text);
    letter-spacing: -0.02em;
}

.nllm-header__tagline {
    font-size: var(--nllm-text-sm);
    color: var(--nllm-text-subtle);
    display: none;   /* hidden at mobile, shown at md+ in responsive.css */
}

/* Navigation menu */
.nllm-header__nav {
    display: flex;
    align-items: center;
    gap: var(--nllm-space-xs);
    flex: 1;
    justify-content: flex-end;
}

/* Cassiopeia nav module renders a <ul> — style it flat */
.nllm-header__nav .nav,
.nllm-header__nav ul {
    display: flex;
    align-items: center;
    gap: var(--nllm-space-xs);
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.nllm-header__nav .nav-item,
.nllm-header__nav li {
    margin: 0;
    /* Override Cassiopeia Bootstrap .nav-item { flex: auto } which forces items to
       grow and fill available space, causing the nav to wrap or expand items. */
    flex: none;
}

.nllm-header__nav .nav-link,
.nllm-header__nav a {
    color: var(--nllm-text-muted);
    font-size: var(--nllm-text-sm);
    font-weight: 500;
    padding: var(--nllm-space-xs) var(--nllm-space-sm);
    border-radius: var(--nllm-radius-sm);
    /* [claude:opus-4.7-1m][hurc:v0.7.0] WCAG 2.5.8 (AA) minimum 24px target — set to 44px for AAA
       compliance. Audit flagged Sign in / Sign up rendering at 20px high.
       inline-flex + align-items centers the text vertically within the
       larger tap area without changing visible padding. */
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    text-decoration: none;
    transition:
        color var(--nllm-transition-fast),
        background-color var(--nllm-transition-fast);
}

.nllm-header__nav .nav-link:hover,
.nllm-header__nav a:hover {
    color: var(--nllm-text);
    background-color: var(--nllm-surface-soft);
    text-decoration: none;
}

/* Active menu item — violet accent */
.nllm-header__nav .nav-link.active,
.nllm-header__nav .active > a,
.nllm-header__nav li.current > a {
    color: var(--nllm-violet-soft);
    background-color: rgba(124, 58, 237, 0.1);
}

/* ─────────────────────────────────────────────────────────────────────────────
   PARENT MENU ITEMS / SUBMENU DROPDOWN
   [claude:opus-4.8-1m][client:2.1.158][hurc:v0.10.1] The Joomla mod_menu parent item (e.g. "Resources") renders as a
   non-link <span class="mod-menu__heading nav-header"> plus a child
   <ul class="mod-menu__sub">. Cassiopeia's bundled template.min.css hides that
   child <ul> with `.mod-menu .parent > ul { display: none }` and the nllm
   stylesheet previously shipped NO rule to reveal it — so the submenu children
   (Referral Program / Docs / Blog) were unreachable from the nav.
   These BASE (mobile-first) rules:
     1) style the parent <span> label to match real nav links,
     2) add a ▾ caret affordance on parent items,
     3) reveal the submenu as a plain stacked list inside the collapsed mobile
        panel (no hover on touch — children must always be listed there).
   The desktop hover/focus-within absolute dropdown is layered on at md+ in
   responsive.css.
   ───────────────────────────────────────────────────────────────────────────── */

/* Parent label is a <span>, not an <a> — give it the nav-link look + caret. */
.nllm-header__nav .nav-item.parent > .mod-menu__heading,
.nllm-header__nav .nav-item.parent > .nav-header {
    display: inline-flex;
    align-items: center;
    gap: var(--nllm-space-2xs, 0.25rem);
    color: var(--nllm-text-muted);
    font-size: var(--nllm-text-sm);
    font-weight: 500;
    padding: var(--nllm-space-xs) var(--nllm-space-sm);
    border-radius: var(--nllm-radius-sm);
    min-height: 44px;
    cursor: pointer;
    transition: color var(--nllm-transition-fast);
}

/* ▾ caret affordance after the parent label. */
.nllm-header__nav .nav-item.parent > .mod-menu__heading::after,
.nllm-header__nav .nav-item.parent > .nav-header::after {
    content: "\25BE";   /* ▾ */
    font-size: 0.7em;
    line-height: 1;
    opacity: 0.75;
    transition: transform var(--nllm-transition-fast);
}

.nllm-header__nav .nav-item.parent:hover > .mod-menu__heading,
.nllm-header__nav .nav-item.parent:focus-within > .mod-menu__heading,
.nllm-header__nav .nav-item.parent:hover > .nav-header,
.nllm-header__nav .nav-item.parent:focus-within > .nav-header {
    color: var(--nllm-text);
}

/* Caret flips up when the dropdown is open (hover / keyboard focus). */
.nllm-header__nav .nav-item.parent:hover > .mod-menu__heading::after,
.nllm-header__nav .nav-item.parent:focus-within > .mod-menu__heading::after,
.nllm-header__nav .nav-item.parent:hover > .nav-header::after,
.nllm-header__nav .nav-item.parent:focus-within > .nav-header::after {
    transform: rotate(180deg);
}

/* Reveal the submenu — base/mobile: a plain stacked list under the parent so
   children are always reachable inside the collapsed panel. Beats Cassiopeia's
   `.mod-menu .parent > ul { display: none }` (0,0,2,1) via the deeper scope. */
.nllm-header__nav .nav-item.parent > ul.mod-menu__sub,
.nllm-header__nav .nav-item.parent > ul {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--nllm-space-2xs, 0.25rem);
    list-style: none;
    margin: 0;
    padding-inline-start: var(--nllm-space-md);   /* indent children under parent */
}

/* ─────────────────────────────────────────────────────────────────────────────
   MAIN CONTENT AREA
   ───────────────────────────────────────────────────────────────────────────── */

.container-component {
    background-color: transparent;
    padding-block: var(--nllm-space-2xl);
}

/* ─── Alerts ─────────────────────────────────────────────────────────────────
 * Two render paths reach the user:
 *   1. <div class="alert alert-*">   — inline form notices, system messages
 *   2. <joomla-alert type="*">       — form.validate.js validation errors
 * Both must read on the dark surface. We override Bootstrap's --bs-alert-*
 * custom properties so any current OR future .alert-* variant inherits the
 * brand palette instead of Bootstrap's light defaults. */
.alert {
    --bs-alert-bg: var(--nllm-surface);
    --bs-alert-color: var(--nllm-text);
    --bs-alert-border-color: var(--nllm-surface-soft);
    --bs-alert-link-color: var(--nllm-violet-soft);
    border-radius: var(--nllm-radius-md);
    border-left: 4px solid var(--nllm-violet);
    background-color: var(--nllm-surface);
    color: var(--nllm-text);
    /* Inline icon + message on one row. Default Bootstrap leaves <i> + text */
    /* as block-stacking siblings on some renders (e.g. shop messages), */
    /* which produced an icon-above-text break in checkout. Flex with gap */
    /* aligns them on the baseline and is harmless on alerts that contain */
    /* only text or a heading+message block (flex wraps gracefully). */
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.alert .alert-link,
.alert a {
    color: var(--nllm-violet-soft);
}

.alert-success { border-left-color: var(--pc-status-flowing); }
.alert-info    { border-left-color: var(--nllm-cyan); }
.alert-warning,
.alert-notice  { border-left-color: var(--pc-bolt-amber); }
.alert-danger,
.alert-error   { border-left-color: var(--pc-status-blocked); }

/* validate.js renders <joomla-alert> into #system-message-container. Cassiopeia's
 * joomla-alert.css scopes its (light-theme) rules to `#system-message-container
 * joomla-alert` (specificity 0,1,0,1), so our overrides must match that selector
 * to win the cascade. */
html #system-message-container joomla-alert,
joomla-alert {
    display: block;
    position: relative;
    margin-block-end: var(--nllm-space-lg);
    padding: var(--nllm-space-md) var(--nllm-space-lg);
    border-radius: var(--nllm-radius-md);
    border: 1px solid var(--nllm-surface-soft);
    border-left: 4px solid var(--nllm-violet);
    background-color: var(--nllm-surface);
    color: var(--nllm-text);
}

html #system-message-container joomla-alert[type="success"],
joomla-alert[type="success"] { border-left-color: var(--pc-status-flowing); background-color: var(--nllm-surface); }

html #system-message-container joomla-alert[type="info"],
html #system-message-container joomla-alert[type="notice"],
joomla-alert[type="info"],
joomla-alert[type="notice"]  { border-left-color: var(--nllm-cyan); background-color: var(--nllm-surface); }

html #system-message-container joomla-alert[type="warning"],
joomla-alert[type="warning"] { border-left-color: var(--pc-bolt-amber); background-color: var(--nllm-surface); }

html #system-message-container joomla-alert[type="danger"],
html #system-message-container joomla-alert[type="error"],
joomla-alert[type="danger"],
joomla-alert[type="error"]   { border-left-color: var(--pc-status-blocked); background-color: var(--nllm-surface); }

html #system-message-container joomla-alert .alert-heading,
joomla-alert .alert-heading {
    color: var(--nllm-text-muted);
    background: transparent;
    font-size: var(--nllm-text-sm);
    font-weight: 600;
    margin-block-end: var(--nllm-space-xs);
}

html #system-message-container joomla-alert .alert-message,
html #system-message-container joomla-alert .alert-wrapper,
joomla-alert .alert-message,
joomla-alert .alert-wrapper {
    color: var(--nllm-text);
}

html #system-message-container joomla-alert .joomla-alert--close,
joomla-alert .joomla-alert--close {
    position: absolute;
    top: var(--nllm-space-sm);
    right: var(--nllm-space-md);
    background: transparent;
    border: 0;
    color: var(--nllm-text-muted);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

html #system-message-container joomla-alert .joomla-alert--close:hover,
joomla-alert .joomla-alert--close:hover {
    color: var(--nllm-text);
}

/* Breadcrumbs */
.breadcrumb {
    background-color: transparent;
    padding: 0;
    margin-block-end: var(--nllm-space-lg);
}

.breadcrumb-item {
    color: var(--nllm-text-subtle);
    font-size: var(--nllm-text-sm);
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--nllm-surface-edge);
}

.breadcrumb-item a {
    color: var(--nllm-text-subtle);
}

.breadcrumb-item a:hover {
    color: var(--nllm-violet-soft);
}

.breadcrumb-item.active {
    color: var(--nllm-text-muted);
}

/* ─────────────────────────────────────────────────────────────────────────────
   FOOTER
   ───────────────────────────────────────────────────────────────────────────── */

.nllm-footer {
    background-color: var(--nllm-surface);           /* slightly lighter than body */
    border-top: 1px solid var(--nllm-surface-soft);
    padding-block: var(--nllm-space-2xl) var(--nllm-space-lg);
    margin-top: var(--nllm-space-2xl);
}

/* Three-column grid */
.nllm-footer__columns {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--nllm-space-xl);
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: var(--nllm-space-xl);
    margin-block-end: var(--nllm-space-xl);
}

/* Brand column */
.nllm-footer__col--brand {
    display: flex;
    flex-direction: column !important;
    gap: var(--nllm-space-sm);
}

.nllm-footer__logo-link {
    display: inline-block;
    margin-block-end: var(--nllm-space-xs);
    opacity: 0.9;
    transition: opacity var(--nllm-transition-fast);
}

.nllm-footer__logo-link:hover {
    opacity: 1;
}

.nllm-footer__tagline {
    color: var(--nllm-text-muted);
    font-size: var(--nllm-text-sm);
    margin: 0;
}

.nllm-footer__disclaimer {
    color: var(--nllm-text-subtle);
    font-size: 0.75rem;
    margin: 0;
}

/* Always-visible compliance bar — renders regardless of module state */
.nllm-footer__compliance-bar {
    border-block-start: 1px solid var(--nllm-surface-edge, #334155);
    padding: var(--nllm-space-sm) var(--nllm-space-xl);
    text-align: center;
}

/* Link columns */
.nllm-footer__col-heading {
    font-size: var(--nllm-text-sm);
    font-weight: 600;
    color: var(--nllm-text);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-block-end: var(--nllm-space-md);
}

.nllm-footer__links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column !important;
    gap: var(--nllm-space-sm);
}

.nllm-footer__links a {
    color: var(--nllm-text-subtle);
    font-size: var(--nllm-text-sm);
    text-decoration: none;
    transition: color var(--nllm-transition-fast);
}

.nllm-footer__links a:hover {
    color: var(--nllm-violet-soft);
    text-decoration: none;
}

/* Bottom copyright bar */
.nllm-footer__bar {
    max-width: 1280px;
    margin-inline: auto;
    padding-inline: var(--nllm-space-xl);
    padding-block-start: var(--nllm-space-lg);
    border-top: 1px solid var(--nllm-surface-soft);
}

.nllm-footer__copyright {
    color: var(--nllm-text-subtle);
    font-size: 0.75rem;
    margin: 0;
}

.nllm-footer__copyright a {
    color: var(--nllm-text-subtle);
}

.nllm-footer__copyright a:hover {
    color: var(--nllm-violet-soft);
}

/* ─────────────────────────────────────────────────────────────────────────────
   BACK-TO-TOP BUTTON
   ───────────────────────────────────────────────────────────────────────────── */

.nllm-back-top {
    position: fixed;
    bottom: var(--nllm-space-xl);
    right: var(--nllm-space-xl);
    z-index: 900;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--nllm-violet);
    color: var(--nllm-text) !important;
    border-radius: var(--nllm-radius-full);
    box-shadow: var(--nllm-shadow-md);
    text-decoration: none;
    font-size: 1.1rem;
    line-height: 1;
    transition:
        background-color var(--nllm-transition-fast),
        transform var(--nllm-transition-fast),
        box-shadow var(--nllm-transition-fast);
}

.nllm-back-top:hover {
    background-color: var(--nllm-violet-deep);
    transform: translateY(-3px);
    box-shadow: var(--nllm-shadow-lg);
    text-decoration: none;
    color: var(--nllm-text) !important;
}

/* ─────────────────────────────────────────────────────────────────────────────
   BOOTSTRAP 5 OVERRIDES — Cassiopeia bundles Bootstrap 5; reset dark surfaces
   ───────────────────────────────────────────────────────────────────────────── */

/* ─── Form controls (text/email/password/textarea/select) ──────────────────── */
.form-control,
.form-select {
    background-color: var(--nllm-surface);
    border-color: var(--nllm-surface-soft);
    color: var(--nllm-text);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--nllm-surface);
    border-color: var(--nllm-violet);
    color: var(--nllm-text);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.25);
}

.form-control::placeholder {
    color: var(--nllm-text-subtle);
}

/* Cassiopeia ships a dark-arrow select-bg.svg sized for light backgrounds.
 * Override with an inline SVG tinted in --nllm-text-muted so the chevron
 * reads on the dark surface. */
.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23cbd5e1' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
}

.form-select option {
    background-color: var(--nllm-surface);
    color: var(--nllm-text);
}

/* ─── Labels & helper text ─────────────────────────────────────────────────── */
.form-label,
legend,
fieldset > legend,
.control-label {
    color: var(--nllm-text-muted);
}

.form-text {
    color: var(--nllm-text-subtle);
}

/* Required-field star + "* Required field" intro line */
.star,
.spacer-required {
    color: var(--pc-status-blocked);
}

/* ─── form-check (radios + checkboxes) ─────────────────────────────────────── *
 * Bootstrap renders these with appearance:none and a white background — on the
 * dark surface the control is invisible. Replace bg/border with brand tokens
 * and supply white-on-violet checked-state SVGs. */
.form-check-input {
    background-color: var(--nllm-surface);
    border: 1px solid var(--nllm-surface-edge);
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.2em;
}

.form-check-input:hover {
    border-color: var(--nllm-violet-soft);
}

.form-check-input:focus {
    border-color: var(--nllm-violet);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.25);
}

.form-check-input:checked {
    background-color: var(--nllm-violet);
    border-color: var(--nllm-violet);
}

.form-check-input:checked[type="radio"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23ffffff'/%3e%3c/svg%3e");
}

.form-check-input:checked[type="checkbox"] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10l3 3l6-6'/%3e%3c/svg%3e");
}

.form-check-label {
    color: var(--nllm-text-muted);
    padding-inline-start: var(--nllm-space-xs);
}

/* ─── Invalid state — applies to fields validate.js marks .invalid AND to
 *      anything carrying aria-invalid="true" or form-control-danger. */
.form-control.invalid,
.form-select.invalid,
.form-control.form-control-danger,
.form-control[aria-invalid="true"],
.form-select[aria-invalid="true"] {
    border-color: var(--pc-status-blocked);
    background-color: rgba(220, 38, 38, 0.08);
}

.form-control.invalid:focus,
.form-select.invalid:focus,
.form-control[aria-invalid="true"]:focus,
.form-select[aria-invalid="true"]:focus {
    border-color: var(--pc-status-blocked);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.25);
}

.form-check-input.invalid,
.form-check-input[aria-invalid="true"] {
    border-color: var(--pc-status-blocked);
}

label.invalid,
.control-label.invalid {
    color: var(--pc-status-blocked);
}

/* validate.js feedback span injected next to invalid label */
.form-control-feedback {
    color: var(--pc-status-blocked);
    font-size: var(--nllm-text-sm);
    margin-inline-start: var(--nllm-space-xs);
}

/* Table */
.table {
    color: var(--nllm-text-muted);
    border-color: var(--nllm-surface-soft);
}

.table > :not(caption) > * > * {
    background-color: transparent;
    border-bottom-color: var(--nllm-surface-soft);
    color: var(--nllm-text-muted);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(51, 65, 85, 0.3);   /* --nllm-surface-soft at 30% */
}

/* Dropdowns */
.dropdown-menu {
    background-color: var(--nllm-surface);
    border-color: var(--nllm-surface-soft);
    box-shadow: var(--nllm-shadow-md);
}

.dropdown-item {
    color: var(--nllm-text-muted);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--nllm-surface-soft);
    color: var(--nllm-text);
}

.dropdown-divider {
    border-color: var(--nllm-surface-soft);
}

/* Pagination */
.page-link {
    background-color: var(--nllm-surface);
    border-color: var(--nllm-surface-soft);
    color: var(--nllm-text-muted);
}

.page-link:hover {
    background-color: var(--nllm-surface-soft);
    color: var(--nllm-text);
    border-color: var(--nllm-surface-edge);
}

.page-item.active .page-link {
    background-color: var(--nllm-violet);
    border-color: var(--nllm-violet);
    color: var(--nllm-text);
}

.page-item.disabled .page-link {
    background-color: var(--nllm-surface);
    border-color: var(--nllm-surface-soft);
    color: var(--nllm-text-subtle);
}

/* ─────────────────────────────────────────────────────────────────────────────
   FAQ — <details>/<summary> accordion (no JS dependency)
   ───────────────────────────────────────────────────────────────────────────── */

.nllm-faq {
    display: flex;
    flex-direction: column !important;
    gap: var(--nllm-space-sm);
}

.nllm-faq details {
    background-color: var(--nllm-surface);
    border: 1px solid var(--nllm-surface-soft);
    border-radius: var(--nllm-radius-md);
    overflow: hidden;
    transition: border-color var(--nllm-transition-fast);
}

.nllm-faq details[open] {
    border-color: var(--nllm-violet);
}

.nllm-faq summary {
    padding: var(--nllm-space-md) var(--nllm-space-lg);
    font-weight: 600;
    color: var(--nllm-text);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color var(--nllm-transition-fast);
}

.nllm-faq summary::-webkit-details-marker { display: none; }
.nllm-faq summary::marker { display: none; }

/* Chevron indicator */
.nllm-faq summary::after {
    content: '+';
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--nllm-violet-soft);
    flex-shrink: 0;
    transition: transform var(--nllm-transition-fast);
}

.nllm-faq details[open] summary::after {
    transform: rotate(45deg);
}

.nllm-faq summary:hover {
    background-color: var(--nllm-surface-soft);
}

.nllm-faq .faq-body {
    padding: var(--nllm-space-md) var(--nllm-space-lg) var(--nllm-space-lg);
    color: var(--nllm-text-muted);
    border-top: 1px solid var(--nllm-surface-soft);
    line-height: 1.7;
}

/* ─────────────────────────────────────────────────────────────────────────────
   PER-PAGE BODY CLASS MODIFIERS
   body.pc-page--home, body.pc-page--pricing, etc.
   ───────────────────────────────────────────────────────────────────────────── */

/* Home: slightly more generous component padding */
body.pc-page--home .container-component {
    padding-block-start: 0;   /* hero sits flush against header */
}

/* Pricing page: transparent component padding (pricing grid is full-bleed) */
body.pc-page--pricing .container-component {
    padding-block: var(--nllm-space-2xl);
}

/* Legal / docs pages: narrower readable column. [claude:opus-4.7-1m][hurc:v0.7.0] Selector list previously
   used abbreviated names (--terms, --privacy, --aup) but body classes are
   built from full menu aliases (--terms-of-service, --privacy-policy,
   --acceptable-use-policy) so 13 of 14 legal pages were missing the cap and
   running full 1152px wide. Listed in full now. */
body.pc-page--terms .container-component,
body.pc-page--terms-of-service .container-component,
body.pc-page--privacy .container-component,
body.pc-page--privacy-policy .container-component,
body.pc-page--eula .container-component,
body.pc-page--aup .container-component,
body.pc-page--acceptable-use-policy .container-component,
body.pc-page--dmca .container-component,
body.pc-page--dmca-policy .container-component,
body.pc-page--trademark .container-component,
body.pc-page--trademark-policy .container-component,
body.pc-page--refund-policy .container-component,
body.pc-page--cancellation-policy .container-component,
body.pc-page--non-affiliation-disclaimer .container-component,
body.pc-page--extension-snippets .container-component,
body.pc-page--power-claude-terms-of-service .container-component,
body.pc-page--power-claude-refund-policy .container-component,
body.pc-page--power-claude-cancellation-policy .container-component,
body.pc-page--power-claude-acceptable-use .container-component {
    max-width: 780px;
    margin-inline: auto;
}

/* Legal page typography — [claude:opus-4.7-1m][hurc:v0.7.0] selector list expanded to match all body
   classes generated from menu aliases (same fix as the max-width rule above). */
body.pc-page--terms p,
body.pc-page--terms-of-service p,
body.pc-page--privacy p,
body.pc-page--privacy-policy p,
body.pc-page--eula p,
body.pc-page--aup p,
body.pc-page--acceptable-use-policy p,
body.pc-page--dmca p,
body.pc-page--dmca-policy p,
body.pc-page--trademark p,
body.pc-page--trademark-policy p,
body.pc-page--refund-policy p,
body.pc-page--cancellation-policy p,
body.pc-page--non-affiliation-disclaimer p,
body.pc-page--extension-snippets p,
body.pc-page--power-claude-terms-of-service p,
body.pc-page--power-claude-refund-policy p,
body.pc-page--power-claude-cancellation-policy p,
body.pc-page--power-claude-acceptable-use p {
    color: var(--nllm-text-muted);
    line-height: 1.8;
}

/* ─────────────────────────────────────────────────────────────────────────────
   UTILITY CLASSES
   ───────────────────────────────────────────────────────────────────────────── */

/* Divider */
.nllm-divider {
    border: none;
    border-top: 1px solid var(--nllm-surface-soft);
    margin-block: var(--nllm-space-xl);
}

/* Muted label */
.nllm-label {
    font-size: var(--nllm-text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--nllm-text-subtle);
}

/* Surface containers */
.nllm-surface {
    background-color: var(--nllm-surface);
    border: 1px solid var(--nllm-surface-soft);
    border-radius: var(--nllm-radius-md);
    padding: var(--nllm-space-xl);
}

.nllm-surface--soft {
    background-color: var(--nllm-surface-soft);
    border-radius: var(--nllm-radius-md);
    padding: var(--nllm-space-lg);
}

/* Section wrapper with generous vertical padding */
.nllm-section {
    padding-block: var(--nllm-space-2xl);
}

.nllm-section--xl {
    padding-block: calc(var(--nllm-space-2xl) * 2);
}

/* Centered content column */
.nllm-content-center {
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
}

/* Badge */
.nllm-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--nllm-space-xs);
    padding: 0.25em 0.75em;
    border-radius: var(--nllm-radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background-color: rgba(124, 58, 237, 0.15);
    color: var(--nllm-violet-soft);
    border: 1px solid rgba(124, 58, 237, 0.3);
}

.nllm-badge--cyan {
    background-color: rgba(6, 182, 212, 0.1);
    color: var(--nllm-cyan-bright);
    border-color: rgba(6, 182, 212, 0.25);
}

.nllm-badge--amber {
    background-color: rgba(245, 158, 11, 0.1);
    color: var(--pc-bolt-amber);
    border-color: rgba(245, 158, 11, 0.25);
}

/* Status dots */
.nllm-status {
    display: inline-flex;
    align-items: center;
    gap: var(--nllm-space-xs);
    font-size: var(--nllm-text-sm);
    color: var(--nllm-text-subtle);
}

.nllm-status::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: var(--nllm-radius-full);
    background-color: var(--pc-status-flowing);
    flex-shrink: 0;
}

.nllm-status--cooldown::before { background-color: var(--pc-status-cooldown); }
.nllm-status--blocked::before  { background-color: var(--pc-status-blocked); }

/* ─────────────────────────────────────────────────────────────────────────────
   ARTICLE CHROME OVERRIDES — hide Joomla metadata, enforce dark surface
   ───────────────────────────────────────────────────────────────────────────── */

/* Hide all article-info metadata (category, author, date, hits, tags) */
.article-info,
.article-info-term,
.article-tags,
.item-page .page-header,
.com-content-article__info,
dl.article-info {
    display: none !important;
}

/* Hide print / email icons */
.icons,
ul.icons,
.print-icon,
.email-icon,
.icon-envelope,
.icon-print {
    display: none !important;
}

/* Force article surface transparent so modules frame the page */
.item-page,
.com-content-article,
.com-content-article__body,
.blog-items,
.blog-item {
    background-color: transparent;
    color: var(--nllm-text-muted);
    line-height: 1.75;
}

/* Article title in item view — match brand typography */
.page-header h1,
.item-page h1,
.com-content-article h1 {
    color: var(--nllm-text);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-block-end: var(--nllm-space-xl);
}

/* Pagination in list views */
.pagination-bar,
.com-content-category__pagination {
    margin-block-start: var(--nllm-space-2xl);
}

/* Read-more links */
.readmore a,
.readmore-left a {
    color: var(--nllm-violet-soft);
    font-weight: 600;
    text-decoration: none;
}

.readmore a:hover,
.readmore-left a:hover {
    color: var(--nllm-cyan-bright);
}

/* Blog intro text */
.blog-intro,
.page-intro {
    color: var(--nllm-text-muted);
    max-width: 720px;
    margin-block-end: var(--nllm-space-xl);
}

/* ─────────────────────────────────────────────────────────────────────────────
   HIKASHOP OVERRIDES — dark surfaces for checkout / product views
   ───────────────────────────────────────────────────────────────────────────── */

.hikashop_product_page,
.hikashop_cart_page,
.hikashop_checkout_page,
.hikashop_category_page {
    background-color: transparent;
    color: var(--nllm-text-muted);
}

.hikashop_product_name_main,
.hikashop_product_name {
    color: var(--nllm-text);
    font-weight: 700;
}

.hikashop_product_price_full,
.hikashop_product_price {
    color: var(--nllm-violet-soft);
    font-size: 1.5rem;
    font-weight: 700;
}

/* shop buttons → brand style */
.hikashop_add_to_cart_button,
.hikabtn,
.hikashop_checkout_button {
    background-color: var(--nllm-violet) !important;
    border-color: var(--nllm-violet) !important;
    color: var(--nllm-text) !important;
    border-radius: var(--nllm-radius-md) !important;
    font-weight: 600 !important;
    padding: var(--nllm-space-sm) var(--nllm-space-xl) !important;
    transition: background-color var(--nllm-transition-fast), transform var(--nllm-transition-fast) !important;
}

.hikashop_add_to_cart_button:hover,
.hikabtn:hover,
.hikashop_checkout_button:hover {
    background-color: var(--nllm-violet-deep) !important;
    transform: translateY(-1px) !important;
}

/* shop panels */
.hikashop_checkout_coupon_left,
.hikashop_checkout_address_left,
.hikashop_basket {
    background-color: var(--nllm-surface) !important;
    border: 1px solid var(--nllm-surface-soft) !important;
    border-radius: var(--nllm-radius-md) !important;
    color: var(--nllm-text-muted) !important;
}

/* shop inputs */
.hikashop_checkout_coupon_left input,
.hikashop_checkout_address_left input,
.hikashop_checkout_address_left select {
    background-color: var(--nllm-surface-soft) !important;
    border-color: var(--nllm-surface-edge) !important;
    color: var(--nllm-text) !important;
}

/* ============================================================
   LAYOUT FIX — module section containers (added 2026-05-12)
   PURPOSE: Cassiopeia base sets `.grid-child { display: flex }`
            which lays modules side-by-side at desktop widths.
            On nllm marketing pages every module is a full-bleed
            section and MUST stack vertically.
   FIX:     Override flex-direction to column for the position
            containers that host marketing modules.
   ============================================================ */

.grid-child.container-banner,
.grid-child.container-top-a,
.grid-child.container-top-b,
.grid-child.container-bottom-a,
.grid-child.container-bottom-b {
  display: flex;
  flex-direction: column !important;
  max-width: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Children inside these grid-child wrappers MUST be block-level so
   each module renders on its own row. */
.grid-child.container-banner > section,
.grid-child.container-banner > div,
.grid-child.container-top-a > section,
.grid-child.container-top-a > div,
.grid-child.container-top-b > section,
.grid-child.container-top-b > div,
.grid-child.container-bottom-a > section,
.grid-child.container-bottom-a > div,
.grid-child.container-bottom-b > section,
.grid-child.container-bottom-b > div {
  width: 100%;
  display: block;
}

/* ============================================================
   HIKASHOP PRODUCT CARDS — dark theme (added 2026-05-12)
   PURPOSE: shop's default product listing uses white card
            backgrounds. Adapt to nllm dark theme.
   ============================================================ */

.hikashop_products,
.hikashop_subcontainer,
.hikashop_product {
  background-color: transparent !important;
  color: var(--nllm-text, #e2e8f0);
}

.hikashop_products .hikashop_product,
.hikashop_subcontainer {
  background-color: #12121a !important;
  border: 1px solid #2a2a3e !important;
  border-radius: 0.75rem;
  padding: 1.5rem !important;
  margin-bottom: 1rem !important;
  transition: border-color 0.2s, transform 0.2s;
}

.hikashop_products .hikashop_product:hover,
.hikashop_subcontainer:hover {
  border-color: var(--nllm-violet, #7c3aed) !important;
  transform: translateY(-2px);
}

.hikashop_product_name a,
.hikashop_product_name_main {
  color: var(--nllm-text, #e2e8f0) !important;
  font-weight: 600;
}

.hikashop_product_price,
.hikashop_product_price_full {
  color: var(--nllm-violet-light, #a78bfa) !important;
  font-size: 1.5rem;
  font-weight: 700;
}

.hikashop_product_description {
  color: var(--nllm-text-muted, #94a3b8);
}

/* Quantity / display selectors */
.hikashop_results_counter,
.hikashop_products_pagination,
.hikashop_subcontainer label {
  color: var(--nllm-text-muted, #94a3b8) !important;
}

/* Form inputs in checkout/cart — text-shape inputs ONLY. The original rule
 * matched bare `input` which also catches radios/checkboxes/submit buttons,
 * applying 0.6rem padding to them and bloating radio buttons from 18px to
 * ~27×21px (see .hika_edit address picker on /checkout). `:not()` scopes
 * the padding to text-entry types while keeping the dark surface styling. */
.hikashop_cart_page input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not([type="file"]):not([type="image"]):not([type="range"]):not([type="color"]),
.hikashop_checkout_page input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="hidden"]):not([type="file"]):not([type="image"]):not([type="range"]):not([type="color"]),
.hikashop_cart_page select,
.hikashop_checkout_page select,
.hikashop_cart_page textarea,
.hikashop_checkout_page textarea {
  background-color: var(--nllm-surface);
  color: var(--nllm-text);
  border: 1px solid var(--nllm-surface-soft);
  border-radius: var(--nllm-radius-sm);
  padding: 0.6rem 0.8rem;
}

/* Tables in cart/checkout */
.hikashop_cart_page table,
.hikashop_checkout_page table {
  background-color: #12121a;
  color: var(--nllm-text, #e2e8f0);
  border-color: #2a2a3e !important;
}

.hikashop_cart_page table th,
.hikashop_checkout_page table th {
  background-color: #1a1a26 !important;
  color: var(--nllm-text, #e2e8f0) !important;
  border-color: #2a2a3e !important;
}

/* shop alert/notification messages */
.hikashop_messages {
  background-color: #1a1a26 !important;
  border: 1px solid #2a2a3e !important;
  color: var(--nllm-text, #e2e8f0) !important;
  border-radius: 0.5rem;
}

@media (min-width: 768px) {
  .grid-child.container-banner,
  .grid-child.container-top-a,
  .grid-child.container-top-b,
  .grid-child.container-bottom-a,
  .grid-child.container-bottom-b {
    display: block !important;
    flex-direction: column !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .grid-child.container-banner > section,
  .grid-child.container-banner > div,
  .grid-child.container-banner > article,
  .grid-child.container-top-a > section,
  .grid-child.container-top-a > div,
  .grid-child.container-top-a > article,
  .grid-child.container-top-b > section,
  .grid-child.container-top-b > div,
  .grid-child.container-top-b > article,
  .grid-child.container-bottom-a > section,
  .grid-child.container-bottom-a > div,
  .grid-child.container-bottom-a > article,
  .grid-child.container-bottom-b > section,
  .grid-child.container-bottom-b > div,
  .grid-child.container-bottom-b > article {
    width: 100% !important;
    display: block !important;
    flex: none !important;
  }
}

/* ============================================================
   HIKASHOP CHECKOUT — refined dark theme (added 2026-05-12 #2)
   PURPOSE: First QA pass showed inputs with too-dark bg / weak contrast;
            login/register form headings needed brand violet.
   ============================================================ */

/* Section headings: "Login or create a new account", "Login", "Registration" */
.hikashop_checkout_page h1,
.hikashop_checkout_page h2,
.hikashop_checkout_page h3,
.hikashop_login,
.hikashop_register {
  color: #e2e8f0 !important;
}

/* Labels in login + registration forms */
.hikashop_checkout_login_section label,
.hikashop_checkout_registration_section label,
.hikashop_user_main_form label,
.hikashop_login label,
.hikashop_register label {
  color: #94a3b8 !important;
  font-weight: 500;
}

/* Required-field asterisk */
.required {
  color: #a78bfa !important;
}

/* Cart-summary table at the bottom of checkout */
.hikashop_checkout_cart_module table,
.hikashop_cart table {
  width: 100%;
  border-collapse: collapse;
  background-color: #12121a !important;
  color: #e2e8f0 !important;
}

.hikashop_checkout_cart_module table th,
.hikashop_cart table th {
  background-color: #1a1a26 !important;
  color: #94a3b8 !important;
  font-weight: 600;
  padding: 0.75rem 1rem !important;
  border: 1px solid #2a2a3e !important;
}

.hikashop_checkout_cart_module table td,
.hikashop_cart table td {
  padding: 0.75rem 1rem !important;
  border: 1px solid #2a2a3e !important;
  color: #e2e8f0 !important;
}

.hikashop_cart_price,
.hikashop_cart_product_price,
.hikashop_cart_product_total,
.hikashop_cart_total_value {
  color: #a78bfa !important;
  font-weight: 700;
}

/* Quantity-control buttons in the cart row */
.hikashop_cart_input_value_changer,
.hikabtn-quantity {
  background-color: #1a1a26 !important;
  color: #e2e8f0 !important;
  border: 1px solid #2a2a3e !important;
  border-radius: 4px;
  padding: 0.25rem 0.5rem;
}

.hikashop_cart_input_value_changer:hover,
.hikabtn-quantity:hover {
  border-color: #7c3aed !important;
  color: #a78bfa !important;
}

/* "Finish" / "Login" / "Register" primary buttons */
.hikabtn,
.hikashop_finish_checkout_button,
input[type="submit"].hikabtn,
button.hikabtn {
  background: linear-gradient(135deg, #7c3aed, #9333ea) !important;
  color: #ffffff !important;
  border: none !important;
  padding: 0.85rem 1.75rem !important;
  border-radius: 0.5rem !important;
  font-weight: 600 !important;
  transition: opacity 0.2s, transform 0.2s !important;
}

.hikabtn:hover,
.hikashop_finish_checkout_button:hover {
  opacity: 0.9 !important;
  transform: translateY(-1px) !important;
}

/* "Forgot your password / username" inline links */
.hikashop_checkout_login_section a,
.hikashop_login a {
  color: #a78bfa !important;
}

.hikashop_checkout_login_section a:hover,
.hikashop_login a:hover {
  color: #c4b5fd !important;
  text-decoration: underline;
}

/* Password-strength meter */
.password-strength {
  background-color: #2a2a3e;
  height: 6px;
  border-radius: 3px;
}

.password-strength-bar {
  background: linear-gradient(90deg, #ef4444, #f59e0b, #22c55e);
}

/* Joomla system messages on checkout pages (success/danger alerts) */
.alert.alert-success {
  background-color: rgba(34, 197, 94, 0.15) !important;
  color: #86efac !important;
  border: 1px solid rgba(34, 197, 94, 0.3) !important;
}

.alert.alert-warning {
  background-color: rgba(245, 158, 11, 0.15) !important;
  color: #fcd34d !important;
  border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

.alert.alert-danger {
  background-color: rgba(239, 68, 68, 0.15) !important;
  color: #fca5a5 !important;
  border: 1px solid rgba(239, 68, 68, 0.3) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
 * HEADER CART ICON (lean — shop module owns the cart UI)
 *
 * [claude:opus-4.7-1m][hurc:v0.7.0]
 *
 * When the admin assigns `mod_hikashop_cart` to the `cart-header` module
 * position, shop renders its own cart count + dropdown. When NOT
 * assigned, index.php falls back to a plain link to /component/hikashop/checkout.
 * This block styles ONLY that fallback link — the shop module brings
 * its own styles when it ships.
 *
 * Anti-pattern note (2026-05-18): a prior iteration built a custom mini-cart
 * drawer + JS state machine. Removed in favor of the shop's mod_hikashop_cart
 * — single source of cart UI, AJAX updates ship for free, no duplicate JS
 * to maintain.
 * ══════════════════════════════════════════════════════════════════════════ */

/* [claude:opus-4.7-1m][hurc:v0.7.0] Cart now lives inside .nllm-header__actions, so the old
   `margin-inline-start: auto` push-to-right is gone — the actions row owns
   right-alignment via flex order (desktop) / margin-auto (mobile). */
.nllm-header__cart {
    display: flex;
    align-items: center;
}

/* [claude:opus-4.7-1m][hurc:v0.7.0] Account-menu wrapper — sibling of .nllm-header__cart. Same flex-item
   behaviour so the action row reads account → cart → hamburger left-to-right
   at every viewport. The dropdown itself is positioned by mod_hurc_account
   (absolute, right:0, top:100%); this wrapper only owns the trigger seat. */
.nllm-header__account {
    display: flex;
    align-items: center;
}

.nllm-header__cart-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: transparent;
    border: 1px solid var(--nllm-surface-soft);
    border-radius: var(--nllm-radius-full);
    color: var(--nllm-text);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    min-height: 36px;
    transition: border-color 200ms ease, background-color 200ms ease, color 200ms ease;
}

.nllm-header__cart-link:hover,
.nllm-header__cart-link:focus-visible {
    border-color: var(--nllm-violet);
    background-color: rgba(124, 58, 237, 0.1);
    color: var(--nllm-violet-soft);
    outline: none;
}

.nllm-header__cart-link svg {
    flex-shrink: 0;
}

.nllm-header__cart-link span {
    /* Hide label on mobile, show on >=600px */
    display: none;
}

@media (min-width: 600px) {
    .nllm-header__cart-link span { display: inline; }
}

/* the shop's mod_hikashop_cart module — surface the count badge in violet
 * to match the brand. The module's wrapper is `.hikashop_cart_module`. */

.nllm-header__cart .hikashop_cart_module {
    display: flex;
    align-items: center;
}

.nllm-header__cart .hikashop_cart_module a {
    color: var(--nllm-text);
    text-decoration: none;
}

.nllm-header__cart .hikashop_cart_module a:hover {
    color: var(--nllm-violet-soft);
}

/* [claude:opus-4.7-1m][hurc:v0.7.0] Signed-in user widget in header — appears next to cart icon when a
   real user is logged in. WCAG 2.5.8 minimum tap target met via min-height. */
.nllm-header__user {
    display: flex;
    align-items: center;
    margin-inline-start: var(--nllm-space-sm);
}

.nllm-header__logout {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.5rem 0.875rem;
    color: var(--nllm-text-muted);
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid var(--nllm-surface-soft);
    border-radius: var(--nllm-radius-full);
    transition: border-color 200ms ease, color 200ms ease;
}

.nllm-header__logout:hover,
.nllm-header__logout:focus-visible {
    border-color: var(--nllm-violet);
    color: var(--nllm-text);
    outline: none;
    text-decoration: none;
}