/* [claude:opus-4.7-1m][client:2.1.152][hurc:v0.7.0]
 *
 * Neural-LLM — shop Checkout Brand Override
 *
 * PURPOSE:
 *   Fixes the dark-on-dark form field bug and applies the Neural-LLM brand
 *   to every shop checkout, registration, and cart view. All values are
 *   sourced exclusively from --nllm-* / --pc-* tokens defined in tokens.css.
 *   No hardcoded hex values appear in this file.
 *
 * ARCHITECTURE:
 *   Load order: tokens.css → template.css → hikashop-checkout.css
 *   Scope: loaded conditionally via WAM on option=com_hikashop only.
 *
 *   BEM blocks:
 *     .neural-checkout__*   — checkout step containers
 *     .neural-cart__*       — cart line item layout
 *     .neural-reg__*        — registration form
 *     .neural-payment__*    — payment method cards
 *
 * THE DARK-ON-DARK FIX:
 *   shop form inputs inherit page background (#0f172a deep navy) and
 *   render black text on a near-black field. The fix forces every input,
 *   select, and textarea inside .com_hikashop to use --nllm-surface with
 *   visible border and light text.
 *
 * DEPENDENCIES:
 *   /media/com_neurallicense/brand/tokens.css  (--nllm-* / --pc-*)
 *
 * NON-AFFILIATION:
 *   Power Claude is an independent product by Neural-LLM — not affiliated
 *   with Anthropic, PBC.
 *
 * @copyright  (C) 2026 Neural LLM. All rights reserved.
 * @license    GNU General Public License version 2 or later; see LICENSE.txt
 */

/* ── §1  THE CORE FIX: dark-on-dark form field bug ─────────────────────── */

.com_hikashop input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="image"]):not([type="file"]),
.com_hikashop select,
.com_hikashop textarea {
    background-color: var(--nllm-surface);
    color: var(--nllm-text);
    border: 1px solid var(--nllm-surface-edge);
    border-radius: var(--nllm-radius-sm);
    padding: 0.625rem 0.875rem;
    font-size: var(--nllm-text-sm);
    line-height: 1.5;
    outline: none;
    transition: border-color var(--nllm-transition-fast), box-shadow var(--nllm-transition-fast);
    width: 100%;
    box-sizing: border-box;
}

.com_hikashop input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="image"]):not([type="file"]):focus,
.com_hikashop select:focus,
.com_hikashop textarea:focus {
    border-color: var(--nllm-violet);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.25);
    background-color: var(--nllm-surface);
    color: var(--nllm-text);
    outline: none;
}

.com_hikashop input::placeholder,
.com_hikashop textarea::placeholder {
    color: var(--nllm-text-subtle);
    opacity: 1;
}

/* ── Bootstrap .input-group fix — keep eye-toggle inline with input ───────
 * [a:claude:opus-4.7-1m] Joomla's password field is rendered inside
 * `<div class="input-group">` with the show/hide eye-toggle as a sibling
 * `<button class="input-password-toggle">`. Bootstrap's default sets the
 * group to flex-flow: row wrap. Our `width: 100%` on .com_hikashop input
 * (above) makes the input claim the whole row, wrapping the toggle to a
 * second line. Override:
 *   1. .input-group → flex-wrap: nowrap so children stay inline
 *   2. input inside .input-group → width: 1% (flex-shrink trick) + flex 1
 *   3. eye-toggle → flush against input (sharp left corner, fixed width)
 */
.com_hikashop .input-group {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    align-items: stretch;
}

.com_hikashop .input-group > input.form-control,
.com_hikashop .input-group > .form-control,
.com_hikashop .input-group > input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="image"]):not([type="file"]) {
    flex: 1 1 auto;
    width: 1%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.com_hikashop .input-group > .input-password-toggle,
.com_hikashop .input-group > button.btn-secondary {
    flex: 0 0 auto;
    width: auto;
    padding: 0 0.875rem;
    background-color: var(--nllm-surface-soft);
    color: var(--nllm-text-muted);
    border: 1px solid var(--nllm-surface-edge);
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: var(--nllm-radius-sm);
    border-bottom-right-radius: var(--nllm-radius-sm);
    margin-left: -1px;
    cursor: pointer;
    transition: background-color var(--nllm-transition-fast), color var(--nllm-transition-fast);
}

.com_hikashop .input-group > .input-password-toggle:hover,
.com_hikashop .input-group > button.btn-secondary:hover {
    background-color: var(--nllm-surface-edge);
    color: var(--nllm-text);
}

/* ── shop hikaradios (privacy "I agree" Yes/No toggle) ──────────────
 * [a:claude:opus-4.7-1m] shop emits the privacy-policy agreement as a
 * pair of radios with display:none + clickable labels styled via the
 * Bootstrap utility classes `btn-success` (Yes) and `btn-danger` (No).
 * Default rendering: bright green + bright red on the dark surface — loud
 * and ugly. Replace with a calm pill toggle that matches the rest of
 * the form.
 *
 *   ┌─────────────────────┐
 *   │ ◯ Yes, I agree │ No │   ← clean, neutral, active state = violet
 *   └─────────────────────┘
 */
.com_hikashop .hikaradios {
    display: inline-flex;
    gap: 0.25rem;
    padding: 4px;
    background-color: var(--nllm-surface);
    border: 1px solid var(--nllm-surface-soft);
    border-radius: var(--nllm-radius-md);
}

/* The hidden inputs stay hidden (they remain semantically the radio control). */
.com_hikashop .hikaradios input[type="radio"] {
    display: none !important;
}

/* The visible buttons are styled <label>s OR <span>s — shop varies.
 * Catch both common patterns: explicit .btn-success/.btn-danger or any
 * label sibling to the radio. */
.com_hikashop .hikaradios .btn-success,
.com_hikashop .hikaradios .btn-danger,
.com_hikashop .hikaradios label,
.com_hikashop .hikaradios span.btn,
.com_hikashop .hikaradios > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 1rem;
    background-color: transparent !important;
    color: var(--nllm-text-muted) !important;
    border: none !important;
    border-radius: var(--nllm-radius-sm);
    font-size: var(--nllm-text-sm);
    font-weight: 600;
    cursor: pointer;
    min-height: 36px;
    min-width: 56px;
    text-align: center;
    transition: background-color var(--nllm-transition-fast), color var(--nllm-transition-fast);
}

.com_hikashop .hikaradios .btn-success:hover,
.com_hikashop .hikaradios .btn-danger:hover,
.com_hikashop .hikaradios label:hover,
.com_hikashop .hikaradios span.btn:hover,
.com_hikashop .hikaradios > a:hover {
    background-color: rgba(124, 58, 237, 0.1) !important;
    color: var(--nllm-text) !important;
}

/* Active state — shop adds .btn-success or .active class to the chosen one. */
.com_hikashop .hikaradios .btn-success.active,
.com_hikashop .hikaradios .btn-danger.active,
.com_hikashop .hikaradios .active,
.com_hikashop .hikaradios input[type="radio"]:checked + label {
    background: var(--nllm-gradient) !important;
    color: #fff !important;
    box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
}

/* ── Registration form layout — keep info text and radios from overlapping ──
 * the shop's `.hikashop_registration_privacy_line` uses a Bootstrap-style
 * grid (.hkc-sm-4 label / .hkc-sm-8 input). The "Website Privacy" info
 * banner sits IN the same row visually but in a separate `.hikashop_privacy_text`
 * div above. At narrower breakpoints both stack incorrectly. */
.com_hikashop .hikashop_registration_privacy_line,
.com_hikashop .hkform-group.control-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--nllm-space-sm) var(--nllm-space-md);
    margin-bottom: var(--nllm-space-md);
}

.com_hikashop .hikashop_registration_privacy_line .hkcontrol-label,
.com_hikashop .hkform-group .hkcontrol-label {
    flex: 0 0 auto;
    min-width: 8rem;
    margin-bottom: 0;
}

.com_hikashop .hkc-sm-4 { flex: 0 0 auto; min-width: 8rem; }
.com_hikashop .hkc-sm-8 { flex: 1 1 auto; min-width: 0; }

/* The info-text block above the radio — its own row, full-width, calm. */
.com_hikashop .hikashop_privacy_text,
.com_hikashop .hikashop_register_privacy_text {
    flex: 1 1 100%;
    padding: var(--nllm-space-sm) var(--nllm-space-md);
    background-color: rgba(124, 58, 237, 0.06);
    border: 1px solid rgba(124, 58, 237, 0.2);
    border-radius: var(--nllm-radius-sm);
    color: var(--nllm-text-muted);
    font-size: var(--nllm-text-sm);
    line-height: 1.5;
    margin-bottom: var(--nllm-space-sm);
}

/* Custom select arrow visible on dark background */
.com_hikashop select {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23cbd5e1' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.25rem;
}

/* ── §2  LABELS + REQUIRED + VALIDATION ─────────────────────────────────── */

.com_hikashop label,
.com_hikashop .hkform-label,
.com_hikashop .hikashop_field_title {
    color: var(--nllm-text-muted);
    font-size: var(--nllm-text-sm);
    font-weight: 500;
    margin-bottom: 0.375rem;
    display: block;
}

.com_hikashop .hikashop_field_required,
.com_hikashop .required {
    color: var(--pc-status-blocked);
    margin-left: 0.2rem;
    font-size: 0.875em;
    vertical-align: super;
}

