/**
 * Checkout — Orbita Diego
 *
 * Scoped to .orbita-checkout body class (applied by inc/checkout.php).
 * Targets both the checkout form page and the order-received (thank-you) page.
 *
 * Mobile-first: base styles at 375px, responsive via @media queries.
 * No hardcoded color values — all via --custom-* tokens from theme.json.
 * Token aliases (--accent, --ink, etc.) are defined in assets/css/main.css :root.
 */

/* =============================================================================
   CHECKOUT HEADER (minimal: logo + "Compra segura" strip)
   ============================================================================= */

.orbita-checkout .orbita-checkout-header .wp-block-site-logo {
    max-width: 120px;
}

/* Hide the full nav on checkout — only logo stays */
.orbita-checkout .orbita-checkout-header .wp-block-navigation {
    display: none;
}

/* "Compra segura" label beside logo */
.orbita-checkout .orbita-secure-label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    font-size: var(--text-xs, 0.75rem);
    color: var(--ink-mid, #A6A29A);
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.orbita-checkout .orbita-secure-label svg {
    color: var(--success, #5EE3A1);
    flex-shrink: 0;
}

/* =============================================================================
   CHECKOUT LAYOUT — 2-column desktop / single-column mobile
   ============================================================================= */

.orbita-checkout .orbita-checkout-layout {
    padding-top: var(--space-8, 2rem);
    padding-bottom: var(--space-16, 4rem);
}

/* WC Checkout block — layout delegado al sidebar-layout nativo de WC (D063).
   React hidrata fields+totals dentro de un único hijo .wc-block-components-sidebar-layout;
   una grilla custom acá se rompe porque hay un solo hijo directo. WC nativo usa
   @container (min-width:700px) para activar el 2-col al 65%/35%. */
.orbita-checkout .wp-block-woocommerce-checkout {
    /* Constrain + center: el bloque tiene align:wide y antes forzaba max-width:none
       → quedaba full-bleed sin márgenes en desktop (QA ronda 3, item 4b). 1140px
       es suficiente para que el container query (>700px) active el 2-col 65/35. */
    max-width: 1140px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    /* Guardrail: que el sidebar no colapse bajo un ancho legible */
    .orbita-checkout .wc-block-components-sidebar {
        min-width: 320px;
    }

    /* Sticky sidebar — selector correcto tras la hidratación React */
    .orbita-checkout .wc-block-checkout__sidebar {
        position: sticky;
        top: var(--space-8, 2rem);
        align-self: flex-start;
    }
}

/* =============================================================================
   FORM FIELDS — inputs, selects, labels
   Follows specs from docs/04-component-specs.md §16 Form Input + §17 Form Select
   ============================================================================= */

.orbita-checkout .woocommerce-checkout,
.orbita-checkout .wc-block-checkout__form {
    font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
}

/* All text inputs and selects in checkout */
.orbita-checkout input[type="text"],
.orbita-checkout input[type="email"],
.orbita-checkout input[type="tel"],
.orbita-checkout input[type="number"],
.orbita-checkout input[type="password"],
.orbita-checkout input[type="search"],
.orbita-checkout textarea,
.orbita-checkout select,
.orbita-checkout .wc-block-components-text-input input,
.orbita-checkout .wc-block-components-select select {
    width: 100%;
    background-color: var(--paper-card, #242424);
    border: 1px solid var(--rule, #2E2E2E);
    border-radius: var(--radius-md, 0.5rem);
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    font-size: 1rem; /* 16px min — prevents iOS Safari zoom */
    font-family: inherit;
    color: var(--ink, #F4F1EA);
    transition: border-color var(--duration-fast, 150ms) var(--easing-default, cubic-bezier(0.4, 0, 0.2, 1));
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

/* Placeholder */
.orbita-checkout input::placeholder,
.orbita-checkout textarea::placeholder {
    color: var(--ink-light, #6E6A62);
}

/* Focus ring — accent gold per design-system */
.orbita-checkout input:focus,
.orbita-checkout textarea:focus,
.orbita-checkout select:focus,
.orbita-checkout .wc-block-components-text-input input:focus,
.orbita-checkout .wc-block-components-select select:focus {
    outline: none;
    border-color: var(--accent, #CFA22A);
    box-shadow: 0 0 0 3px rgba(207, 162, 42, 0.15);
}

/* Error state */
.orbita-checkout .wc-block-components-text-input.has-error input,
.orbita-checkout input.woocommerce-invalid {
    border-color: var(--critical, #DC4444);
}

.orbita-checkout .wc-block-components-text-input.has-error input:focus,
.orbita-checkout input.woocommerce-invalid:focus {
    box-shadow: 0 0 0 3px rgba(220, 68, 68, 0.15);
}

/* Labels */
.orbita-checkout label,
.orbita-checkout .wc-block-components-form-token-field label,
.orbita-checkout .wc-block-components-text-input label {
    display: block;
    margin-bottom: var(--space-2, 0.5rem);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 500;
    color: var(--ink, #F4F1EA);
}

/* Select chevron */
.orbita-checkout select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23A6A29A' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-4, 1rem) center;
    background-size: 16px;
    padding-right: calc(var(--space-4, 1rem) + 24px);
}

/* Error text */
.orbita-checkout .wc-block-components-validation-error,
.orbita-checkout .woocommerce-error li {
    font-size: var(--text-xs, 0.75rem);
    color: var(--critical, #DC4444);
    margin-top: var(--space-2, 0.5rem);
}

/* =============================================================================
   SECTION HEADINGS (Datos de contacto, Envío, Pago)
   ============================================================================= */

.orbita-checkout .wc-block-components-checkout-step__heading,
.orbita-checkout .wc-block-checkout__step h2,
.orbita-checkout .wp-block-woocommerce-checkout-fields-block h2 {
    font-size: var(--text-base, 1rem);
    font-weight: 600;
    color: var(--ink, #F4F1EA);
    letter-spacing: -0.01em;
    /* QA ronda 3, item 4a: el border-bottom + padding/margin grandes generaban
       una "banda vacía / división innecesaria" entre cada título y sus campos.
       Se quita el divisor y se acerca el título al contenido. */
    margin-bottom: var(--space-3, 0.75rem);
    padding-bottom: 0;
    border-bottom: 0;
}

/* =============================================================================
   ORDER SUMMARY SIDEBAR
   ============================================================================= */

.orbita-checkout .wp-block-woocommerce-checkout-totals-block,
.orbita-checkout .wc-block-checkout__sidebar {
    background-color: var(--paper-card, #242424);
    border: 1px solid var(--rule, #2E2E2E);
    border-radius: var(--radius-lg, 0.75rem);
    padding: var(--space-6, 1.5rem);
}

/* Order item thumbnail in summary */
.orbita-checkout .wc-block-cart-item__image img,
.orbita-checkout .wc-block-components-order-summary-item__image img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: var(--radius-sm, 0.25rem);
    border: 1px solid var(--rule, #2E2E2E);
}

/* Item names */
.orbita-checkout .wc-block-components-order-summary-item__individual-prices,
.orbita-checkout .wc-block-components-order-summary-item__name {
    font-size: var(--text-sm, 0.875rem);
    color: var(--ink, #F4F1EA);
    font-weight: 500;
}

/* M-01: Prevent long product names from overflowing the order summary column.
   WC renders item names as <span> or <div>, so the global p/h* overflow-wrap
   reset does not apply here — we need an explicit rule. */
.orbita-checkout .wc-block-components-order-summary-item__name {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
}

/* Totals rows */
.orbita-checkout .wc-block-components-totals-item {
    border-color: var(--rule, #2E2E2E);
    color: var(--ink-mid, #A6A29A);
    font-size: var(--text-sm, 0.875rem);
}

.orbita-checkout .wc-block-components-totals-item__value {
    font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
    font-weight: 600;
    color: var(--ink, #F4F1EA);
}

/* Grand total row */
.orbita-checkout .wc-block-components-totals-footer-item {
    border-top: 2px solid var(--rule-strong, #404040);
}

.orbita-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__label {
    font-size: var(--text-base, 1rem);
    font-weight: 700;
    color: var(--ink, #F4F1EA);
}

.orbita-checkout .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    font-size: var(--text-xl, 1.25rem);
    font-weight: 700;
    color: var(--accent, #CFA22A);
}

/* QA ronda 4, item 1: banda vacía arriba/abajo del Total. Venía del padding del
   wrapper de totales (16px 0) + un div __description vacío que ocupaba lugar.
   (HTML confirmado por Joaquín vía DevTools.) */
.orbita-checkout .wc-block-components-totals-wrapper {
    padding-top: var(--space-2, 0.5rem);
    padding-bottom: var(--space-2, 0.5rem);
}

.orbita-checkout .wc-block-components-totals-item__description:empty {
    display: none;
}

/* QA (2026-05-28): además del __description vacío, WC renderiza wrappers de totales
   COMPLETAMENTE vacíos (envío/impuestos sin contenido) que igual ocupaban 16px por
   el padding de arriba → dos bandas muertas entre Subtotal y "Añadir cupones".
   Confirmado en browser: innerHTML "" / 0 hijos. Se ocultan con :empty; si WC los
   puebla luego (p.ej. envío real) vuelven a mostrarse solos. */
.orbita-checkout .wc-block-components-totals-wrapper:empty {
    display: none;
}

/* =============================================================================
   PAYMENT METHODS SECTION
   ============================================================================= */

.orbita-checkout .wc-block-components-payment-method-label {
    color: var(--ink, #F4F1EA);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 500;
}

.orbita-checkout .wc-block-components-payment-method-description {
    color: var(--ink-mid, #A6A29A);
    font-size: var(--text-sm, 0.875rem);
}

/* Radio button styling */
.orbita-checkout input[type="radio"] {
    accent-color: var(--accent, #CFA22A);
    width: 18px;
    height: 18px;
    cursor: pointer;
}

/* =============================================================================
   "PAGAR" / PLACE ORDER BUTTON
   Full-width, large accent button with SVG lock icon
   ============================================================================= */

.orbita-checkout .wc-block-components-checkout-place-order-button,
.orbita-checkout .wc-block-checkout__actions .wc-block-components-checkout-place-order-button,
.orbita-checkout #place_order {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2, 0.5rem);
    width: 100%;
    min-height: 52px;
    background-color: var(--accent, #CFA22A);
    color: var(--paper, #0E0E0E);
    border: none;
    border-radius: var(--radius-md, 0.5rem);
    font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
    font-size: var(--text-base, 1rem);
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    transition:
        background-color var(--duration-fast, 150ms) var(--easing-default, cubic-bezier(0.4, 0, 0.2, 1)),
        box-shadow var(--duration-fast, 150ms) var(--easing-default, cubic-bezier(0.4, 0, 0.2, 1)),
        transform var(--duration-fast, 150ms);
    margin-top: var(--space-6, 1.5rem);
}

.orbita-checkout .wc-block-components-checkout-place-order-button:hover,
.orbita-checkout #place_order:hover {
    background-color: var(--accent-deep, #B68A1F);
    box-shadow: 0 0 24px rgba(207, 162, 42, 0.18);
}

.orbita-checkout .wc-block-components-checkout-place-order-button:focus-visible,
.orbita-checkout #place_order:focus-visible {
    outline: 2px solid var(--accent, #CFA22A);
    outline-offset: 2px;
}

.orbita-checkout .wc-block-components-checkout-place-order-button:active,
.orbita-checkout #place_order:active {
    transform: scale(0.97);
}

/* Lock icon prepended via ::before pseudo-element */
.orbita-checkout .wc-block-components-checkout-place-order-button::before,
.orbita-checkout #place_order::before {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' stroke='%230E0E0E' stroke-width='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4' stroke='%230E0E0E' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    flex-shrink: 0;
}

/* =============================================================================
   TRUST BADGES STRIP
   ============================================================================= */

.orbita-trust-badges {
    font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
}

.orbita-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
}

.orbita-trust-badge__icon {
    flex-shrink: 0;
}

/* Mobile: stack badges 2x2 */
@media (max-width: 639px) {
    .orbita-trust-badges__inner {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-4, 1rem) var(--space-6, 1.5rem) !important;
        justify-items: start;
    }
}

/* =============================================================================
   PAYMENT METHOD LOGOS ROW
   ============================================================================= */

.orbita-payment-methods {
    background-color: var(--paper-card, #242424);
    border: 1px solid var(--rule, #2E2E2E);
    border-radius: var(--radius-lg, 0.75rem);
    padding: var(--space-5, 1.25rem) var(--space-6, 1.5rem);
    margin-top: var(--space-6, 1.5rem);
}

.orbita-payment-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    margin-top: var(--space-3, 0.75rem);
}

/* =============================================================================
   THANK-YOU PAGE
   ============================================================================= */

.orbita-checkout .orbita-thankyou {
    max-width: 640px;
    margin: var(--space-8, 2rem) auto var(--space-12, 3rem);
    font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
}

/* Hero section with check icon */
.orbita-thankyou__hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-8, 2rem) var(--space-6, 1.5rem);
    background-color: var(--paper-card, #242424);
    border: 1px solid var(--rule, #2E2E2E);
    border-radius: var(--radius-xl, 1rem);
    margin-bottom: var(--space-6, 1.5rem);
}

.orbita-thankyou__check-icon {
    margin-bottom: var(--space-4, 1rem);
}

.orbita-thankyou__heading {
    font-size: var(--text-2xl, 1.5rem);
    font-weight: 700;
    color: var(--ink, #F4F1EA);
    margin: 0 0 var(--space-3, 0.75rem);
    letter-spacing: -0.02em;
}

.orbita-thankyou__sub {
    font-size: var(--text-base, 1rem);
    color: var(--ink-mid, #A6A29A);
    margin: 0;
}

.orbita-thankyou__sub strong {
    color: var(--accent, #CFA22A);
    font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
}

/* Pending state — yellow instead of green icon */
.orbita-thankyou__hero--pending {
    border-color: rgba(232, 169, 58, 0.3);
}

/* Dispatch notice */
.orbita-thankyou__notice {
    background-color: var(--paper-soft, #1A1A1A);
    border: 1px solid var(--rule, #2E2E2E);
    border-radius: var(--radius-md, 0.5rem);
    padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
    margin-bottom: var(--space-5, 1.25rem);
    font-size: var(--text-sm, 0.875rem);
    color: var(--ink-mid, #A6A29A);
    line-height: 1.55;
}

/* MP payment reference code */
.orbita-thankyou__mp-ref {
    font-size: var(--text-xs, 0.75rem);
    color: var(--ink-mid, #A6A29A);
    margin: 0 0 var(--space-6, 1.5rem);
    text-align: center;
}

.orbita-thankyou__mp-ref code {
    font-family: var(--font-mono, 'JetBrains Mono', ui-monospace, monospace);
    color: var(--ink, #F4F1EA);
    background: var(--paper-card, #242424);
    padding: 2px 6px;
    border-radius: var(--radius-sm, 0.25rem);
    font-size: 0.7rem;
}

/* CTA buttons */
.orbita-thankyou__ctas {
    display: flex;
    flex-direction: column;
    gap: var(--space-3, 0.75rem);
    align-items: stretch;
}

@media (min-width: 480px) {
    .orbita-thankyou__ctas {
        flex-direction: row;
        justify-content: center;
    }

    .orbita-thankyou__ctas .btn {
        width: auto;
    }
}

/* Reuse btn classes from main.css — ensure they render on thank-you */
.orbita-thankyou .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-3, 0.75rem) var(--space-8, 2rem);
    border-radius: var(--radius-md, 0.5rem);
    font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
    font-size: var(--text-sm, 0.875rem);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all var(--duration-fast, 150ms) var(--easing-default, cubic-bezier(0.4, 0, 0.2, 1));
    border: none;
}

.orbita-thankyou .btn--secondary {
    background-color: var(--paper-card, #242424);
    color: var(--ink, #F4F1EA);
    border: 1px solid var(--rule-strong, #404040);
}

.orbita-thankyou .btn--secondary:hover {
    background-color: var(--paper-soft, #1A1A1A);
}

.orbita-thankyou .btn--ghost {
    background-color: transparent;
    color: var(--ink-mid, #A6A29A);
    border: 1px solid var(--rule, #2E2E2E);
}

.orbita-thankyou .btn--ghost:hover {
    background-color: var(--paper-soft, #1A1A1A);
    color: var(--ink, #F4F1EA);
}

/* Focus ring on CTAs */
.orbita-thankyou .btn:focus-visible {
    outline: 2px solid var(--accent, #CFA22A);
    outline-offset: 2px;
}

/* =============================================================================
   WC NOTICES on checkout (errors, successes)
   ============================================================================= */

.orbita-checkout .woocommerce-error,
.orbita-checkout .wc-block-components-notice-banner.is-error {
    background-color: rgba(220, 68, 68, 0.1);
    border-left: 3px solid var(--critical, #DC4444);
    border-radius: var(--radius-md, 0.5rem);
    color: var(--ink, #F4F1EA);
    padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
    font-size: var(--text-sm, 0.875rem);
    margin-bottom: var(--space-4, 1rem);
}

.orbita-checkout .woocommerce-message,
.orbita-checkout .wc-block-components-notice-banner.is-info {
    background-color: rgba(94, 227, 161, 0.1);
    border-left: 3px solid var(--success, #5EE3A1);
    border-radius: var(--radius-md, 0.5rem);
    color: var(--ink, #F4F1EA);
    padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
    font-size: var(--text-sm, 0.875rem);
    margin-bottom: var(--space-4, 1rem);
}

/* =============================================================================
   RESPONSIVE OVERRIDES (mobile 375px)
   ============================================================================= */

@media (max-width: 767px) {
    .orbita-checkout .orbita-checkout-layout {
        padding-top: var(--space-6, 1.5rem);
    }

    /* Stack: resumen del pedido arriba del form en mobile.
       Selector nativo React (D063): .wc-block-checkout__sidebar.
       El selector clásico .wp-block-woocommerce-checkout-totals-block se conserva
       como fallback por si el bloque no hidrata (SSR parcial). */
    .orbita-checkout .wc-block-checkout__sidebar,
    .orbita-checkout .wp-block-woocommerce-checkout-totals-block {
        order: -1; /* Summary above the form */
        position: static;
    }

    .orbita-checkout .wc-block-components-checkout-place-order-button,
    .orbita-checkout #place_order {
        min-height: 56px; /* Larger touch target on mobile */
        font-size: var(--text-base, 1rem);
    }
}


/* =============================================================================
   MOBILE PADDING — carrito y checkout (QA-fix §4.1)
   Los bloques WC Cart/Checkout usan align:full internamente y pueden romper
   el constrained layout de WP, dejando items pegados al borde del viewport
   en mobile. Se garantiza var(--space-4) = 16px (mínimo iOS HIG / Material).
   CSS puro — sin JS — para evitar CLS en la hidratación de React.
   ============================================================================= */

/* Checkout */
@media (max-width: 639px) {
    .orbita-checkout .wp-block-woocommerce-checkout,
    .orbita-checkout .wp-block-woocommerce-cart {
        padding-left: var(--space-4, 1rem);
        padding-right: var(--space-4, 1rem);
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .orbita-checkout .wp-block-woocommerce-checkout,
    .orbita-checkout .wp-block-woocommerce-cart {
        padding-left: var(--space-6, 1.5rem);
        padding-right: var(--space-6, 1.5rem);
    }
}

@media (min-width: 1024px) {
    .orbita-checkout .wp-block-woocommerce-checkout,
    .orbita-checkout .wp-block-woocommerce-cart {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Carrito — página /carrito/ sin .orbita-checkout (WC clásico o block en page sin template custom) */
@media (max-width: 639px) {
    .woocommerce-cart .wp-block-woocommerce-cart {
        padding-left: var(--space-4, 1rem);
        padding-right: var(--space-4, 1rem);
    }
}

/* =============================================================================
   TÍTULOS DE PÁGINAS DEL FLUJO WC — tratamiento uniforme (QA ronda 4, ítem 3)
   Scope: body.orbita-b2c — aplica a Carrito, Mi cuenta, Política de Privacidad.
   Excluye .woocommerce-checkout (su propio header minimal es deliberado).
   Reemplaza la regla anterior .woocommerce-account h2 con text-2xl (QA-fix §4.2).
   ============================================================================= */

/* Heading "Acceder" / "Registrarse" del login. OJO: WC lo renderiza como un
   <h2> PELADO (sin clase) HERMANO del form, no hijo — por eso el selector
   .woocommerce-form-login h2 nunca matcheaba (QA ronda 3, item 5). Verificado
   en el HTML en vivo: <h2>Acceder</h2> + <form class="woocommerce-form-login">. */
body.orbita-b2c .woocommerce-account h1,
body.orbita-b2c .woocommerce-account h2,
body.orbita-b2c .woocommerce-account .entry-title {
    font-family: var(--font-sans);
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--ink);
    margin-top: var(--space-8);
    margin-bottom: var(--space-6);
}

/* Carrito — el block cart genera h1.entry-title o h1 dentro del bloque */
body.orbita-b2c .woocommerce-cart h1,
body.orbita-b2c .woocommerce-cart .entry-title,
body.orbita-b2c .wc-block-cart h1 {
    font-family: var(--font-sans);
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--ink);
    margin-top: var(--space-8);
    margin-bottom: var(--space-6);
}

/* Página genérica (Política de Privacidad, Términos, etc.) via page.html */
body.orbita-b2c .entry-title {
    font-family: var(--font-sans);
    font-size: var(--text-3xl);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--ink);
    margin-top: var(--space-8);
    margin-bottom: var(--space-6);
}

/* Padding lateral del contenedor .woocommerce en Mi Cuenta */
.woocommerce-account .woocommerce {
    padding-left: var(--space-4, 1rem);
    padding-right: var(--space-4, 1rem);
}

@media (min-width: 768px) {
    .woocommerce-account .woocommerce {
        padding-left: var(--space-8, 2rem);
        padding-right: var(--space-8, 2rem);
    }
}

/* Form login: max-width en desktop para evitar un form full-width en pantallas anchas */
.woocommerce-account .woocommerce-form-login {
    max-width: 480px;
}

@media (min-width: 768px) {
    .woocommerce-account .woocommerce-form-login {
        margin-left: auto;
        margin-right: auto;
    }
}

/* =============================================================================
   B2C — SVG data-uri hardcode fixes (Crema Industrial — D066)
   Los data-uri SVG no pueden usar CSS custom properties; hay que redefinir
   el rule completo bajo body.orbita-b2c con los colores encodados de la paleta B.
   - Chevron de select:  %23A6A29A (ink-mid oscuro) → %235C5348 (ink-mid crema)
   - Lock icon del botón: %230E0E0E (paper oscuro) → %231C1814 (ink crema)
   ============================================================================= */

/* Select chevron — %235C5348 = #5C5348 (--ink-mid en paleta B) */
body.orbita-b2c .orbita-checkout select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%235C5348' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Lock icon before "Finalizar compra" — %231C1814 = #1C1814 (--ink en paleta B) */
body.orbita-b2c .orbita-checkout .wc-block-components-checkout-place-order-button::before,
body.orbita-b2c .orbita-checkout #place_order::before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' stroke='%231C1814' stroke-width='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4' stroke='%231C1814' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}