/* Inline validation pill — not bare red text */
.com_hikashop .hkform-error,
.com_hikashop .hikashop_red_msg,
.com_hikashop .invalid-feedback,
.com_hikashop span.hikashop_field_error {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background-color: rgba(220, 38, 38, 0.12);
    border: 1px solid rgba(220, 38, 38, 0.35);
    color: #fca5a5;
    font-size: 12px;
    font-weight: 500;
    padding: 0.25rem 0.625rem;
    border-radius: var(--nllm-radius-full);
    margin-top: 0.375rem;
}

.com_hikashop input.invalid,
.com_hikashop .hikashop_red_border {
    border-color: var(--pc-status-blocked) !important;
    box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.2) !important;
}

/* ── §3  CHECKOUT LAYOUT ──────────────────────────────────────────────── */

.com_hikashop .hikashop_checkout {
    max-width: 860px;
    margin: 0 auto;
    padding: var(--nllm-space-lg) var(--nllm-space-md);
}

.com_hikashop .hikashop_checkout_step {
    background-color: var(--nllm-surface);
    border: 1px solid var(--nllm-surface-soft);
    border-radius: var(--nllm-radius-md);
    padding: var(--nllm-space-lg);
    margin-bottom: var(--nllm-space-lg);
    box-shadow: var(--nllm-shadow-sm);
}

.com_hikashop .hikashop_checkout_step_title,
.com_hikashop .hikashop_checkout_step > legend {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--nllm-text);
    margin-bottom: var(--nllm-space-md);
    padding-bottom: var(--nllm-space-sm);
    border-bottom: 1px solid var(--nllm-surface-soft);
}

/* ── §4  LOGIN BLOCK ─────────────────────────────────────────────────── */

.neural-checkout__login-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--nllm-text);
    margin-bottom: var(--nllm-space-md);
}

/* Tab bar (display_method 0) — equal-width, prominent. The tabs ARE the
 * primary navigation for this whole block; previous tiny underline version
 * was too subtle and read as half-rendered radio buttons. */
.neural-checkout__login-tabs {
    display: grid;
    /* minmax(0, 1fr) so 1fr can shrink below the min-content width of
     * "Registration" — without minmax(0,...) the tab grew past 1fr at
     * narrow viewports, making tabs visibly unequal width. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0;
    background-color: var(--nllm-surface);
    border: 1px solid var(--nllm-surface-soft);
    border-radius: var(--nllm-radius-md);
    padding: 4px;
    margin-bottom: var(--nllm-space-lg);
}

.neural-checkout__login-tab {
    background: transparent;
    border: none;
    padding: 0.875rem 1rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--nllm-text-muted);
    cursor: pointer;
    border-radius: var(--nllm-radius-sm);
    transition: background-color var(--nllm-transition-fast), color var(--nllm-transition-fast), transform var(--nllm-transition-fast);
    min-height: 44px;
    letter-spacing: -0.01em;
}

.neural-checkout__login-tab:hover {
    color: var(--nllm-text);
    background-color: rgba(124, 58, 237, 0.08);
}

.neural-checkout__login-tab:focus-visible {
    outline: 2px solid var(--nllm-violet-soft);
    outline-offset: -2px;
}

.neural-checkout__login-tab--active,
.neural-checkout__login-tab--active:hover {
    background: var(--nllm-gradient);
    color: #fff;
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.35);
}

/* ── Override Joomla WebAuthn plugin's full-width passkey button ─────────
 * The plg_system_webauthn plugin renders `<button class="btn btn-secondary w-100 plg_system_webauthn_login_button">`
 * Bootstrap's `w-100` was making the passkey button 1152px wide on desktop —
 * dominating the form and reading as "huge full-width button" rather than
 * an alternate login option. Constrain to inline-flex, secondary visual weight. */
.com_hikashop .plg_system_webauthn_login_button,
.com_hikashop button.plg_system_webauthn_login_button,
.com_hikashop .plg_system_webauthn_login_button.w-100,
.com_hikashop .w-100.plg_system_webauthn_login_button {
    width: auto !important;
    max-width: 100%;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: var(--nllm-space-sm) auto 0 !important;
    padding: 0.5rem 1rem !important;
    background-color: transparent !important;
    color: var(--nllm-text-muted) !important;
    border: 1px solid var(--nllm-surface-edge) !important;
    border-radius: var(--nllm-radius-sm) !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    min-height: 36px;
    box-shadow: none !important;
    transition: border-color 200ms ease, color 200ms ease, background-color 200ms ease;
}

.com_hikashop .plg_system_webauthn_login_button:hover {
    border-color: var(--nllm-violet) !important;
    color: var(--nllm-violet-soft) !important;
    background-color: rgba(124, 58, 237, 0.08) !important;
}

/* [claude:opus-4.7-1m][client:2.1.152][hurc:v0.7.0] Passkey SVG — force white fill for legibility on dark surface.
 *
 * The plugin's inline SVG (<svg id="Passkey">) has no fill attribute,
 * so its <g><circle><path/></g> elements fall back to SVG's default
 * fill=black. On our dark form surface that renders as a near-invisible
 * dark blob even when the surrounding button text is light grey.
 *
 * We force fill:#fff on the icon explicitly (not via currentColor) so the
 * icon stays maximally legible regardless of the button label colour —
 * including on hover when the button text shifts to violet-soft. The
 * <g> wrapper selector is included because some browsers resolve fill
 * at the group level before cascading to children. */
.com_hikashop .plg_system_webauthn_login_button svg,
.com_hikashop .plg_system_webauthn_login_button svg g,
.com_hikashop .plg_system_webauthn_login_button svg circle,
.com_hikashop .plg_system_webauthn_login_button svg path {
    fill: #ffffff !important;
    color: #ffffff !important;
}

.com_hikashop .plg_system_webauthn_login_button svg {
    width: 1rem;
    height: 1rem;
}

/* ── com_users login — extra-auth buttons sized inline, not full-width white ──
 * [claude:opus-4.7-1m][client:2.1.152][hurc:v0.7.0] The Joomla com_users login view (route /topbar-signin) renders the
 * passkey button and the reset/remind/register links with Bootstrap classes
 * (`w-100`, `list-group-item`) that the brand sheet never reaches — so they
 * paint as a stack of full-width white blocks that read as broken buttons.
 *
 * This file is now also loaded on `com_users` pages (see templates/nllm/
 * index.php conditional asset loader), so the rules below scope the fix to
 * the `.com-users-login` block. The two selector families below cover BOTH
 * shapes the markup actually uses:
 *   1. Plan-spec `button.btn-secondary` / `button.plg_system_webauthn_login_button`
 *      inside `.com-users-login__submit` — future-proofs against Joomla
 *      moving the passkey button into the submit group.
 *   2. The real shipped DOM — the passkey `button` lives in `.controls`
 *      with class `w-100`, and the three "forgot/register" entries are
 *      `<a class="list-group-item">` anchors inside `.com-users-login__options`. */
.com-users-login__submit button.btn-secondary,
.com-users-login__submit button.plg_system_webauthn_login_button,
.com-users-login .controls button.plg_system_webauthn_login_button {
    width: auto !important;
    max-width: 100%;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: var(--nllm-space-sm) auto 0 !important;
    padding: 0.5rem 1rem;
    background: transparent;
    color: var(--template-link-color);
    border: 1px solid color-mix(in srgb, var(--template-link-color) 30%, transparent);
    border-radius: var(--nllm-radius-sm);
}

.com-users-login__submit button.btn-secondary:hover,
.com-users-login .controls button.plg_system_webauthn_login_button:hover {
    background: color-mix(in srgb, var(--template-link-color) 8%, transparent);
    color: var(--template-link-color);
}

/* The reset/remind/register links — Bootstrap `list-group-item` paints them
 * white and full-width. Render them as a centered inline row of quiet links
 * so they read as secondary navigation, not primary actions. */
.com-users-login__options.list-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.25rem 1.25rem;
    border: none;
    background: transparent;
    margin-top: var(--nllm-space-md);
}

.com-users-login__options .list-group-item {
    display: inline-flex;
    width: auto;
    padding: 0.25rem 0;
    background: transparent !important;
    border: none !important;
    color: var(--template-link-color);
    font-size: 0.875rem;
}

.com-users-login__options .list-group-item:hover {
    text-decoration: underline;
    color: var(--template-link-color);
    background: transparent !important;
}

/* Error/alert pills wrap gracefully instead of breaking mid-word. */
.com-users-login .invalid-feedback,
.com-users-login .alert {
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
}

/* Center the passkey row in the form so the secondary button doesn't read
 * as a primary action. */
.com_hikashop .plg_system_webauthn_login_button-container,
.com_hikashop .plg_system_webauthn_login_button_wrapper {
    text-align: center;
    margin-top: var(--nllm-space-sm);
}

/* ── the shop's primary Login button — was 93px wide, looked stunted ─────
 * Promote to full-width violet CTA inside the form so it reads as the
 * primary action (passkey button is now correctly demoted to secondary). */
.com_hikashop button.hikabtn_checkout_login_form,
.com_hikashop .hikabtn.hikabtn_checkout_login_form,
.com_hikashop button[name="login"],
.com_hikashop .login-button button.hikabtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.875rem 1.5rem;
    background: var(--nllm-gradient);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: var(--nllm-radius-md);
    box-shadow: 0 4px 24px rgba(124, 58, 237, 0.4);
    cursor: pointer;
    min-height: 44px;
    transition: transform 200ms ease, box-shadow 200ms ease, filter 200ms ease;
}

.com_hikashop button.hikabtn_checkout_login_form:hover,
.com_hikashop .hikabtn.hikabtn_checkout_login_form:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 32px rgba(124, 58, 237, 0.55);
    filter: brightness(1.05);
    color: #fff;
}

.neural-checkout__login-panel--hidden { display: none; }

/* [claude:opus-4.7-1m][client:2.1.152][hurc:v0.7.0] Cap the login/registration panels so the inputs
 * sit in a single comfortable column instead of stretching across the
 * full 860px checkout wrapper. Two-column registration grid below
 * naturally shrinks with the panel. */
.neural-checkout__login-panel { max-width: 480px; }

/* Switcher layout (display_method 1) */
.neural-checkout__login-options {
    display: flex;
    gap: var(--nllm-space-md);
    flex-wrap: wrap;
    margin-bottom: var(--nllm-space-md);
}

.neural-checkout__login-guest-info {
    display: flex;
    align-items: center;
    gap: var(--nllm-space-sm);
    background-color: var(--nllm-surface-soft);
    border-radius: var(--nllm-radius-sm);
    padding: 0.625rem var(--nllm-space-md);
    font-size: var(--nllm-text-sm);
    color: var(--nllm-text-muted);
}

/* ── §5  REGISTRATION FORM — two-column grid ──────────────────────────── */

.neural-reg__form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--nllm-space-md) var(--nllm-space-lg);
}

.neural-reg__form-grid .neural-reg__field-group--full,
.neural-reg__form-grid .hikashop_field_email,
.neural-reg__form-grid .hikashop_field_password {
    grid-column: 1 / -1;
}

.neural-reg__field-group { display: flex; flex-direction: column; }

.com_hikashop .hkform-group { margin-bottom: var(--nllm-space-md); }

/* ── §6  CART BLOCK ──────────────────────────────────────────────────── */

.neural-cart__items {
    display: flex;
    flex-direction: column;
    gap: var(--nllm-space-md);
    margin-bottom: var(--nllm-space-lg);
}

/* Four-column: [image 64px] [name flex] [pricing auto] [remove auto] */
.neural-cart__item {
    display: grid;
    grid-template-columns: 64px 1fr auto auto;
    gap: var(--nllm-space-md);
    align-items: center;
    background-color: var(--nllm-surface-soft);
    border-radius: var(--nllm-radius-md);
    padding: var(--nllm-space-md);
    border: 1px solid rgba(255, 255, 255, 0.04);
    transition: border-color var(--nllm-transition-fast), background-color var(--nllm-transition-fast);
}

.neural-cart__item:hover {
    border-color: rgba(124, 58, 237, 0.35);
}

/* Remove (×) cell — sits at far right of each cart row */
.neural-cart__item-remove {
    display: flex;
    align-items: center;
    justify-content: center;
}

.neural-cart__item-remove-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: var(--nllm-radius-full);
    border: 1px solid transparent;
    background: transparent;
    color: var(--nllm-text-subtle);
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: color var(--nllm-transition-fast),
                background-color var(--nllm-transition-fast),
                border-color var(--nllm-transition-fast),
                transform var(--nllm-transition-fast);
}

.neural-cart__item-remove-btn:hover,
.neural-cart__item-remove-btn:focus-visible {
    color: #fca5a5;
    background-color: rgba(220, 38, 38, 0.12);
    border-color: rgba(220, 38, 38, 0.4);
    transform: scale(1.05);
    outline: none;
}

.neural-cart__item-image {
    width: 64px;
    height: 64px;
    border-radius: var(--nllm-radius-sm);
    overflow: hidden;
    background-color: var(--nllm-violet-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.neural-cart__item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Placeholder when shop config has no product image */
.neural-cart__item-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--nllm-violet-pale);
    font-size: 1.5rem;
}

.neural-cart__item-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.neural-cart__item-name {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--nllm-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.neural-cart__item-meta {
    font-size: var(--nllm-text-sm);
    color: var(--nllm-text-subtle);
}

/* [claude:opus-4.7-1m][client:2.1.152][hurc:v0.7.0] Desktop pricing reads as a single inline phrase
 * "1 × $0.36" so the qty-times-unit suffix sits on the same baseline as
 * the total. Stacked-column rendering made the "1 ×" look like an
 * orphaned widget instead of pricing metadata. Mobile breakpoint below
 * reflows to a row aligned with the line-item grid. */
.neural-cart__item-pricing {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-end;
    gap: 0.4rem;
    white-space: nowrap;
}

.neural-cart__item-total {
    font-weight: 700;
    font-size: 1rem;
    color: var(--nllm-text);
    order: 2;
}

.neural-cart__item-unit {
    font-size: var(--nllm-text-sm);
    color: var(--nllm-text-subtle);
    order: 1;
}

.neural-cart__item-qty input[type="text"],
.neural-cart__item-qty input[type="number"] {
    width: 54px;
    text-align: center;
    padding: 0.25rem 0.375rem;
    font-size: var(--nllm-text-sm);
}

/* Cart totals */
.neural-cart__summary {
    background-color: var(--nllm-surface-soft);
    border-radius: var(--nllm-radius-md);
    padding: var(--nllm-space-md);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.neural-cart__summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: var(--nllm-text-sm);
    color: var(--nllm-text-muted);
}

.neural-cart__summary-row:last-child { border-bottom: none; }

.neural-cart__summary-row--total {
    font-weight: 700;
    font-size: 1rem;
    color: var(--nllm-text);
    padding-top: var(--nllm-space-sm);
    border-top: 2px solid var(--nllm-surface-edge);
}

.neural-cart__summary-row--total .neural-cart__summary-amount {
    color: var(--nllm-violet-soft);
}

/* ── §7  PAYMENT METHOD CARDS ─────────────────────────────────────────── */

.neural-payment__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--nllm-space-md);
    margin-bottom: var(--nllm-space-md);
}

.neural-payment__card {
    background-color: var(--nllm-surface-soft);
    border: 2px solid var(--nllm-surface-edge);
    border-radius: var(--nllm-radius-md);
    padding: var(--nllm-space-md);
    cursor: pointer;
    position: relative;
    transition: border-color var(--nllm-transition-fast), box-shadow var(--nllm-transition-fast), background-color var(--nllm-transition-fast);
    display: flex;
    align-items: flex-start;
    gap: var(--nllm-space-sm);
}

.neural-payment__card:hover {
    border-color: var(--nllm-violet);
    background-color: rgba(124, 58, 237, 0.05);
}

.neural-payment__card--selected {
    border-color: var(--nllm-violet);
    background-color: rgba(124, 58, 237, 0.08);
    box-shadow: var(--nllm-shadow-sm);
}

/* Hide native radio but keep accessible */
.neural-payment__card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Custom radio dot */
.neural-payment__radio-dot {
    width: 18px;
    height: 18px;
    border: 2px solid var(--nllm-surface-edge);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 2px;
    transition: border-color var(--nllm-transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.neural-payment__card--selected .neural-payment__radio-dot {
    border-color: var(--nllm-violet);
    background-color: var(--nllm-violet);
    box-shadow: inset 0 0 0 4px var(--nllm-surface-soft);
}

.neural-payment__card-body { flex: 1; min-width: 0; }

.neural-payment__card-name {
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--nllm-text);
    margin-bottom: 0.25rem;
}

.neural-payment__card-fee { font-size: 12px; color: var(--nllm-text-subtle); }

.neural-payment__form {
    background-color: var(--nllm-surface-soft);
    border: 1px solid var(--nllm-surface-edge);
    border-radius: var(--nllm-radius-md);
    padding: var(--nllm-space-md);
    margin-top: var(--nllm-space-sm);
    /* [claude:opus-4.7-1m][client:2.1.152][hurc:v0.7.0] Span the full row of .neural-payment__list grid.
     * The CC field container is a grid sibling of payment cards, so without
     * this it gets one ~220px column — clamping the dd/inputs inside to ~94px
     * and stacking mm/yy/CVV vertically. */
    grid-column: 1 / -1;
}

/* [claude:opus-4.7-1m][client:2.1.152][hurc:v0.7.0] shop renders this container for every payment
 * method, but methods with no inline form (Authorize.Net hosted, PayPal
 * Standard, COD, etc.) leave it empty. Collapse so users don't see a
 * meaningless grey strip floating below the selected card. */
.neural-payment__form:empty { display: none; }

/* [claude:opus-4.7-1m][client:2.1.152][hurc:v0.7.0] authorize_recurring renders CC inputs as a
 * <dl class="hika_options large"> with one <dt>/<dd> pair per field. The dd
 * defaults to shrink-fit (~94px). Force the dd to fill, restyle the inputs
 * to match the Neural form aesthetic, lay mm/yy/CVV horizontally. */
.neural-payment__form .hika_options {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--nllm-space-sm) var(--nllm-space-md);
    align-items: end;
    /* [claude:opus-4.7-1m][client:2.1.152][hurc:v0.7.0] dense packing so the CVV dt (explicit col 2) backfills row 3 col 2
     * instead of starting a new row below mm/yy. Without it, default row-flow
     * leaves col 2 empty on the exp-label row and CVV stacks below. */
    grid-auto-flow: dense;
    /* [claude:opus-4.8-1m][client:2.1.168][hurc:v0.10.1] Grid items default to min-width:auto (= min-content), so a wide
     * card-number/CVV input expands its 1fr track PAST the card's right edge
     * (the overflow bug). min-width:0 lets the tracks shrink to the container. */
    min-width: 0;
}

/* [claude:opus-4.8-1m][client:2.1.168][hurc:v0.10.1] Same min-content guard on the field cells + a hard width cap on the
 * inputs so neither the dd cell nor the <input> can push past the card edge. */
.neural-payment__form .hika_options dt,
.neural-payment__form .hika_options dd {
    min-width: 0;
}

.neural-payment__form .hika_options input {
    max-width: 100%;
    box-sizing: border-box;
}

.neural-payment__form .hika_options dt {
    grid-column: 1 / -1;
    margin: 0 0 0.25rem 0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--nllm-text-subtle);
    text-transform: none;
}

.neural-payment__form .hika_options dt label {
    color: var(--nllm-text);
    font-weight: 500;
}

.neural-payment__form .hika_options dd {
    grid-column: 1 / -1;
    margin: 0;
    padding: 0;
    width: 100%;
}

.neural-payment__form .hika_options input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    height: 42px;
    padding: 0.6rem 0.8rem;
    background-color: var(--nllm-surface);
    border: 1px solid var(--nllm-surface-edge);
    border-radius: var(--nllm-radius-sm);
    color: var(--nllm-text);
    font-size: 0.9375rem;
    font-family: inherit;
    transition: border-color var(--nllm-transition-fast), box-shadow var(--nllm-transition-fast);
}

.neural-payment__form .hika_options input[type="text"]:focus {
    outline: none;
    border-color: var(--nllm-violet);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

/* mm + yy (split across 2 dt/dd pairs) and CVV — line them up. The vendor
 * uses separate dt/dd pairs, so target by content-shape via :has(). */
.neural-payment__form .hika_options dt:has(+ dd input.card_expiration_date_input) {
    grid-column: 1 / span 1;
}

.neural-payment__form .hika_options dd:has(input.card_expiration_date_input) {
    grid-column: 1 / span 1;
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.neural-payment__form .hika_options dd:has(input.card_expiration_date_input) input {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}

.neural-payment__form .hika_options dt:has(+ dd input[data-authorizejs="cardCode"]) {
    grid-column: 2 / span 1;
}

.neural-payment__form .hika_options dd:has(input[data-authorizejs="cardCode"]) {
    grid-column: 2 / span 1;
}

.neural-payment__form .hika_options dd:has(input[data-authorizejs="cardCode"]) input {
    max-width: 120px;
}

.neural-payment__submit {
    margin-top: var(--nllm-space-md);
    display: flex;
    justify-content: flex-end;
}

.neural-payment__submit-btn {
    padding: 0.7rem 1.5rem;
    background: var(--nllm-violet);
    color: #fff;
    border: none;
    border-radius: var(--nllm-radius-sm);
    font-weight: 600;
    cursor: pointer;
    transition: filter var(--nllm-transition-fast);
}

.neural-payment__submit-btn:hover {
    filter: brightness(1.08);
}

/* ── §8  COUPON BLOCK ────────────────────────────────────────────────── */

/* [claude:opus-4.7-1m][client:2.1.152][hurc:v0.7.0] Cap coupon row width so the input+button pair sits
 * as a compact discrete control instead of stretching across the full
 * 860px checkout column like an alarming primary form. */
.neural-checkout__coupon-form {
    display: flex;
    gap: var(--nllm-space-sm);
    align-items: flex-start;
    max-width: 380px;
}

.neural-checkout__coupon-form input[type="text"] { flex: 1; min-width: 0; }

.neural-checkout__coupon-applied {
    display: flex;
    align-items: center;
    gap: var(--nllm-space-sm);
}

.neural-checkout__coupon-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background-color: rgba(124, 58, 237, 0.12);
    border: 1px solid rgba(124, 58, 237, 0.3);
    color: var(--nllm-violet-pale);
    font-size: var(--nllm-text-sm);
    font-weight: 500;
    padding: 0.25rem 0.75rem;
    border-radius: var(--nllm-radius-full);
}

.neural-checkout__coupon-remove {
    color: var(--nllm-text-subtle);
    text-decoration: none;
    transition: color var(--nllm-transition-fast);
    padding: 0.25rem;
    border-radius: var(--nllm-radius-sm);
}

.neural-checkout__coupon-remove:hover { color: var(--pc-status-blocked); }

/* ── §9  TERMS BLOCK ─────────────────────────────────────────────────── */

.neural-checkout__terms {
    display: flex;
    align-items: flex-start;
    gap: var(--nllm-space-sm);
    padding: var(--nllm-space-md);
    background-color: var(--nllm-surface-soft);
    border: 1px solid var(--nllm-surface-edge);
    border-radius: var(--nllm-radius-md);
}

/* Styled checkbox for dark mode */
.neural-checkout__terms-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px;
    border: 2px solid var(--nllm-surface-edge) !important;
    border-radius: 4px !important;
    background-color: var(--nllm-surface) !important;
    cursor: pointer;
    transition: border-color var(--nllm-transition-fast), background-color var(--nllm-transition-fast);
    flex-shrink: 0;
    margin-top: 2px;
    position: relative;
}

.neural-checkout__terms-checkbox:checked {
    background-color: var(--nllm-violet) !important;
    border-color: var(--nllm-violet) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='10' viewBox='0 0 14 10'%3E%3Cpath d='M1 5l4 4 8-8' stroke='%23ffffff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 10px;
}

.neural-checkout__terms-checkbox:focus {
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.25) !important;
    outline: none !important;
}

.neural-checkout__terms label {
    font-size: var(--nllm-text-sm);
    color: var(--nllm-text-muted);
    cursor: pointer;
    line-height: 1.5;
    margin-bottom: 0;
}

.neural-checkout__terms label a { color: var(--nllm-violet-soft); text-decoration: underline; text-underline-offset: 3px; }
.neural-checkout__terms label a:hover { color: var(--nllm-violet-pale); }

/* ── §10  NAVIGATION BUTTONS ─────────────────────────────────────────── */

.neural-checkout__buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--nllm-space-sm);
    margin-top: var(--nllm-space-lg);
    flex-wrap: wrap;
}

.neural-checkout__buttons-left { display: flex; gap: var(--nllm-space-sm); flex-wrap: wrap; }
.neural-checkout__buttons-right { display: flex; gap: var(--nllm-space-sm); flex-wrap: wrap; }

/* ── §11  NEURAL-LLM BUTTON SYSTEM ──────────────────────────────────── */

.neural-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: 1.5px solid transparent;
    border-radius: var(--nllm-radius-md);
    padding: 0.625rem 1.25rem;
    font-size: var(--nllm-text-sm);
    font-weight: 600;
    font-family: var(--nllm-font-sans);
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--nllm-transition-fast), border-color var(--nllm-transition-fast), box-shadow var(--nllm-transition-fast), transform var(--nllm-transition-fast);
    white-space: nowrap;
    user-select: none;
}

.neural-btn:focus-visible { outline: 3px solid rgba(124, 58, 237, 0.45); outline-offset: 2px; }

.neural-btn--primary { background: var(--nllm-gradient-soft); color: #ffffff; border-color: transparent; }
.neural-btn--primary:hover { filter: brightness(1.08); box-shadow: var(--nllm-shadow-md); transform: translateY(-1px); }
.neural-btn--primary:active { filter: brightness(0.96); transform: none; }

.neural-btn--outline { background-color: transparent; color: var(--nllm-violet-soft); border-color: var(--nllm-violet); }
.neural-btn--outline:hover { background-color: rgba(124, 58, 237, 0.08); border-color: var(--nllm-violet-soft); color: var(--nllm-violet-pale); }

.neural-btn--lg { padding: 0.875rem 2rem; font-size: 1rem; border-radius: var(--nllm-radius-lg); }
.neural-btn--sm { padding: 0.375rem 0.75rem; font-size: 12px; border-radius: var(--nllm-radius-sm); }
.neural-btn--block { width: 100%; }

/* CTA — bolt gradient for "Finish" / primary conversion action */
.neural-btn--cta {
    background: var(--pc-bolt-gradient);
    color: var(--nllm-text-on-light);
    border-color: transparent;
    font-weight: 700;
    letter-spacing: 0.01em;
}
.neural-btn--cta:hover { filter: brightness(1.06); box-shadow: 0 6px 24px rgba(245, 158, 11, 0.3); transform: translateY(-1px); }

/* ── §12  DISCLAIMER BAR in checkout blocks ───────────────────────────── */

.neural-checkout__disclaimer {
    margin-top: var(--nllm-space-lg);
    padding: var(--nllm-space-sm) var(--nllm-space-md);
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--nllm-radius-sm);
    font-size: 11px;
    color: var(--nllm-text-subtle);
    text-align: center;
    line-height: 1.4;
}

/* ── §13  HIKASHOP NATIVE OVERRIDES ──────────────────────────────────── */

.com_hikashop fieldset legend {
    color: var(--nllm-text);
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 0 0.375rem;
    background: transparent;
    float: none;
    width: auto;
}

.com_hikashop table td,
.com_hikashop table th {
    background-color: transparent;
    color: var(--nllm-text-muted);
    border-color: var(--nllm-surface-soft);
}

.com_hikashop table th {
    color: var(--nllm-text-subtle);
    font-size: var(--nllm-text-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* hikabtn — brand styling on top of shop defaults */
.com_hikashop .hikabtn {
    border-radius: var(--nllm-radius-md);
    font-family: var(--nllm-font-sans);
    font-weight: 600;
    transition: background-color var(--nllm-transition-fast), border-color var(--nllm-transition-fast);
}

.com_hikashop .hikabtn-success,
.com_hikashop .hikabtn_checkout_next {
    background: var(--nllm-gradient-soft);
    color: #ffffff;
    border-color: transparent;
}

.com_hikashop .hikabtn-success:hover,
.com_hikashop .hikabtn_checkout_next:hover {
    filter: brightness(1.08);
    box-shadow: var(--nllm-shadow-md);
}

/* ── §13b  CHECKOUT STEP ACCORDION (numbered step banner) ──────────────── *
 * the shop's frontend_default.css renders the "(N) Step" header as a solid
 *   #337ab7 blue bar (`.hikashop_cart_step_current`) with white text and
 *   white-on-blue circular badge — Bootstrap 3 vintage, not our brand.
 * The "finished" state is bright green #5cb85c. Override both with brand
 * tokens. Specificity ladder: shop core uses 0,0,2,0
 *   (.hikashop_accordion_default_before .hikashop_cart_step_current);
 * `.com_hikashop` prefix bumps ours to 0,0,3,0 so cascade is deterministic
 * regardless of stylesheet load order. */

.com_hikashop .hikashop_accordion_default_before,
.com_hikashop .hikashop_accordion_default_after,
.com_hikashop .hikashop_accordion_light_before,
.com_hikashop .hikashop_accordion_light_after {
    display: flex;
    flex-direction: column;
    gap: var(--nllm-space-sm);
    margin-bottom: var(--nllm-space-lg);
}

/* Step row — replaces the blue/green/grey block backgrounds with brand
 * surface + accent left-border. Padding/radius added for the brand look. */
.com_hikashop .hikashop_accordion_default_before .hikashop_cart_step_current,
.com_hikashop .hikashop_accordion_default_before .hikashop_cart_step_finished,
.com_hikashop .hikashop_accordion_default_before > div,
.com_hikashop .hikashop_accordion_default_after > div {
    background-color: var(--nllm-surface);
    border: 1px solid var(--nllm-surface-soft);
    border-left: 4px solid var(--nllm-surface-edge);
    border-radius: var(--nllm-radius-md);
    margin-top: 0;
    padding: var(--nllm-space-sm) var(--nllm-space-md);
    display: flex;
    align-items: center;
    gap: var(--nllm-space-sm);
}

/* Current step gets violet accent + glow */
.com_hikashop .hikashop_accordion_default_before .hikashop_cart_step_current,
.com_hikashop .hikashop_accordion_default_after .hikashop_cart_step_current,
.com_hikashop .hikashop_accordion_default_after > div.hikashop_cart_step_current {
    background:
        linear-gradient(90deg, rgba(124, 58, 237, 0.18) 0%, transparent 60%),
        var(--nllm-surface);
    border-left-color: var(--nllm-violet);
    box-shadow: var(--nllm-shadow-sm);
}

/* Finished step gets flowing-green accent */
.com_hikashop .hikashop_accordion_default_before .hikashop_cart_step_finished,
.com_hikashop .hikashop_accordion_default_after .hikashop_cart_step_finished,
.com_hikashop .hikashop_accordion_default_after > div.hikashop_cart_step_finished {
    background-color: var(--nllm-surface);
    border-left-color: var(--pc-status-flowing);
}

/* Step name text (was #fff on blue) */
.com_hikashop .hikashop_accordion_default_before span.hikashop_checkout_step_name,
.com_hikashop .hikashop_accordion_default_after span.hikashop_checkout_step_name,
.com_hikashop .hikashop_accordion_light_before span.hikashop_checkout_step_name,
.com_hikashop .hikashop_accordion_light_after span.hikashop_checkout_step_name {
    color: var(--nllm-text);
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0;
    width: auto;
}

.com_hikashop .hikashop_accordion_default_before span.hikashop_checkout_step_name a,
.com_hikashop .hikashop_accordion_default_after span.hikashop_checkout_step_name a {
    color: var(--nllm-text);
    text-decoration: none;
}

.com_hikashop .hikashop_accordion_default_before span.hikashop_checkout_step_name a:hover,
.com_hikashop .hikashop_accordion_default_after span.hikashop_checkout_step_name a:hover {
    color: var(--nllm-violet-soft);
}

/* Number badge — was white circle with blue digit. Now brand-surface
 * with violet ring for current, flowing-green for finished. */
.com_hikashop .hikashop_accordion_default_before .hkbadge,
.com_hikashop .hikashop_accordion_default_after .hkbadge {
    width: 32px;
    height: 32px;
    min-width: 32px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: var(--nllm-radius-full);
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--nllm-surface-soft);
    color: var(--nllm-text-muted);
    border: 2px solid var(--nllm-surface-edge);
}

.com_hikashop .hikashop_accordion_default_before .hkbadge-current,
.com_hikashop .hikashop_accordion_default_after .hkbadge-current {
    background-color: var(--nllm-violet);
    color: #ffffff;
    border-color: var(--nllm-violet);
    box-shadow: 0 0 12px rgba(124, 58, 237, 0.5);
    margin: 0;
}

.com_hikashop .hikashop_accordion_default_before .hkbadge-past,
.com_hikashop .hikashop_accordion_default_after .hkbadge-past {
    background-color: var(--pc-status-flowing);
    color: #ffffff;
    border-color: var(--pc-status-flowing);
}

/* Light variant (less common, present for completeness) */
.com_hikashop .hikashop_accordion_light_before .hikashop_cart_step_current,
.com_hikashop .hikashop_accordion_light_after div {
    border-color: var(--nllm-surface-soft);
    border-bottom: 3px solid var(--nllm-violet);
}

.com_hikashop .hikashop_accordion_light_before .hikashop_cart_step_finished {
    border-bottom: 3px solid var(--pc-status-flowing);
}

/* ── §13c  ADDRESS SELECTOR DROPDOWN ──────────────────────────────────── *
 * The "Billing address" picker in checkout is rendered by shop as:
 *   <select class="hikashop_field_dropdown" id="hikashop_checkout_address_billing_selector">
 * It bypasses Bootstrap's `.form-select` class so our generic Bootstrap-
 * override styling (template.css line ~540) doesn't reach it. Apply the
 * same dark-theme treatment + brand arrow SVG here. */

.com_hikashop select.hikashop_field_dropdown,
.com_hikashop .hikashop_checkout_address_left select,
.com_hikashop .hikashop_checkout_address_right select,
.com_hikashop select[id^="hikashop_checkout_address"],
.com_hikashop select[id^="hikashop_address"] {
    width: 100%;
    background-color: var(--nllm-surface);
    color: var(--nllm-text);
    border: 1px solid var(--nllm-surface-soft);
    border-radius: var(--nllm-radius-sm);
    padding: 0.5rem 2.25rem 0.5rem 0.75rem;
    font-size: var(--nllm-text-body);
    line-height: 1.5;
    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;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.com_hikashop select.hikashop_field_dropdown:focus,
.com_hikashop .hikashop_checkout_address_left select:focus,
.com_hikashop .hikashop_checkout_address_right select:focus,
.com_hikashop select[id^="hikashop_checkout_address"]:focus,
.com_hikashop select[id^="hikashop_address"]:focus {
    outline: none;
    border-color: var(--nllm-violet);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.25);
}

.com_hikashop select.hikashop_field_dropdown option,
.com_hikashop .hikashop_checkout_address_left select option,
.com_hikashop .hikashop_checkout_address_right select option,
.com_hikashop select[id^="hikashop_checkout_address"] option,
.com_hikashop select[id^="hikashop_address"] option {
    background-color: var(--nllm-surface);
    color: var(--nllm-text);
}

/* [claude:opus-4.7-1m][client:2.1.152][hurc:v0.7.0] Place billing (left) and shipping (right) side by
 * side on desktop instead of letting them stack and waste 50% of the
 * checkout column. minmax(0, 1fr) prevents long address strings from
 * blowing out the grid track. Mobile breakpoint below reflows to a
 * single column. */
.com_hikashop .hikashop_checkout_address {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--nllm-space-md);
    align-items: start;
}

/* Address-pick container (the row that holds the selector + edit/delete
 * icons). shop applies bare display styling; ensure spacing matches
 * the rest of the checkout step. */
.com_hikashop .hikashop_checkout_address_left,
.com_hikashop .hikashop_checkout_address_right,
.com_hikashop .hikashop_address_select {
    background-color: transparent;
    padding: 0;
    margin-bottom: var(--nllm-space-md);
}

/* ── §13d  .hika_edit ADDRESS-PICK ROW (the actual white strip) ──────── *
 * The "white strip" reported on /checkout is `<div class="hika_edit">`
 * containing a bare <input type="radio"> + Edit/Delete <a> links.
 * the shop's frontend_default.css line 8 hard-codes
 *   .hika_edit { background-color: #f9f9f9; padding: 4px; }
 * Specificity 0,0,1,0 — beat with `.com_hikashop .hika_edit` (0,0,2,0).
 *
 * The radio inside this row is a NATIVE <input type="radio"> with no
 * Bootstrap `.form-check-input` class, so our template.css form-check
 * styling doesn't reach it. Style it directly via descendant selector. */

.com_hikashop .hika_edit {
    background-color: var(--nllm-surface);
    border: 1px solid var(--nllm-surface-soft);
    border-radius: var(--nllm-radius-sm);
    padding: var(--nllm-space-sm) var(--nllm-space-md);
    display: flex;
    align-items: center;
    gap: var(--nllm-space-sm);
    text-align: left;
    margin-bottom: var(--nllm-space-sm);
}

/* Bare radio inside .hika_edit — appearance:none + brand fill on :checked.
 * Mirrors the .form-check-input pattern from template.css so the whole
 * site has one visual language for radios. */
.com_hikashop .hika_edit input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    padding: 0;  /* defeats template.css `.hikashop_checkout_page input { padding: 0.6rem 0.8rem; }` which would bloat the radio to ~27x21 */
    background-color: var(--nllm-surface);
    border: 1px solid var(--nllm-surface-edge);
    border-radius: 50%;
    flex-shrink: 0;
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: border-color var(--nllm-transition-fast), background-color var(--nllm-transition-fast);
    float: none;
}

.com_hikashop .hika_edit input[type="radio"]:hover {
    border-color: var(--nllm-violet-soft);
}

.com_hikashop .hika_edit input[type="radio"]:focus-visible {
    outline: none;
    border-color: var(--nllm-violet);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.25);
}

.com_hikashop .hika_edit input[type="radio"]:checked {
    background-color: var(--nllm-violet);
    border-color: var(--nllm-violet);
    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");
}

/* Edit / Delete links inside .hika_edit — use brand link colors and add
 * a little spacing so they don't crowd the radio. */
.com_hikashop .hika_edit a {
    color: var(--nllm-violet-soft);
    text-decoration: none;
    margin-inline-start: auto;
    padding: 0 var(--nllm-space-xs);
    font-size: var(--nllm-text-sm);
    display: inline-flex;
    align-items: center;
    gap: var(--nllm-space-xs);
}

.com_hikashop .hika_edit a:hover {
    color: var(--nllm-cyan-bright);
}

.com_hikashop .hika_edit a i {
    font-size: 0.9rem;
}

/* Also apply the same treatment to .hika_address_element (the parent
 * wrapper) which shop sometimes uses for the address row. */
.com_hikashop .hika_address_element {
    background-color: transparent;
}

.com_hikashop .hika_address_element .hika_edit input[type="radio"] {
    float: none;
}

/* ── §14  RESPONSIVE ─────────────────────────────────────────────────── */

@media (max-width: 640px) {
    /*
     * Cart row at mobile — three-column grid, two rows:
     *
     *   Row 1:  [image 48px] [name + meta — spans cols 2-3] [— — —]
     *   Row 2:  [pricing — spans cols 1-2 — flex right]    [× 32px]
     *
     * Pricing and × share row 2 but in DIFFERENT columns — no overlap.
     * Avoids the "× alone on its own line" complaint at narrow viewports. */
    .neural-cart__item {
        grid-template-columns: 48px 1fr auto;
        grid-template-rows: auto auto;
        gap: var(--nllm-space-sm) var(--nllm-space-md);
    }

    .neural-cart__item-image  { width: 48px; height: 48px; grid-column: 1; grid-row: 1; }
    .neural-cart__item-details { grid-column: 2 / -1; grid-row: 1; }

    .neural-cart__item-pricing {
        grid-column: 1 / 3;
        grid-row: 2;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        gap: var(--nllm-space-sm);
        padding-top: var(--nllm-space-sm);
        border-top: 1px solid rgba(255, 255, 255, 0.05);
    }

    .neural-cart__item-remove {
        grid-column: 3;
        grid-row: 2;
        align-self: center;
        padding-top: var(--nllm-space-sm);
        border-top: 1px solid rgba(255, 255, 255, 0.05);
    }

    .neural-cart__item-remove-btn {
        width: 32px;
        height: 32px;
        font-size: 1.125rem;
    }

    .neural-reg__form-grid { grid-template-columns: 1fr; }
    .neural-payment__list { grid-template-columns: 1fr; }

    /* [claude:opus-4.7-1m][client:2.1.152][hurc:v0.7.0] Collapse billing/shipping side-by-side grid on
     * mobile — viewport too narrow for two address columns to be legible. */
    .com_hikashop .hikashop_checkout_address {
        grid-template-columns: 1fr;
        gap: var(--nllm-space-sm);
    }

    /* [claude:opus-4.7-1m][client:2.1.152][hurc:v0.7.0] Coupon row already collapses to full width on
     * mobile; remove the desktop max-width cap so the stacked input and
     * button can use the available column. */
    .neural-checkout__coupon-form {
        flex-direction: column;
        max-width: none;
    }
    .neural-checkout__coupon-form .neural-btn { width: 100%; }

    /* [claude:opus-4.7-1m][client:2.1.152][hurc:v0.7.0] Login/registration panel uses the full viewport
     * width on mobile rather than the 480px desktop cap. */
    .neural-checkout__login-panel { max-width: none; }

    .neural-checkout__buttons { flex-direction: column-reverse; }
    .neural-checkout__buttons-left,
    .neural-checkout__buttons-right { width: 100%; }
    .neural-checkout__buttons-right .neural-btn { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
 * §15  THANK-YOU / ACTIVATION PAGE (templates/.../checkout/after_end.php)
 *
 * Post-purchase landing page. Hero confirmation → big "Activate in
 * VS Code" CTA → manual key fallback → tier/seats/expiry meta → email
 * reassurance → account nav. Mirrors the marketing-page aesthetic
 * (violet gradient hero, surface cards with violet hover glow).
 * ══════════════════════════════════════════════════════════════════════════ */

.neural-thanks {
    max-width: 720px;
    margin: 0 auto;
    padding: var(--nllm-space-xl) var(--nllm-space-md);
    display: flex;
    flex-direction: column;
    gap: var(--nllm-space-lg);
}

/* ── Hero confirmation banner ─────────────────────────────────────────── */

.neural-thanks__hero {
    text-align: center;
    padding: var(--nllm-space-xl) var(--nllm-space-md);
    background:
        radial-gradient(ellipse at top, rgba(124, 58, 237, 0.18), transparent 65%),
        var(--nllm-surface);
    border: 1px solid var(--nllm-surface-soft);
    border-radius: var(--nllm-radius-lg);
    position: relative;
    overflow: hidden;
}

.neural-thanks__hero::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--nllm-gradient);
    border-top-left-radius: var(--nllm-radius-lg);
    border-top-right-radius: var(--nllm-radius-lg);
}

.neural-thanks__hero-icon {
    font-size: 2.5rem;
    line-height: 1;
    background: var(--pc-bolt-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 4px 12px rgba(245, 158, 11, 0.4));
    margin-bottom: var(--nllm-space-sm);
}

.neural-thanks__title {
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    font-weight: 700;
    line-height: 1.15;
    color: var(--nllm-text);
    margin: 0 0 var(--nllm-space-sm);
    letter-spacing: -0.02em;
}

.neural-thanks__subtitle {
    font-size: var(--nllm-text-body);
    color: var(--nllm-text-muted);
    max-width: 32rem;
    margin: 0 auto;
}

.neural-thanks__subtitle strong { color: var(--nllm-text); }

/* ── Cards (primary CTA + manual-key fallback) ────────────────────────── */

.neural-thanks__card {
    background-color: var(--nllm-surface);
    border: 1px solid var(--nllm-surface-soft);
    border-radius: var(--nllm-radius-lg);
    padding: var(--nllm-space-lg);
    transition: border-color var(--nllm-transition-fast), box-shadow var(--nllm-transition-fast);
}

.neural-thanks__card:hover {
    border-color: rgba(124, 58, 237, 0.35);
}

.neural-thanks__card--primary {
    /* The "Activate in VS Code" card stands out with violet ring */
    background:
        linear-gradient(180deg, rgba(124, 58, 237, 0.06), transparent 60%),
        var(--nllm-surface);
    border-color: rgba(124, 58, 237, 0.35);
    box-shadow: 0 8px 32px rgba(124, 58, 237, 0.12);
}

.neural-thanks__card--pending {
    border-color: rgba(245, 158, 11, 0.35);
    background:
        linear-gradient(180deg, rgba(245, 158, 11, 0.04), transparent 60%),
        var(--nllm-surface);
}

.neural-thanks__card-header {
    margin-bottom: var(--nllm-space-md);
}

.neural-thanks__card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--nllm-text);
    margin: 0 0 0.375rem;
}

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

.neural-thanks__card-lead a {
    color: var(--nllm-violet-soft);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.neural-thanks__card-lead a:hover { color: var(--nllm-cyan-bright); }

/* ── Activate-in-VS-Code button (the conversion moment) ──────────────── */

.neural-thanks__cta-row {
    display: flex;
    flex-direction: column;
    gap: var(--nllm-space-sm);
    align-items: stretch;
}

.neural-thanks__activate-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--nllm-space-sm);
    padding: 0.875rem 1.5rem;
    background: var(--nllm-gradient);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    border: none;
    border-radius: var(--nllm-radius-md);
    box-shadow:
        0 4px 24px rgba(124, 58, 237, 0.4),
        0 0 0 1px rgba(255, 255, 255, 0.08) inset;
    cursor: pointer;
    transition: transform var(--nllm-transition-fast), box-shadow var(--nllm-transition-fast), filter var(--nllm-transition-fast);
    min-height: 44px;
}

.neural-thanks__activate-btn:hover,
.neural-thanks__activate-btn:focus-visible {
    transform: translateY(-2px);
    box-shadow:
        0 8px 32px rgba(124, 58, 237, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.16) inset;
    filter: brightness(1.05);
    color: #fff;
    outline: none;
}

.neural-thanks__activate-btn--secondary {
    background: var(--nllm-surface-soft);
    color: var(--nllm-text);
    box-shadow: 0 0 0 1px var(--nllm-surface-edge) inset;
}

.neural-thanks__activate-btn--secondary:hover {
    background: var(--nllm-surface-edge);
    box-shadow: 0 0 0 1px var(--nllm-violet) inset;
}

.neural-thanks__activate-btn-icon {
    font-size: 1.25rem;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

.neural-thanks__activate-btn-text {
    /* Allow break on small screens */
    text-align: center;
}

.neural-thanks__activate-help {
    text-align: center;
    font-size: var(--nllm-text-sm);
    color: var(--nllm-text-subtle);
    margin: 0;
}

.neural-thanks__activate-help a,
.neural-thanks__activate-help-link {
    color: var(--nllm-violet-soft);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.neural-thanks__activate-help-link {
    display: inline-block;
    align-self: center;
    margin-top: var(--nllm-space-sm);
}

/* ── Copyable JWT field ──────────────────────────────────────────────── */

.neural-thanks__key-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--nllm-space-sm);
    align-items: start;
}

.neural-thanks__key {
    background-color: var(--nllm-surface-deep);
    color: var(--nllm-cyan-pale);
    border: 1px solid var(--nllm-surface-edge);
    border-radius: var(--nllm-radius-sm);
    padding: 0.75rem 0.875rem;
    font-family: var(--nllm-font-mono);
    font-size: 0.8125rem;
    line-height: 1.5;
    word-break: break-all;
    white-space: pre-wrap;
    width: 100%;
    resize: vertical;
    min-height: 5.5rem;
    transition: border-color var(--nllm-transition-fast), box-shadow var(--nllm-transition-fast);
}

.neural-thanks__key:focus {
    outline: none;
    border-color: var(--nllm-violet);
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.25);
}

.neural-thanks__key--highlight {
    animation: neural-thanks-flash 2.2s ease-out;
}

@keyframes neural-thanks-flash {
    0%   { box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.5); }
    100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
}

.neural-thanks__copy-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.625rem 1rem;
    background-color: var(--nllm-surface-soft);
    color: var(--nllm-text);
    border: 1px solid var(--nllm-surface-edge);
    border-radius: var(--nllm-radius-sm);
    font-size: var(--nllm-text-sm);
    font-weight: 500;
    cursor: pointer;
    min-height: 44px;
    min-width: 84px;
    transition: background-color var(--nllm-transition-fast), border-color var(--nllm-transition-fast);
    overflow: hidden;
}

.neural-thanks__copy-btn:hover,
.neural-thanks__copy-btn:focus-visible {
    background-color: var(--nllm-surface-edge);
    border-color: var(--nllm-violet);
    outline: none;
}

.neural-thanks__copy-btn-default,
.neural-thanks__copy-btn-success {
    transition: opacity 200ms ease, transform 200ms ease;
}

.neural-thanks__copy-btn-success {
    position: absolute;
    inset: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--pc-status-flowing);
    background-color: var(--nllm-surface-soft);
    opacity: 0;
    pointer-events: none;
}

.neural-thanks__copy-btn--success .neural-thanks__copy-btn-default {
    opacity: 0;
    transform: translateY(-4px);
}

.neural-thanks__copy-btn--success .neural-thanks__copy-btn-success {
    opacity: 1;
}

.neural-thanks__key-help {
    font-size: var(--nllm-text-sm);
    color: var(--nllm-text-subtle);
    margin: var(--nllm-space-sm) 0 0;
    line-height: 1.5;
}

.neural-thanks__key-help a {
    color: var(--nllm-violet-soft);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

/* ── Meta grid (plan / seats / expiry / product) ─────────────────────── */

.neural-thanks__meta {
    background-color: var(--nllm-surface);
    border: 1px solid var(--nllm-surface-soft);
    border-radius: var(--nllm-radius-lg);
    padding: var(--nllm-space-lg);
}

.neural-thanks__meta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: var(--nllm-space-md);
    margin: 0;
}

.neural-thanks__meta-cell {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.neural-thanks__meta-cell dt {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--nllm-text-subtle);
}

.neural-thanks__meta-cell dd {
    font-size: 1rem;
    font-weight: 600;
    color: var(--nllm-text);
    margin: 0;
}

.neural-thanks__meta-cell code {
    font-family: var(--nllm-font-mono);
    font-size: 0.875rem;
    color: var(--nllm-cyan-pale);
    background-color: var(--nllm-surface-deep);
    padding: 0.125rem 0.5rem;
    border-radius: var(--nllm-radius-sm);
}

/* ── Order summary (the "order page" half of the combined post-purchase
 *    view: order number, purchased line items, grand total). Mirrors the
 *    surface/border treatment of .neural-thanks__card and .neural-thanks__meta
 *    so it reads as a sibling info panel. Line items are a borderless list with
 *    hairline dividers; the total is set off by a top rule like a receipt. ──── */

.neural-thanks__order {
    background-color: var(--nllm-surface);
    border: 1px solid var(--nllm-surface-soft);
    border-radius: var(--nllm-radius-lg);
    padding: var(--nllm-space-lg);
}

.neural-thanks__order-number {
    color: var(--nllm-text-muted);
    font-weight: 600;
}

.neural-thanks__order-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.neural-thanks__order-item {
    /* Name on the left, line price on the right; baseline-aligned so a
       wrapping product name keeps its price on the first visual row. */
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--nllm-space-md);
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--nllm-surface-soft);
}

.neural-thanks__order-item:last-child { border-bottom: none; }

.neural-thanks__order-item-name {
    color: var(--nllm-text);
    font-size: var(--nllm-text-sm);
}

.neural-thanks__order-item-qty {
    color: var(--nllm-text-subtle);
    font-size: 0.8125rem;
    margin-left: 0.375rem;
}

.neural-thanks__order-item-price {
    /* tabular-nums keeps prices vertically aligned across rows */
    color: var(--nllm-text-muted);
    font-size: var(--nllm-text-sm);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.neural-thanks__order-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--nllm-space-md);
    margin-top: var(--nllm-space-md);
    padding-top: var(--nllm-space-md);
    border-top: 1px solid var(--nllm-surface-soft);
}

.neural-thanks__order-total-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--nllm-text-subtle);
}

.neural-thanks__order-total-value {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--nllm-text);
    font-variant-numeric: tabular-nums;
}

/* ── Email reassurance card ──────────────────────────────────────────── */

.neural-thanks__reassurance {
    display: flex;
    align-items: flex-start;
    gap: var(--nllm-space-sm);
    padding: var(--nllm-space-md);
    background-color: rgba(34, 197, 94, 0.06);
    border: 1px solid rgba(34, 197, 94, 0.22);
    border-radius: var(--nllm-radius-md);
    color: var(--nllm-text-muted);
    font-size: var(--nllm-text-sm);
    line-height: 1.55;
}

.neural-thanks__reassurance strong { color: var(--nllm-text); }

.neural-thanks__reassurance a {
    color: var(--nllm-cyan-bright);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.neural-thanks__reassurance-icon {
    font-size: 1.125rem;
    color: var(--pc-status-flowing);
    line-height: 1.4;
    flex-shrink: 0;
}

/* ── Next-steps nav (account + getting started) ──────────────────────── */

.neural-thanks__next {
    display: flex;
    flex-direction: column;
    gap: var(--nllm-space-sm);
    text-align: center;
    padding-top: var(--nllm-space-md);
    border-top: 1px solid var(--nllm-surface-soft);
}

.neural-thanks__next-link {
    color: var(--nllm-text-muted);
    font-size: var(--nllm-text-sm);
    text-decoration: none;
    padding: 0.5rem 0.75rem;
    border-radius: var(--nllm-radius-sm);
    transition: color var(--nllm-transition-fast), background-color var(--nllm-transition-fast);
}

.neural-thanks__next-link:hover {
    color: var(--nllm-violet-soft);
    background-color: rgba(124, 58, 237, 0.08);
}

/* Screen-reader-only utility */
.neural-thanks__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Thank-you page responsive (mobile-first hint already covered) ──── */

@media (max-width: 480px) {
    .neural-thanks {
        padding: var(--nllm-space-lg) var(--nllm-space-sm);
        gap: var(--nllm-space-md);
    }

    .neural-thanks__hero { padding: var(--nllm-space-lg) var(--nllm-space-md); }
    .neural-thanks__card { padding: var(--nllm-space-md); }
    .neural-thanks__meta { padding: var(--nllm-space-md); }

    .neural-thanks__key-row {
        grid-template-columns: 1fr;
    }

    .neural-thanks__activate-btn {
        font-size: 0.9375rem;
        padding: 0.875rem 1rem;
    }
}

/* ── [claude:opus-4.7-1m][client:2.1.152][hurc:v0.7.0] Hide shop product-code display on cart / checkout / product list ─
 *
 * shop renders a `.hikashop_product_code_list` span that prints the raw
 * `product_code` DB field (our SKUs: NLLM_PRO_MONTHLY, NLLM_PRO_ANNUAL) as a
 * user-visible link on cart line items, checkout, and product listings. These
 * codes look like untranslated language keys and confuse customers.
 *
 * The shop config option that emits this is "show_code" — we'd prefer to
 * disable it in the shop admin, but until that backend change ships we
 * suppress the rendered span here. Removing it via CSS is reversible if
 * shop config later turns it off (display:none is a no-op then).
 * ───────────────────────────────────────────────────────────────────────── */

.hikashop_product_code_list,
.hikashop_product_code_main,
.hikashop_product_code_product { display: none !important; }

/* ── [claude:opus-4.7-1m][client:2.1.152][hurc:v0.7.0] shop review-stars brand override ─────────────────────────────
 *
 * PURPOSE:
 *   the shop's stock star widget is a 16×64 bitmap GIF
 *   (media/com_hikashop/images/star.gif) sliced into 16×16 cells by
 *   background-position. On hi-DPI displays the bitmap scales up and
 *   pixelates — visible as the fuzzy grey stars on the product listing.
 *
 *   This override swaps the bitmap for inline-SVG data URIs (crisp at any
 *   DPR), recolors filled stars with the bolt-amber product accent, sizes
 *   them larger for readability, and adds a numeric meta line that
 *   surfaces "(avg) · N reviews" next to the stars on listing cards.
 *
 * SELECTOR STRATEGY:
 *   Targets only `.hk-rate-star` inside shop containers. `!important`
 *   is required to defeat hikashop.css line 1131 which already uses
 *   `background-image: url(...) !important`. We keep the original width
 *   16px → 18px size step to give the stars a bit more visual weight on
 *   modern displays without breaking the row gap.
 *
 * COLORS (from tokens.css):
 *   filled  → --pc-bolt-amber       (#f59e0b — conventional star yellow)
 *   empty   → --nllm-surface-edge   (#475569 — muted on dark surface)
 *   hover   → --pc-bolt-amber-pale  (#fde68a)
 *
 * DATA DEPENDENCY:
 *   The numeric .nllm-rating-meta line is emitted by the mini.php override
 *   at templates/nllm/html/com_hikashop/vote/mini.php. Both must ship
 *   together — this stylesheet would be no-op without the template
 *   override providing the data binding.
 * ───────────────────────────────────────────────────────────────────────── */

.com_hikashop .hk-rate-star {
    width: 18px !important;
    height: 18px !important;
    background-image: none !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: contain !important;
    vertical-align: middle;
    margin-right: 2px;
}

.com_hikashop .hk-rate-star.state-full {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f59e0b'><path d='M12 2.5l2.95 6.4 6.95.65-5.25 4.72 1.55 6.83L12 17.4 5.8 21.1l1.55-6.83L2.1 9.55l6.95-.65z'/></svg>") !important;
}

.com_hikashop .hk-rate-star.state-empty {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='1.6' stroke-linejoin='round'><path d='M12 2.5l2.95 6.4 6.95.65-5.25 4.72 1.55 6.83L12 17.4 5.8 21.1l1.55-6.83L2.1 9.55l6.95-.65z'/></svg>") !important;
}

.com_hikashop .hk-rate-star.state-mid {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><defs><linearGradient id='hm'><stop offset='50%25' stop-color='%23f59e0b'/><stop offset='50%25' stop-color='%23475569' stop-opacity='0.35'/></linearGradient></defs><path d='M12 2.5l2.95 6.4 6.95.65-5.25 4.72 1.55 6.83L12 17.4 5.8 21.1l1.55-6.83L2.1 9.55l6.95-.65z' fill='url(%23hm)' stroke='%23475569' stroke-width='1.2' stroke-linejoin='round'/></svg>") !important;
}

.com_hikashop .hk-rate-star.state-hover {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fde68a'><path d='M12 2.5l2.95 6.4 6.95.65-5.25 4.72 1.55 6.83L12 17.4 5.8 21.1l1.55-6.83L2.1 9.55l6.95-.65z'/></svg>") !important;
}

.com_hikashop .hikashop_vote_stars {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 8px;
    padding: 0;
    width: auto;
}

.com_hikashop .hikashop_vote_stars .hk-rating {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

/* The numeric line emitted by templates/nllm/html/com_hikashop/vote/mini.php.
 * When total = 0 the template renders a single muted "No reviews yet" string. */
.com_hikashop .nllm-rating-meta {
    color: var(--nllm-text-muted);
    font-size: var(--nllm-text-sm);
    line-height: 1;
    white-space: nowrap;
}

.com_hikashop .nllm-rating-meta__score {
    color: var(--nllm-text);
    font-weight: 600;
}

.com_hikashop .nllm-rating-meta__sep {
    margin: 0 4px;
    color: var(--nllm-text-subtle);
}

.com_hikashop .nllm-rating-meta--empty {
    color: var(--nllm-text-subtle);
    font-style: italic;
}

/* ============================================================
 * [claude:opus-4.7-1m][client:2.1.152][hurc:v0.7.0] Cart bidirectional billing-cycle switcher
 * Renders ABOVE the cart summary block. Two variants:
 *  - default (monthly→yearly upsell): violet/founder gradient pill
 *  - --downshift (yearly→monthly): neutral surface, lower emphasis
 *    (we are NOT trying to push the buyer back to monthly — just
 *     offering the option if they changed their mind)
 * ============================================================ */

.neural-upsell-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--nllm-space-sm);
    margin: 0 0 var(--nllm-space-md);
    padding: var(--nllm-space-sm) var(--nllm-space-md);
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(147, 51, 234, 0.06));
    border: 1px solid rgba(167, 139, 250, 0.35);
    border-radius: var(--nllm-radius-md);
    color: var(--nllm-text);
    font-size: var(--nllm-text-sm);
    line-height: 1.45;
}

.neural-upsell-banner__text {
    flex: 1 1 240px;
    min-width: 0;
}

.neural-upsell-banner__text strong {
    font-weight: 700;
    color: var(--nllm-text);
}

.neural-upsell-banner__link {
    flex: 0 0 auto;
    display: inline-block;
    padding: 0.55rem 1rem;
    background: var(--nllm-gradient);
    color: #fff;
    font-weight: 600;
    font-size: var(--nllm-text-sm);
    text-decoration: none;
    border-radius: var(--nllm-radius-sm);
    box-shadow: 0 4px 16px rgba(124, 58, 237, 0.3);
    transition: transform var(--nllm-transition-fast), opacity var(--nllm-transition-fast);
}

.neural-upsell-banner__link:hover {
    transform: translateY(-1px);
    opacity: 0.92;
    text-decoration: none;
}

.neural-upsell-banner__link:focus-visible {
    outline: 2px solid var(--nllm-violet-soft);
    outline-offset: 2px;
}

/* Downshift variant — yearly→monthly. Lower visual weight so it doesn't
 * read as a sales push; this is a courtesy "you can change your mind" UI. */
.neural-upsell-banner--downshift {
    background: var(--nllm-surface);
    border-color: var(--nllm-surface-soft);
}

.neural-upsell-banner--downshift .neural-upsell-banner__link {
    background: transparent;
    color: var(--nllm-violet-soft);
    border: 1px solid var(--nllm-violet-soft);
    box-shadow: none;
}

.neural-upsell-banner--downshift .neural-upsell-banner__link:hover {
    background: rgba(124, 58, 237, 0.08);
    transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
    .neural-upsell-banner__link {
        transition: none;
    }

    .neural-upsell-banner__link:hover {
        transform: none;
    }
}

/* ============================================================
 * [claude:opus-4.7-1m][client:2.1.152][hurc:v0.7.0] Checkout bailout-prevention notice
 * Sits above the login/register tabs. For visitors who don't want
 * to create an account, points at /download (free no-card path).
 * Keeps them in the funnel instead of losing them at the account
 * gate; in-trial upsell on /download recovers them for Pro later.
 * ============================================================ */

.neural-checkout__bailout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--nllm-space-sm);
    margin: 0 0 var(--nllm-space-md);
    padding: 0.75rem var(--nllm-space-md);
    background: var(--nllm-surface);
    border: 1px dashed var(--nllm-surface-soft);
    border-radius: var(--nllm-radius-md);
    color: var(--nllm-text-muted);
    font-size: var(--nllm-text-sm);
    line-height: 1.45;
}

.neural-checkout__bailout-text {
    flex: 1 1 200px;
    min-width: 0;
}

.neural-checkout__bailout-link {
    flex: 0 0 auto;
    color: var(--nllm-violet-soft);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.neural-checkout__bailout-link:hover,
.neural-checkout__bailout-link:focus-visible {
    color: var(--nllm-violet);
    text-decoration: underline;
}

/* ============================================================
 * [claude:opus-4.8-1m][client:2.1.168][hurc:v0.10.1] Premium Trial — card-on-file reassurance + prominent bailout
 * Renders directly under the cart items when a Premium Trial SKU
 * (NLLM_TRIAL_MONTHLY / _ANNUAL) is in the cart. Sells the $0-today
 * card-on-file (no charge if cancelled, one-click self-serve cancel)
 * then pairs it with an unmissable no-card download escape hatch — a
 * louder variant of the faint dashed note used at the login step.
 * ============================================================ */

.neural-trial-assure {
    margin: 0 0 var(--nllm-space-md);
    padding: var(--nllm-space-md) var(--nllm-space-lg);
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.10), rgba(34, 197, 94, 0.06));
    border: 1px solid rgba(167, 139, 250, 0.35);
    border-radius: var(--nllm-radius-md);
    color: var(--nllm-text);
    font-size: var(--nllm-text-sm);
    line-height: 1.5;
}

.neural-trial-assure__title {
    display: flex;
    align-items: center;
    gap: var(--nllm-space-xs);
    margin: 0 0 var(--nllm-space-sm);
    font-size: var(--nllm-text-body);
    font-weight: 700;
    color: var(--nllm-text);
}

.neural-trial-assure__badge {
    color: var(--pc-bolt-amber);
}

.neural-trial-assure__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--nllm-space-xs);
}

.neural-trial-assure__list li {
    position: relative;
    padding-left: 1.5rem;
}

/* Green check marker — reuses the savings/value green so "$0 / never
 * charged" reads as a benefit, consistent with the marketing emphasis. */
.neural-trial-assure__list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--pc-save-strong);
    font-weight: 700;
}

.neural-trial-assure__list strong {
    font-weight: 700;
    color: var(--nllm-text);
}

/* Prominent bailout variant — the card-on-file decision point needs a
 * louder no-card escape than the faint dashed note at the login step. */
.neural-checkout__bailout--prominent {
    background: var(--nllm-surface);
    border-style: solid;
    border-color: rgba(167, 139, 250, 0.35);
    color: var(--nllm-text);
}

.neural-checkout__bailout--prominent .neural-checkout__bailout-link {
    padding: 0.5rem 0.9rem;
    border: 1px solid var(--nllm-violet-soft);
    border-radius: var(--nllm-radius-sm);
    color: var(--nllm-violet-soft);
}

.neural-checkout__bailout--prominent .neural-checkout__bailout-link:hover,
.neural-checkout__bailout--prominent .neural-checkout__bailout-link:focus-visible {
    background: rgba(124, 58, 237, 0.10);
    text-decoration: none;
}