/*
 * Silverhost Flow: multi-step order form for clientes.silverhost.cl.
 *
 * Rendered inside the "silverhost" client theme (body.sh.shf-in-cart), whose
 * silverhost.css provides the tokens (--sh-*), Geist, .sh-btn, .sh-chip,
 * .sh-glow and [data-reveal]/[data-enter]. The tokens are repeated below with
 * the same values so the flow still looks right under another system theme.
 *
 * Sections:
 *   1. Tokens and page frame
 *   2. Stepper
 *   3. Step 1, Plan (products.tpl)
 *   4. Step 2, Dominio (configureproductdomain.tpl)
 *   5. Step 3, Configura (configureproduct.tpl, ordersummary.tpl)
 *   6. Step 4, Carrito y pago (viewcart.tpl, checkout.tpl)
 *   7. Listo (complete.tpl) and error pages
 *   8. Wrapped standard_cart pages (domainregister, confdomains, ...)
 *   9. Motion (everything off under prefers-reduced-motion)
 */

/* ---------- 1. Tokens and page frame ---------- */
:root {
    --sh-canvas: #f6f8f9;
    --sh-surface: #fcfdfd;
    --sh-tint: #e8f6fa;
    --sh-hairline: #dce3e7;
    --sh-hairline-strong: #7a8b92;
    --sh-ink: #0b1a20;
    --sh-muted: #4e6169;
    --sh-petrol: #0a2c36;
    --sh-petrol-strong: #103b47;
    --sh-on-petrol: #f2f7f8;
    --sh-cyan: #51cee9;
    --sh-cyan-ink: #0a6a80;
    --sh-on-panel-muted: #a9c3ca;
    --sh-ok: #0f7b4f;
    --sh-ok-bg: #e6f4ee;
    --sh-danger: #9f1c1c;
    --sh-danger-bg: #fbeaea;
    --sh-panel: #0a2c36;
    --sh-on-panel: #f2f7f8;
    --sh-raised: #fcfdfd;
    --sh-on-cyan: #0a2c36;
    --sh-petrol-mark: #51cee9;
    --sh-ok-ink: #0a4f33;
    --sh-on-ok: #fff;
    --sh-overlay: rgb(246 248 249 / .85);
    --sh-shadow-float: 0 1px 2px rgb(10 44 54 / .06), 0 8px 24px rgb(10 44 54 / .08);
    --sh-r-chip: 6px;
    --sh-r-control: 10px;
    --sh-r-panel: 20px;
    --sh-ease: cubic-bezier(.2, .7, .2, 1);
}

#order-standard_cart.shf-flow {
    padding: 0 0 40px;
    font-size: 16px;
    color: var(--sh-ink);
    font-family: var(--sh-font, inherit);
}
.shf-flow *, .shf-flow *::before, .shf-flow *::after { box-sizing: border-box; }
.shf-flow .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;
}
.shf-flow .sh-icon { width: 1em; height: 1em; fill: currentColor; flex-shrink: 0; vertical-align: -0.125em; }
.shf-flow p { margin: 0; }
.shf-flow ul, .shf-flow ol, .shf-flow dl { margin: 0; padding: 0; list-style: none; }
.shf-muted { color: var(--sh-muted); }
.shf-flow .shf-alert { margin: 0 0 24px; }

.shf-h1 {
    font-size: 2.25rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1.1;
    margin: 0; text-wrap: balance;
}
.shf-h2 {
    font-size: 1.625rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15;
    margin: 0 0 24px; text-wrap: balance;
}
.shf-h1 .shf-dim, .shf-h2 .shf-dim { display: block; color: var(--sh-muted); }
.shf-h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; margin: 0; }
.shf-eyebrow { font-size: .8125rem; font-weight: 500; color: var(--sh-cyan-ink); margin-bottom: 8px; }
.shf-lead { font-size: 1.0625rem; color: var(--sh-muted); margin-top: 16px; max-width: 58ch; text-wrap: pretty; }
@media (min-width: 768px) {
    .shf-h1 { font-size: 2.75rem; }
    .shf-h2 { font-size: 2rem; }
}

.shf-head { margin: 8px 0 32px; }
.shf-head-split { display: grid; gap: 24px; align-items: end; }
@media (min-width: 992px) {
    .shf-head-split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; }
}

.shf-card-box {
    background: var(--sh-surface); border: 1px solid var(--sh-hairline);
    border-radius: var(--sh-r-panel); padding: 24px;
}
@media (min-width: 768px) { .shf-card-box { padding: 32px; } }

/* Theme-independent fallbacks for the button language (silverhost.css owns the full version) */
.shf-flow .sh-btn { min-height: 48px; }
.shf-flow .sh-btn-block { display: flex; width: 100%; }
.shf-flow .sh-btn.sh-btn-lg { min-height: 56px; }
.shf-link-btn {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 4px;
    background: none; border: 0; color: var(--sh-cyan-ink); font-weight: 500; text-decoration: underline;
    text-underline-offset: 3px; cursor: pointer;
}
.shf-link-btn:hover { color: var(--sh-petrol); }

/* ---------- 2. Stepper ---------- */
.shf-steps { position: relative; margin: 0 0 32px; }
.shf-steps-compact { display: none; }
.shf-steps-list { display: grid; grid-template-columns: repeat(5, 1fr); position: relative; z-index: 1; }
.shf-step { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.shf-step-dot {
    width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: var(--sh-surface); border: 1px solid var(--sh-hairline-strong); color: var(--sh-muted);
    font-size: .875rem; font-weight: 600; font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 6px var(--sh-canvas);
    transition: background-color .3s, border-color .3s, color .3s;
}
.shf-step-label { font-size: .8125rem; font-weight: 500; color: var(--sh-muted); line-height: 1.3; }
.shf-step.is-done .shf-step-dot { background: var(--sh-petrol); border-color: var(--sh-petrol); color: var(--sh-petrol-mark); }
.shf-step.is-current .shf-step-dot {
    background: var(--sh-cyan); border-color: var(--sh-cyan); color: var(--sh-on-cyan);
    box-shadow: 0 0 0 6px var(--sh-canvas), 0 0 0 10px rgb(81 206 233 / .25);
}
.shf-step.is-current .shf-step-label { color: var(--sh-ink); font-weight: 600; }
.shf-step.is-done .shf-step-label { color: var(--sh-ink); }
.shf-steps-track {
    position: absolute; top: 17px; left: 10%; right: 10%; height: 2px; border-radius: 2px;
    background: var(--sh-hairline);
}
.shf-steps-track > i {
    position: absolute; inset: 0; border-radius: inherit; background: var(--sh-petrol);
    transform-origin: left center; transform: scaleX(var(--to, 0));
}
@media (max-width: 767.98px) {
    .shf-steps {
        margin-bottom: 24px; padding: 12px 16px 14px; background: var(--sh-surface);
        border: 1px solid var(--sh-hairline); border-radius: 14px;
    }
    .shf-steps-compact { display: block; font-size: .875rem; color: var(--sh-muted); margin-bottom: 10px; }
    .shf-steps-compact strong { color: var(--sh-ink); font-weight: 600; }
    .shf-steps-list { display: flex; justify-content: space-between; }
    .shf-step-label { display: none; }
    .shf-step-dot { width: 26px; height: 26px; font-size: .75rem; box-shadow: 0 0 0 4px var(--sh-surface); }
    .shf-step.is-current .shf-step-dot { box-shadow: 0 0 0 4px var(--sh-surface), 0 0 0 7px rgb(81 206 233 / .3); }
    .shf-steps-track { top: auto; bottom: 26px; left: 29px; right: 29px; }
}

/* ---------- 3. Step 1, Plan ---------- */
/* "¿Cuál elijo?" helper */
.shf-picker {
    background: var(--sh-surface); border: 1px solid var(--sh-hairline); border-radius: var(--sh-r-panel);
    padding: 20px;
}
.shf-picker-title { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 12px; }
.shf-picker-title .sh-icon { color: var(--sh-cyan-ink); font-size: 1.25rem; }
.shf-picker-options { display: grid; gap: 8px; }
.shf-pick {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; padding: 10px 14px;
    text-align: left; background: var(--sh-canvas); border: 1px solid var(--sh-hairline);
    border-radius: var(--sh-r-control); color: var(--sh-ink); cursor: pointer;
    transition: background-color .2s, border-color .2s, transform .2s var(--sh-ease);
}
.shf-pick:hover { background: var(--sh-tint); border-color: var(--sh-petrol); }
.shf-pick[aria-pressed="true"] { background: var(--sh-tint); border-color: var(--sh-petrol); box-shadow: inset 0 0 0 1px var(--sh-petrol); }
.shf-pick-icon {
    width: 36px; height: 36px; border-radius: var(--sh-r-control); background: var(--sh-surface);
    border: 1px solid var(--sh-hairline); display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.125rem; color: var(--sh-petrol); flex-shrink: 0;
}
.shf-pick[aria-pressed="true"] .shf-pick-icon { background: var(--sh-petrol); border-color: var(--sh-petrol); color: var(--sh-petrol-mark); }
.shf-pick-text { display: flex; flex-direction: column; line-height: 1.3; }
.shf-pick-text strong { font-weight: 600; font-size: .9375rem; }
.shf-pick-text span { font-size: .8125rem; color: var(--sh-muted); }
.shf-picker-note { margin-top: 12px; font-size: .875rem; color: var(--sh-muted); }
.shf-picker-note strong { color: var(--sh-ink); }

/* 1 año / 2 años switch */
.shf-plans { margin-bottom: 32px; }
.shf-cycle-switch {
    position: relative; display: flex; width: max-content; margin: 0 auto 28px; padding: 4px;
    background: var(--sh-surface); border: 1px solid var(--sh-hairline); border-radius: 9999px;
}
.shf-cycle-switch button {
    position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 0 20px; border: 0; background: none; border-radius: 9999px; white-space: nowrap;
    font-weight: 500; font-size: .9375rem; color: var(--sh-muted); cursor: pointer; transition: color .3s;
}
.shf-cycle-switch button[aria-pressed="true"] { color: var(--sh-on-petrol); }
.shf-switch-saving {
    border-radius: 9999px; padding: 2px 8px; font-size: .75rem; font-weight: 600; line-height: 1.5;
    background: var(--sh-tint); color: var(--sh-cyan-ink);
}
.shf-cycle-switch button[data-cycle-option="b"] { padding-right: 8px; }
.shf-cycle-thumb {
    position: absolute; top: 4px; bottom: 4px; left: 4px; border-radius: 9999px; background: var(--sh-petrol);
    width: var(--tw, 72px); transform: translateX(var(--tx, 0)); transition: transform .35s var(--sh-ease), width .35s var(--sh-ease);
}
.shf-cycle-switch:not(.is-ready) .shf-cycle-thumb { display: none; }
.shf-cycle-switch:not(.is-ready) button[aria-pressed="true"] { background: var(--sh-petrol); }

/* Plan cards */
.shf-plan-grid { display: grid; gap: 20px; padding-top: 14px; }
@media (min-width: 768px) and (max-width: 991.98px) { .shf-plan-grid { grid-template-columns: 1fr 1fr; align-items: start; } .shf-plan-grid > .is-featured { grid-column: 1 / -1; order: -1; } }
@media (min-width: 992px) { .shf-plan-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; } }
.shf-plan {
    position: relative; display: flex; flex-direction: column; gap: 16px;
    background: var(--sh-surface); border: 1px solid var(--sh-hairline); border-radius: var(--sh-r-panel);
    padding: 24px; scroll-margin-top: 120px;
    transition: transform .25s var(--sh-ease), box-shadow .25s var(--sh-ease), border-color .2s;
}
@media (min-width: 768px) { .shf-plan { padding: 28px; } }
.shf-plan:hover { box-shadow: var(--sh-shadow-float); }
.shf-plan.is-featured { border: 2px solid var(--sh-petrol); }
.shf-plan-badge {
    position: absolute; top: -14px; left: 24px; display: inline-flex; align-items: center; gap: 6px;
    border-radius: 9999px; padding: 4px 12px; background: var(--sh-cyan); color: var(--sh-on-cyan);
    font-size: .75rem; font-weight: 600; box-shadow: var(--sh-shadow-float);
}
.shf-plan-picked {
    display: none; position: absolute; top: -14px; right: 24px; border-radius: 9999px; padding: 4px 12px;
    background: var(--sh-petrol); color: var(--sh-on-petrol); font-size: .75rem; font-weight: 600;
}
.shf-plan.is-picked { border-color: var(--sh-petrol); box-shadow: 0 0 0 4px rgb(81 206 233 / .35), var(--sh-shadow-float); }
.shf-plan.is-picked .shf-plan-picked { display: block; }
.shf-plan.is-featured.is-picked .shf-plan-badge { left: 24px; }
.shf-plan-name { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; margin: 0; }
.shf-plan-for { color: var(--sh-muted); font-size: .9375rem; margin-top: -10px; text-wrap: pretty; }
@media (min-width: 768px) { .shf-plan-grid .shf-plan-for { min-height: 3em; } }

/* Price: both cycles share one grid cell and cross-fade */
.shf-price { display: grid; }
.shf-price > .shf-price-a, .shf-price > .shf-price-b { grid-area: 1 / 1; transition: opacity .3s var(--sh-ease), transform .3s var(--sh-ease); }
.shf-price > .shf-price-b { opacity: 0; visibility: hidden; transform: translateY(6px); }
[data-cycle="b"] .shf-price.has-b > .shf-price-a { opacity: 0; visibility: hidden; transform: translateY(-6px); }
[data-cycle="b"] .shf-price.has-b > .shf-price-b { opacity: 1; visibility: visible; transform: none; }
.shf-price-main { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.shf-amt { font-size: 2.5rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.shf-per { font-size: .875rem; color: var(--sh-muted); }
.shf-from { font-size: .875rem; color: var(--sh-muted); width: 100%; }
.shf-price-note { font-size: .875rem; color: var(--sh-muted); margin-top: 6px; }
.shf-save { color: var(--sh-ok); font-weight: 500; }

/* Check lists */
.shf-checks { display: grid; gap: 10px; }
.shf-checks li { display: flex; gap: 10px; align-items: flex-start; font-size: .9375rem; line-height: 1.45; }
.shf-checks .sh-icon {
    width: 20px; height: 20px; padding: 3px; margin-top: 1px; border-radius: 50%;
    background: var(--sh-tint); color: var(--sh-cyan-ink);
}
.shf-plan.is-featured .shf-checks .sh-icon { background: var(--sh-petrol); color: var(--sh-petrol-mark); }
@media (min-width: 576px) { .shf-checks-inline, .shf-checks-2 { grid-template-columns: 1fr 1fr; } }

/* Spec disclosure */
.shf-specs { border-top: 1px solid var(--sh-hairline); padding-top: 4px; }
.shf-specs summary {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px;
    list-style: none; cursor: pointer; font-size: .9375rem; font-weight: 500; color: var(--sh-cyan-ink);
}
.shf-specs summary::-webkit-details-marker { display: none; }
.shf-specs summary .sh-icon { transition: transform .25s var(--sh-ease); }
.shf-specs[open] summary .sh-icon { transform: rotate(180deg); }
.shf-spec-rows { display: grid; }
.shf-spec-rows > div {
    display: flex; justify-content: space-between; gap: 16px; padding: 7px 0;
    border-bottom: 1px solid var(--sh-hairline); font-size: .875rem;
}
.shf-spec-rows > div:last-child { border-bottom: 0; }
.shf-spec-rows dt { font-weight: 400; color: var(--sh-muted); }
.shf-spec-rows dd { margin: 0; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; }

/* ECO starter band: tint, dashed petrol edge (a coupon) */
.shf-band {
    position: relative; display: grid; gap: 24px; margin: 0 0 56px; padding: 24px;
    background: var(--sh-tint); border: 2px dashed var(--sh-petrol); border-radius: var(--sh-r-panel);
    scroll-margin-top: 120px;
}
.shf-band::before, .shf-band::after { content: none; }
.shf-band-pitch { color: var(--sh-muted); margin: 6px 0 16px; max-width: 60ch; }
.shf-band-buy { display: flex; flex-direction: column; gap: 16px; justify-content: center; }
@media (min-width: 992px) {
    .shf-band { grid-template-columns: minmax(0, 1fr) 300px; padding: 32px; align-items: center; }
}

/* Comparison bars */
.shf-compare {
    margin: 0 0 56px; padding: 24px; background: var(--sh-surface); border: 1px solid var(--sh-hairline);
    border-radius: var(--sh-r-panel);
}
@media (min-width: 768px) { .shf-compare { padding: 32px; } }
.shf-compare-grid { display: grid; gap: 28px; }
@media (min-width: 992px) { .shf-compare-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } }
.shf-metric-title { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 14px; }
.shf-metric-title .sh-icon { color: var(--sh-cyan-ink); font-size: 1.125rem; }
.shf-bars { display: grid; gap: 10px; }
.shf-bar { display: grid; grid-template-columns: 88px minmax(0, 1fr) 82px; align-items: center; gap: 10px; font-size: .8125rem; }
.shf-bar-name { color: var(--sh-muted); font-weight: 500; }
.shf-bar-track { height: 12px; border-radius: 9999px; background: var(--sh-canvas); border: 1px solid var(--sh-hairline); overflow: hidden; }
.shf-bar-fill {
    display: block; height: 100%; width: var(--w); border-radius: 9999px; background: #9fb3ba;
    transform-origin: left center;
}
.shf-bar.is-featured .shf-bar-fill { background: var(--sh-petrol); }
.shf-bar.is-featured .shf-bar-name, .shf-bar.is-featured .shf-bar-value { color: var(--sh-ink); font-weight: 600; }
.shf-bar.is-unlimited .shf-bar-fill {
    background: repeating-linear-gradient(135deg, #9fb3ba 0 6px, #b9cad0 6px 12px);
}
.shf-bar-value { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Larger stores */
.shf-pro { margin: 0 0 56px; }
.shf-pro-grid { display: grid; gap: 20px; }
@media (min-width: 992px) { .shf-pro-grid { grid-template-columns: 1fr 1fr; } }
.shf-pro-card {
    display: grid; gap: 20px; padding: 24px; background: var(--sh-surface);
    border: 1px solid var(--sh-hairline); border-radius: var(--sh-r-panel); scroll-margin-top: 120px;
    transition: transform .25s var(--sh-ease), box-shadow .25s var(--sh-ease);
}
.shf-pro-card:hover { box-shadow: var(--sh-shadow-float); }
.shf-pro-card .shf-plan-for { margin: 4px 0 14px; }
.shf-pro-buy { display: flex; flex-direction: column; gap: 14px; padding-top: 16px; border-top: 1px solid var(--sh-hairline); }
.shf-pro-buy .shf-amt { font-size: 2rem; }

/* Generic cards (other groups) */
.shf-generic { margin: 0 0 56px; }
.shf-generic-grid { display: grid; gap: 20px; }
@media (min-width: 768px) { .shf-generic-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .shf-generic-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.shf-generic-desc { font-size: .9375rem; color: var(--sh-muted); }

/* Trust */
.shf-trust { display: grid; gap: 32px; margin: 0 0 40px; align-items: center; }
@media (min-width: 992px) { .shf-trust { grid-template-columns: 5fr 7fr; gap: 56px; } }
.shf-trust-media { position: relative; border-radius: var(--sh-r-panel); overflow: hidden; aspect-ratio: 4 / 3; background: var(--sh-tint); }
@media (min-width: 992px) { .shf-trust-media { aspect-ratio: 5 / 6; } }
.shf-trust-media img { width: 100%; height: 100%; object-fit: cover; object-position: 40% 30%; display: block; }
.shf-trust-card {
    position: absolute; left: 16px; bottom: 16px; right: 16px; display: flex; align-items: center; gap: 10px;
    width: max-content; max-width: calc(100% - 32px); padding: 10px 16px; border-radius: 14px;
    background: var(--sh-petrol); color: var(--sh-on-petrol); font-size: .875rem; font-weight: 500;
}
.shf-live { width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 8px rgb(61 220 132 / .7); flex-shrink: 0; }
.shf-trust-list { display: grid; gap: 18px; }
@media (min-width: 576px) { .shf-trust-list { grid-template-columns: 1fr 1fr; gap: 24px; } }
.shf-trust-list li { display: flex; gap: 14px; align-items: flex-start; }
.shf-trust-list li > span:last-child { display: flex; flex-direction: column; font-size: .9375rem; color: var(--sh-muted); line-height: 1.45; }
.shf-trust-list strong { color: var(--sh-ink); font-weight: 600; font-size: 1rem; margin-bottom: 2px; }
.shf-tile {
    width: 44px; height: 44px; border-radius: 12px; background: var(--sh-tint); color: var(--sh-petrol);
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0;
}

/* Payment strip */
.shf-paybar {
    display: grid; gap: 16px; align-items: center; margin: 0 0 56px; padding: 24px;
    background: var(--sh-surface); border: 1px solid var(--sh-hairline); border-radius: var(--sh-r-panel);
}
@media (min-width: 992px) { .shf-paybar { grid-template-columns: 1fr auto; padding: 28px 32px; } }
.shf-paybar-title { font-size: 1.25rem; font-weight: 600; }
.shf-paymarks-lg { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.shf-paymarks-lg li { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: .9375rem; }
.shf-paymarks-lg .sh-icon { font-size: 1.75rem; }

/* FAQ */
.shf-faq { display: grid; gap: 8px; margin: 0 0 24px; }
@media (min-width: 992px) { .shf-faq { grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; } }
.shf-faq-list { background: var(--sh-surface); border: 1px solid var(--sh-hairline); border-radius: var(--sh-r-panel); padding: 4px 24px; }
.shf-faq-list details { border-bottom: 1px solid var(--sh-hairline); }
.shf-faq-list details:last-child { border-bottom: 0; }
.shf-faq-list summary {
    display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; padding: 12px 0;
    list-style: none; cursor: pointer; font-weight: 500;
}
.shf-faq-list summary::-webkit-details-marker { display: none; }
.shf-faq-list summary .sh-icon { color: var(--sh-cyan-ink); transition: transform .25s var(--sh-ease); }
.shf-faq-list details[open] summary .sh-icon { transform: rotate(45deg); }
.shf-faq-list details p { padding: 0 0 18px; color: var(--sh-muted); max-width: 62ch; }


/* ---------- 4. Step 2, Dominio ---------- */
.shf-explain {
    margin: 0; padding: 20px; background: var(--sh-surface); border: 1px solid var(--sh-hairline);
    border-radius: var(--sh-r-panel); display: grid; gap: 12px;
}
.shf-explain-bar {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px;
    background: var(--sh-canvas); border: 1px solid var(--sh-hairline);
}
.shf-explain-dots { display: inline-flex; gap: 5px; }
.shf-explain-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--sh-hairline); }
.shf-explain-url, .shf-explain-mail {
    display: flex; align-items: center; gap: 8px; min-width: 0; font-family: var(--sh-mono, ui-monospace, monospace);
    font-size: .9375rem; color: var(--sh-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shf-explain-url .sh-icon { color: var(--sh-ok); }
.shf-explain-mail { padding: 10px 12px; border-radius: 12px; border: 1px dashed var(--sh-hairline-strong); }
.shf-explain-mail .sh-icon { color: var(--sh-cyan-ink); }
.shf-explain mark { background: var(--sh-tint); color: var(--sh-ink); font-weight: 600; padding: 1px 4px; border-radius: 4px; }
.shf-explain figcaption { font-size: .875rem; color: var(--sh-muted); }

/* Option cards. Phones: each card is followed by its own panel. From md: the
   cards form one row and the open panel spans under them (.option becomes
   display: contents, so cards and panels share one grid). */
#order-standard_cart.shf-flow .shf-domain-options { margin: 0 0 16px; display: grid; gap: 12px; background: none; border: 0; border-radius: 0; }
#order-standard_cart.shf-flow .shf-domain-options .option { margin: 0; padding: 0; background: none; border-radius: 0; }
.shf-domain-card {
    position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "icon radio" "title title" "desc desc";
    gap: 6px 12px; align-items: center; margin: 0 !important; padding: 20px;
    background: var(--sh-surface); border: 1px solid var(--sh-hairline); border-radius: var(--sh-r-panel);
    cursor: pointer; font-weight: 400 !important; transition: border-color .2s, box-shadow .2s, background-color .2s, transform .2s var(--sh-ease);
}
.shf-domain-card:hover { border-color: var(--sh-hairline-strong); }
.shf-domain-card .iradio_square-blue, .shf-domain-card > input[type="radio"] { grid-area: radio; justify-self: end; margin: 0 !important; }
.shf-domain-icon {
    grid-area: icon; width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--sh-tint); color: var(--sh-petrol); font-size: 1.5rem; transition: background-color .25s, color .25s, transform .3s var(--sh-ease);
}
.shf-domain-title { grid-area: title; font-size: 1.125rem; font-weight: 600; color: var(--sh-ink); margin-top: 8px; line-height: 1.3; }
.shf-domain-desc { grid-area: desc; font-size: .9375rem; color: var(--sh-muted); line-height: 1.45; }
.shf-domain-option.is-selected .shf-domain-card,
.shf-domain-option.option-selected .shf-domain-card,
.shf-domain-card:has(input:checked) {
    border: 2px solid var(--sh-petrol); padding: 19px; background: var(--sh-surface);
    box-shadow: 0 0 0 4px rgb(81 206 233 / .25);
}
.shf-domain-option.is-selected .shf-domain-icon,
.shf-domain-card:has(input:checked) .shf-domain-icon { background: var(--sh-petrol); color: var(--sh-petrol-mark); }
#order-standard_cart.shf-flow .shf-domain-panel {
    margin: 0; padding: 20px; background: var(--sh-surface); border: 1px solid var(--sh-hairline);
    border-radius: var(--sh-r-panel);
}
@media (max-width: 767.98px) {
    #order-standard_cart.shf-flow .shf-domain-panel { margin-top: 8px; }
}
@media (min-width: 768px) {
    #order-standard_cart.shf-flow .shf-domain-options { gap: 16px; }
    #order-standard_cart.shf-flow .shf-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    #order-standard_cart.shf-flow .shf-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #order-standard_cart.shf-flow .shf-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    #order-standard_cart.shf-flow .shf-cols-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    #order-standard_cart.shf-flow .shf-domain-options .option { display: contents; }
    #order-standard_cart.shf-flow .shf-domain-options .shf-domain-card { grid-row: 1; height: 100%; }
    #order-standard_cart.shf-flow .shf-domain-panel { grid-row: 2; grid-column: 1 / -1; padding: 24px 28px; }
}
.shf-label { display: block; margin-bottom: 8px; font-size: .9375rem !important; font-weight: 600 !important; color: var(--sh-ink); }
.shf-domain-input { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.shf-domain-input .form-control { min-height: 52px; font-size: 1.0625rem; flex: 1 1 200px; width: auto; }
.shf-domain-input .shf-tld { flex: 0 0 120px; }
.shf-domain-input .sh-btn { min-height: 52px; flex: 0 0 auto; }
.shf-www {
    display: inline-flex; align-items: center; padding: 0 14px; min-height: 52px; border-radius: var(--sh-r-control);
    background: var(--sh-canvas); border: 1px solid var(--sh-hairline); color: var(--sh-muted); font-family: var(--sh-mono, monospace); font-size: .9375rem;
}
@media (max-width: 575.98px) {
    .shf-www { display: none; }
    .shf-domain-input .form-control { flex-basis: calc(100% - 128px); }
    .shf-domain-input .sh-btn { flex: 1 1 100%; justify-content: space-between; }
}
.shf-help { margin-top: 10px !important; font-size: .875rem; color: var(--sh-muted); }
.shf-field-error { display: flex; gap: 8px; align-items: center; margin-top: 10px !important; color: var(--sh-danger); font-size: .875rem; font-weight: 500; }
.shf-field-error[hidden] { display: none; }
.shf-domain-input .form-control[aria-invalid="true"] { border-color: var(--sh-danger); box-shadow: 0 0 0 3px var(--sh-danger-bg); }
.shf-own .shf-own-enhanced { display: none; }
.shf-own.is-enhanced .shf-own-enhanced { display: block; }
.shf-own.is-enhanced .shf-own-original { display: none; }
.shf-note { display: flex; gap: 8px; align-items: center; font-size: .9375rem; color: var(--sh-muted); margin: 0 0 16px !important; }
.shf-note .sh-icon { color: var(--sh-cyan-ink); }

/* Results */
.shf-domain-results { margin: 8px 0 0; }
#order-standard_cart.shf-flow #DomainSearchResults { margin-bottom: 8px; }
#DomainSearchResults .primary-domain-header { display: none; padding: 0 0 8px; border: 0; font-weight: 600; }
.shf-result-card {
    background: var(--sh-surface); border: 1px solid var(--sh-hairline); border-radius: var(--sh-r-panel);
    padding: 8px 24px; margin-bottom: 16px; text-align: center;
}
#order-standard_cart.shf-flow .shf-result-card .domain-checker-result-headline,
#order-standard_cart.shf-flow .shf-result-card .headline { font-size: 1.25rem; font-weight: 600; margin: 16px 0; }
#order-standard_cart.shf-flow .domain-checker-available { color: var(--sh-ok); }
#order-standard_cart.shf-flow .domain-checker-unavailable, #order-standard_cart.shf-flow .domain-checker-invalid { color: var(--sh-danger); }
#order-standard_cart.shf-flow .shf-result-card .domain-checker-available::before {
    content: ""; display: block; width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%;
    background: var(--sh-ok-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='none' stroke='%230f7b4f' stroke-linecap='round' stroke-linejoin='round' stroke-width='24' d='M40 136l56 56L216 72'/%3E%3C/svg%3E") center / 26px no-repeat;
}
#order-standard_cart.shf-flow .shf-result-card .domain-checker-unavailable.headline::before {
    content: ""; display: block; width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%;
    background: var(--sh-danger-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='none' stroke='%239f1c1c' stroke-linecap='round' stroke-width='24' d='M64 64l128 128M192 64L64 192'/%3E%3C/svg%3E") center / 22px no-repeat;
}
#order-standard_cart.shf-flow .shf-result-card .domain-price { font-size: 1rem; color: var(--sh-muted); margin: 0 0 16px; }
#order-standard_cart.shf-flow .shf-result-card .domain-price .price { display: block; font-size: 1.75rem; font-weight: 600; color: var(--sh-ink); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
#order-standard_cart.shf-flow .transfer-eligible, #order-standard_cart.shf-flow .transfer-not-eligible { border-radius: var(--sh-r-control); margin: 16px 0; text-align: left; }
#order-standard_cart.shf-flow .transfer-eligible { background: var(--sh-ok-bg); color: var(--sh-ok-ink); }
.shf-searching { display: inline-flex; gap: 5px; margin-right: 10px; vertical-align: middle; }
.shf-searching i { width: 8px; height: 8px; border-radius: 50%; background: var(--sh-cyan-ink); opacity: .3; }
.spotlight-tlds { margin: 0 0 16px; }
.spotlight-tlds-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.spotlight-tld-container { width: auto !important; float: none !important; padding: 0 !important; }
.spotlight-tld { border-radius: 14px !important; border-color: var(--sh-hairline) !important; background: var(--sh-surface) !important; color: var(--sh-ink) !important; height: auto !important; min-height: 112px; }
.spotlight-tld .btn:not(.domain-contact-support) { background: var(--sh-petrol) !important; border-color: var(--sh-petrol) !important; color: var(--sh-on-petrol) !important; border-radius: 8px !important; min-height: 36px; }
.spotlight-tld .unavailable, .spotlight-tld .invalid { background: var(--sh-canvas) !important; color: var(--sh-muted) !important; border-color: var(--sh-hairline) !important; }
.suggested-domains { background: var(--sh-surface); border: 1px solid var(--sh-hairline); border-radius: var(--sh-r-panel); overflow: hidden; margin-bottom: 16px; }
.suggested-domains .panel-heading, .suggested-domains .card-header { border-bottom: 1px solid var(--sh-hairline) !important; font-weight: 600; padding: 14px 20px; background: transparent; }
.suggested-domains .list-group-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; }
.suggested-domains .domain-lookup-suggestions-message, .suggested-domains .domain-lookup-suggestions-loader { background: var(--sh-canvas) !important; opacity: 1 !important; color: var(--sh-muted); }
.suggested-domains .btn-add-to-cart { background: var(--sh-surface); border: 1px solid var(--sh-hairline-strong); color: var(--sh-ink); border-radius: var(--sh-r-control); min-height: 40px; }
.suggested-domains .btn-add-to-cart.checkout, .suggested-domains .btn-add-to-cart .added { color: var(--sh-ok); }
.domain-suggestions-warning p { font-size: .8125rem; color: var(--sh-muted); padding: 10px 20px; }
.shf-continue { display: flex; justify-content: flex-end; margin: 8px 0 24px; }
.shf-continue .sh-btn { min-width: 240px; }
#order-standard_cart.shf-flow #btnDomainContinue { background: var(--sh-petrol); color: var(--sh-on-petrol) !important; border: 0; }
#order-standard_cart.shf-flow .shf-result-card .domain-price .price:not(:empty)::after { content: " + IVA"; font-size: .875rem; font-weight: 400; color: var(--sh-muted); letter-spacing: 0; }
@media (max-width: 575.98px) { .shf-continue .sh-btn { width: 100%; } }
.shf-reassure {
    display: flex; gap: 14px; align-items: center; padding: 16px 20px; margin-top: 24px; border-radius: var(--sh-r-panel);
    background: var(--sh-tint); font-size: .9375rem; color: var(--sh-muted);
}
.shf-reassure strong { color: var(--sh-ink); }
.shf-reassure .shf-tile { background: var(--sh-surface); }

/* ---------- 5. Step 3, Configura ---------- */
.shf-layout { display: grid; gap: 24px; align-items: start; }
@media (min-width: 992px) { .shf-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; } .shf-layout.shf-layout-single { grid-template-columns: minmax(0, 1fr); } }
#order-standard_cart.shf-flow .shf-layout .secondary-cart-body,
#order-standard_cart.shf-flow .shf-layout .secondary-cart-sidebar { float: none !important; width: auto !important; padding: 0 !important; }
.shf-main { display: grid; gap: 20px; min-width: 0; }
.shf-aside { position: relative; }
@media (min-width: 992px) { .shf-summary-wrap { position: sticky; top: 104px; } }
#order-standard_cart.shf-flow #orderSummary.shf-summary-wrap { margin-top: 0 !important; }

.shf-product {
    display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; padding: 20px;
    background: var(--sh-tint); border-radius: var(--sh-r-panel);
}
.shf-product-icon {
    width: 52px; height: 52px; border-radius: 14px; background: var(--sh-petrol); color: var(--sh-petrol-mark);
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem;
}
.shf-product-label { font-size: .8125rem; color: var(--sh-muted); font-weight: 500; }
.shf-product-name { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.shf-product-for { font-size: .9375rem; color: var(--sh-muted); }
.shf-product-chips { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.shf-product-chips li {
    font-size: .8125rem; font-weight: 500; padding: 4px 12px; border-radius: 9999px;
    background: var(--sh-surface); border: 1px solid var(--sh-hairline);
}
@media (min-width: 768px) {
    .shf-product { grid-template-columns: auto 1fr auto; padding: 20px 24px; }
    .shf-product-chips { grid-column: auto; justify-content: flex-end; }
}

.shf-section {
    background: var(--sh-surface); border: 1px solid var(--sh-hairline); border-radius: var(--sh-r-panel); padding: 20px;
}
@media (min-width: 768px) { .shf-section { padding: 28px; } }
.shf-section-title { font-size: 1.25rem !important; font-weight: 600; letter-spacing: -0.01em !important; line-height: 1.25; margin: 0 0 4px; }
.shf-section-sub { font-size: .9375rem; color: var(--sh-muted); margin-bottom: 20px !important; }
.shf-plain-list { display: grid; gap: 8px; }

/* Billing cycle cards (role=radio, driven by flow.js) */
.shf-cycles { display: grid; gap: 12px; }
@media (min-width: 576px) { .shf-cycles-2 { grid-template-columns: 1fr 1fr; } .shf-cycles-3, .shf-cycles-4, .shf-cycles-5 { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } }
.shf-cycle {
    position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px 18px 16px;
    min-height: 44px; border: 1px solid var(--sh-hairline-strong); border-radius: 14px; background: var(--sh-surface);
    cursor: pointer; transition: border-color .2s, box-shadow .2s, background-color .2s, transform .2s var(--sh-ease);
}
.shf-cycle:hover { border-color: var(--sh-petrol); }
.shf-cycle[aria-checked="true"] {
    border-color: var(--sh-petrol); background: var(--sh-tint);
    box-shadow: inset 0 0 0 1px var(--sh-petrol), 0 0 0 4px rgb(81 206 233 / .22);
}
.shf-cycle:focus-visible { outline: 3px solid var(--sh-cyan-ink); outline-offset: 2px; }
.shf-cycle-radio {
    position: absolute; top: 18px; right: 18px; width: 22px; height: 22px; border-radius: 50%;
    border: 2px solid var(--sh-hairline-strong); background: var(--sh-surface); transition: border-color .2s;
}
.shf-cycle-radio::after {
    content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--sh-petrol);
    transform: scale(0); transition: transform .25s var(--sh-ease);
}
.shf-cycle[aria-checked="true"] .shf-cycle-radio { border-color: var(--sh-petrol); }
.shf-cycle[aria-checked="true"] .shf-cycle-radio::after { transform: scale(1); }
.shf-cycle-name { font-weight: 600; font-size: 1rem; padding-right: 32px; }
.shf-cycle-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.shf-cycle-amt { font-size: 1.625rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.shf-cycle-iva { font-size: .8125rem; color: var(--sh-muted); }
.shf-cycle-note { font-size: .8125rem; color: var(--sh-muted); line-height: 1.45; }
.shf-cycle-badge {
    position: absolute; top: -11px; left: 16px; padding: 2px 10px; border-radius: 9999px;
    background: var(--sh-ok); color: var(--sh-on-ok); font-size: .75rem; font-weight: 600; white-space: nowrap;
}
.shf-cycles + .shf-select-fallback {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.shf-cycles { padding-top: 6px; }

/* Configurable options and addons */
.shf-options .form-group label { font-weight: 600; }
#order-standard_cart.shf-flow .shf-addons { margin: 0 -8px; }
#order-standard_cart.shf-flow .shf-addons > div { padding: 0 8px; margin-bottom: 16px; }
#order-standard_cart.shf-flow .panel-addon {
    height: 100%; margin: 0; border: 1px solid var(--sh-hairline); border-radius: 14px; background: var(--sh-surface);
    box-shadow: none; cursor: pointer; overflow: hidden; display: flex; flex-direction: column;
    transition: border-color .2s, box-shadow .2s;
}
#order-standard_cart.shf-flow .panel-addon:hover { border-color: var(--sh-hairline-strong); }
#order-standard_cart.shf-flow .panel-addon .panel-body { padding: 16px 16px 8px; font-size: .875rem; color: var(--sh-muted); flex: 1; }
#order-standard_cart.shf-flow .panel-addon .panel-body label { font-size: .9375rem; font-weight: 600; color: var(--sh-ink); display: inline-flex; gap: 8px; align-items: center; margin-bottom: 4px; }
#order-standard_cart.shf-flow .panel-addon .panel-price { padding: 0 16px 12px; font-weight: 600; color: var(--sh-ink); background: none; font-size: .9375rem; text-align: left; }
#order-standard_cart.shf-flow .panel-addon .panel-add {
    padding: 10px 16px; border-top: 1px solid var(--sh-hairline); background: var(--sh-canvas); color: var(--sh-cyan-ink);
    font-weight: 500; font-size: .875rem; text-align: left;
}
#order-standard_cart.shf-flow .panel-addon-selected { border: 2px solid var(--sh-petrol); }
#order-standard_cart.shf-flow .panel-addon-selected .panel-add { background: var(--sh-petrol); color: var(--sh-on-petrol); }
.shf-promo-output { margin-bottom: 16px; }
.shf-help-line { display: flex; gap: 10px; align-items: center; font-size: .9375rem; color: var(--sh-muted); padding: 4px 4px 0; }
.shf-help-line .sh-icon { color: var(--sh-cyan-ink); font-size: 1.25rem; }

/* Summary card (configure, cart, checkout) */
#order-standard_cart.shf-flow .shf-summary {
    position: relative; margin: 0 0 16px; padding: 22px 22px 18px; background: var(--sh-surface);
    border: 1px solid var(--sh-hairline); border-radius: var(--sh-r-panel); color: var(--sh-ink);
}
#order-standard_cart.shf-flow .shf-summary .summary-container { padding: 0; min-height: 80px; background: none; border: 0; border-radius: 0; }
#order-standard_cart.shf-flow .shf-summary-title, #order-standard_cart.shf-flow .shf-summary h2 {
    margin: 0 0 14px; padding: 0; color: var(--sh-ink); text-align: left; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; border: 0; background: none;
}
#order-standard_cart.shf-flow .shf-summary .loader {
    position: absolute; inset: 0; z-index: 2; display: none; align-items: center; justify-content: center;
    background: var(--sh-overlay); border-radius: inherit; color: var(--sh-cyan-ink); font-size: 1rem;
}
#order-standard_cart.shf-flow .shf-summary .loader[style*="block"], #order-standard_cart.shf-flow .shf-summary .loader[style*="opacity"] { display: flex !important; }
.shf-sum-product { display: flex; flex-direction: column; margin-bottom: 10px !important; }
.shf-sum-product .product-name { font-weight: 600; font-size: 1rem; }
.shf-sum-product .product-group { font-size: .8125rem; color: var(--sh-muted); font-style: normal; }
#order-standard_cart.shf-flow .shf-summary .product-group { font-style: normal; }
.shf-sum-rows { border-top: 1px solid var(--sh-hairline); }
.shf-sum-rows > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; font-size: .9375rem; border-bottom: 1px solid var(--sh-hairline); }
.shf-sum-rows dt { font-weight: 400; color: var(--sh-muted); min-width: 0; overflow-wrap: anywhere; }
.shf-sum-rows dd { margin: 0; font-weight: 500; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.shf-sum-rows dd a { color: var(--sh-muted); }
.shf-sum-rows + .shf-sum-rows { border-top: 0; }
#order-standard_cart.shf-flow .shf-summary .shf-sum-rows.summary-totals { border-top: 0; margin: 0; padding: 0; }
.shf-sum-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 0 4px; }
.shf-sum-total-label { font-weight: 600; }
#order-standard_cart.shf-flow .shf-sum-total .amt, #order-standard_cart.shf-flow .shf-sum-total #totalDueToday {
    font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--sh-ink); line-height: 1.1;
}
.shf-sum-renew { display: flex; gap: 8px; align-items: flex-start; margin-top: 10px !important; padding: 10px 12px; border-radius: 12px; background: var(--sh-canvas); font-size: .8125rem; color: var(--sh-muted); }
.shf-sum-renew .sh-icon { color: var(--sh-cyan-ink); margin-top: 3px; }
.shf-sum-renew strong { color: var(--sh-ink); font-weight: 600; }
.shf-assure { display: grid; gap: 10px; margin-top: 16px !important; padding: 0 4px; }
.shf-assure li { display: flex; gap: 10px; align-items: flex-start; font-size: .875rem; color: var(--sh-muted); }
.shf-assure .sh-icon { color: var(--sh-cyan-ink); font-size: 1.125rem; margin-top: 1px; }

/* Mobile bottom bar */
.shf-mobilebar { display: none; }
@media (max-width: 991.98px) {
    .shf-mobilebar {
        position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 1040; display: flex; align-items: center;
        justify-content: space-between; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 16px;
        background: var(--sh-surface); border: 1px solid var(--sh-hairline); box-shadow: 0 8px 32px rgb(10 44 54 / .18);
        transition: transform .3s var(--sh-ease), opacity .3s;
    }
    .shf-mobilebar.is-hidden { transform: translateY(140%); opacity: 0; pointer-events: none; }
    .shf-mobilebar-total { display: flex; flex-direction: column; line-height: 1.2; }
    .shf-mobilebar-label { font-size: .75rem; color: var(--sh-muted); }
    .shf-mobilebar-amount { font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
    .shf-flow-configure, .shf-flow-cart { padding-bottom: 96px !important; }
}

/* ---------- 6. Step 4, Carrito y pago ---------- */
.shf-alert { border-radius: 14px !important; }
.shf-items { display: grid; gap: 12px; }
#order-standard_cart.shf-flow .shf-items .shf-item { border: 1px solid var(--sh-hairline); border-radius: var(--sh-r-panel); }
.shf-item {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; align-items: start; padding: 20px;
    background: var(--sh-surface);
}
.shf-item-sub { margin-left: 24px; padding: 14px 20px; background: var(--sh-canvas); }
.shf-item-icon {
    width: 48px; height: 48px; border-radius: 14px; background: var(--sh-tint); color: var(--sh-petrol);
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.375rem; grid-row: span 2;
}
.shf-item-sub .shf-item-icon { width: 36px; height: 36px; font-size: 1rem; border-radius: 10px; }
.shf-item-title { font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.shf-item-meta { font-size: .875rem; color: var(--sh-muted); }
.shf-item-domain {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 6px !important; padding: 3px 10px; border-radius: 9999px;
    background: var(--sh-canvas); border: 1px solid var(--sh-hairline); font-size: .875rem; font-family: var(--sh-mono, monospace);
}
.shf-item-domain .sh-icon { color: var(--sh-cyan-ink); }
.shf-item-actions { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; }
.shf-item-actions .shf-link-btn { font-size: .875rem; text-decoration: none; padding: 0; }
.shf-link-muted { color: var(--sh-muted) !important; }
.shf-link-muted:hover { color: var(--sh-danger) !important; }
.shf-item-price { grid-column: 2; display: flex; flex-direction: column; gap: 2px; padding-top: 8px; }
.shf-item-amt { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.shf-item-cycle { font-size: .8125rem; color: var(--sh-muted); }
.shf-item-qty { grid-column: 2; display: flex; gap: 8px; align-items: center; }
.shf-item-qty .form-control { width: 80px; }
@media (min-width: 768px) {
    .shf-item { grid-template-columns: auto minmax(0, 1fr) auto; padding: 22px 24px; }
    .shf-item-icon { grid-row: span 1; }
    .shf-item-price { grid-column: 3; grid-row: 1; text-align: right; align-items: flex-end; padding-top: 0; }
    .shf-item-qty { grid-column: auto; }
}
.shf-empty-cart { display: flex; justify-content: flex-end; margin-top: 4px; }
.shf-empty {
    display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 48px 24px;
    background: var(--sh-surface); border: 1px dashed var(--sh-hairline-strong); border-radius: var(--sh-r-panel);
}
.shf-empty-icon {
    width: 72px; height: 72px; border-radius: 50%; background: var(--sh-tint); color: var(--sh-petrol);
    display: inline-flex; align-items: center; justify-content: center; font-size: 2rem; margin-bottom: 6px;
}
.shf-empty-title { font-size: 1.25rem; font-weight: 600; }
.shf-empty .sh-btn { margin-top: 10px; }

.shf-promo { background: var(--sh-surface); border: 1px solid var(--sh-hairline); border-radius: var(--sh-r-panel); }
.shf-promo summary {
    display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 8px 20px; cursor: pointer; list-style: none; font-weight: 500;
}
.shf-promo summary::-webkit-details-marker { display: none; }
.shf-promo-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--sh-tint); color: var(--sh-cyan-ink); display: inline-flex; align-items: center; justify-content: center; }
.shf-promo-caret { margin-left: auto; color: var(--sh-muted); transition: transform .25s var(--sh-ease); }
.shf-promo[open] .shf-promo-caret { transform: rotate(180deg); }
.shf-promo-body { padding: 0 20px 20px; }
.shf-promo-form { display: flex; gap: 8px; flex-wrap: wrap; }
.shf-promo-form .form-control { flex: 1 1 200px; width: auto; min-height: 48px; text-transform: uppercase; }
.shf-promo-form .sh-btn { min-height: 48px; }
.view-cart-promotion-code { font-weight: 500; margin-bottom: 4px !important; }

#order-standard_cart.shf-flow .shf-summary .recurring-totals { display: flex; }
#order-standard_cart.shf-flow .shf-summary .recurring-charges { font-style: normal; text-align: left; color: var(--sh-muted); font-size: .8125rem; }
.shf-sum-renew .recurring-charges > span { display: inline; }
.shf-continue-shopping { display: flex; justify-content: center; width: 100%; margin-top: 6px; text-decoration: none; }
.express-checkout-buttons:empty { display: none; }
#order-standard_cart.shf-flow .btn-checkout.disabled { opacity: .45; pointer-events: none; }

/* Checkout */
.shf-head-checkout { display: grid; gap: 16px; align-items: end; }
@media (min-width: 992px) { .shf-head-checkout { grid-template-columns: 1fr auto; } }
.shf-login-toggle {
    display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 12px 12px 12px 18px;
    background: var(--sh-surface); border: 1px solid var(--sh-hairline); border-radius: 14px;
}
.shf-login-toggle.w-hidden { display: none; }
.shf-login-text { font-weight: 500; font-size: .9375rem; }
.shf-login-toggle .sh-btn { min-height: 44px; gap: 8px; padding: 8px 16px; }
.shf-login-toggle .sh-btn.w-hidden { display: none; }
.shf-layout-checkout { align-items: start; }
@media (min-width: 992px) { .shf-layout-checkout { grid-template-columns: minmax(0, 1fr) 340px; } }
.shf-checkout-form { display: grid; gap: 20px; }
#containerNewUserSignup { display: grid; gap: 20px; }
#containerNewUserSignup.w-hidden, #containerExistingUserSignin.w-hidden, #containerNewUserSecurity.w-hidden { display: none; }
.shf-num {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-right: 10px;
    border-radius: 50%; background: var(--sh-petrol); color: var(--sh-petrol-mark); font-size: .875rem; font-weight: 600; vertical-align: 2px;
}
.shf-fields { display: grid; gap: 0 16px; }
@media (min-width: 576px) { .shf-fields { grid-template-columns: 1fr 1fr; } .shf-field-full { grid-column: 1 / -1; } }
#order-standard_cart.shf-flow .shf-field { margin-bottom: 16px; min-width: 0; }
#order-standard_cart.shf-flow .shf-field > label { display: block; margin-bottom: 6px; font-size: .875rem; font-weight: 600; color: var(--sh-ink); }
.shf-optional { font-weight: 400; color: var(--sh-muted); }
#order-standard_cart.shf-flow .shf-field .form-control, #order-standard_cart.shf-flow .shf-field select,
#order-standard_cart.shf-flow .shf-field input[type="text"], #order-standard_cart.shf-flow .shf-field input[type="email"],
#order-standard_cart.shf-flow .shf-field input[type="tel"], #order-standard_cart.shf-flow .shf-field input[type="password"] {
    width: 100%; min-height: 48px; border: 1px solid var(--sh-hairline-strong); border-radius: var(--sh-r-control);
    background-color: var(--sh-surface); font-size: 1rem; padding: 10px 14px; color: var(--sh-ink);
}
#order-standard_cart.shf-flow .shf-field .form-control:focus { border-color: var(--sh-petrol); box-shadow: 0 0 0 3px rgb(81 206 233 / .35); }
#order-standard_cart.shf-flow .shf-field .has-error .form-control, #order-standard_cart.shf-flow .shf-field .form-control.is-invalid { border-color: var(--sh-danger); }
.shf-field-help { display: block; margin-top: 6px; font-size: .8125rem; color: var(--sh-muted); font-weight: 400; }
#order-standard_cart.shf-flow .shf-field-help.field-help-text { color: var(--sh-muted); font-size: .8125rem; }
#order-standard_cart.shf-flow .shf-field input, #order-standard_cart.shf-flow .shf-field select { font-size: 1rem !important; letter-spacing: 0; }
#order-standard_cart.shf-flow .shf-field .iti { width: 100%; }
#order-standard_cart.shf-flow .shf-field .iti input[type="tel"] { padding-left: 56px; }
#order-standard_cart.shf-flow .shf-field .iti--separate-dial-code input[type="tel"] { padding-left: 96px; }
#order-standard_cart.shf-flow .shf-field .intl-tel-input { width: 100%; }
#order-standard_cart.shf-flow .shf-field .intl-tel-input input[type="tel"] { padding-left: 56px; }
#order-standard_cart.shf-flow .shf-field .intl-tel-input.separate-dial-code input[type="tel"] { padding-left: 96px; }
.shf-check { display: flex; gap: 12px; align-items: flex-start; }
#order-standard_cart.shf-flow .shf-check > label { font-weight: 500; margin: 0; cursor: pointer; font-size: .9375rem; }
.shf-check .icheckbox_square-blue, .shf-check > input { flex-shrink: 0; margin-top: 2px; }
#order-standard_cart.shf-flow .password-strength-meter .progress { height: 8px; margin: 14px 0 6px; }
#order-standard_cart.shf-flow .generate-password { min-height: 44px; gap: 8px; }
.shf-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }

/* Payment cards */
.shf-paycards { display: grid; gap: 12px; margin-bottom: 0 !important; }
@media (min-width: 768px) { .shf-paycards { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } }
.shf-paycard {
    position: relative; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; margin: 0 !important;
    padding: 18px 44px 18px 18px; min-height: 44px; border: 1px solid var(--sh-hairline-strong); border-radius: 14px;
    background: var(--sh-surface); cursor: pointer; font-weight: 400 !important;
    transition: border-color .2s, box-shadow .2s, background-color .2s, transform .2s var(--sh-ease);
}
@media (min-width: 768px) { .shf-paycard { grid-template-columns: 1fr; } }
.shf-paycard:hover { border-color: var(--sh-petrol); }
.shf-paycard.is-selected, .shf-paycard:has(input:checked) {
    border-color: var(--sh-petrol); background: var(--sh-tint); box-shadow: inset 0 0 0 1px var(--sh-petrol), 0 0 0 4px rgb(81 206 233 / .22);
}
.shf-paycard .iradio_square-blue, .shf-paycard > input[type="radio"] { position: absolute !important; top: 16px; right: 14px; margin: 0; }
.shf-paycard-icon {
    width: 48px; height: 48px; border-radius: 12px; background: var(--sh-canvas); border: 1px solid var(--sh-hairline);
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.625rem; color: var(--sh-petrol);
}
.shf-paycard.is-selected .shf-paycard-icon, .shf-paycard:has(input:checked) .shf-paycard-icon { background: var(--sh-surface); }
.shf-paycard-text { display: flex; flex-direction: column; gap: 2px; line-height: 1.4; }
.shf-paycard-text strong { font-weight: 600; font-size: 1rem; color: var(--sh-ink); }
.shf-paycard-text span { font-size: .8125rem; color: var(--sh-muted); }
.shf-credit { margin-bottom: 16px; padding: 14px 16px; border-radius: 12px; background: var(--sh-ok-bg); }
.shf-credit.w-hidden { display: none; }
#order-standard_cart.shf-flow .gateway-errors { margin-top: 12px; }
#order-standard_cart.shf-flow #paymentGatewayInput:not(:empty) { margin-top: 16px; }

/* Confirm */
.shf-confirm {
    display: grid; gap: 16px; padding: 24px; border-radius: var(--sh-r-panel); background: var(--sh-panel); color: var(--sh-on-panel);
}
.shf-confirm a { color: var(--sh-cyan); }
.shf-confirm a:hover { color: #fff; }
#order-standard_cart.shf-flow .shf-confirm .shf-check > label { color: var(--sh-on-panel); }
.shf-confirm :focus-visible { outline-color: var(--sh-cyan) !important; }
.shf-optin { display: grid; gap: 6px; padding-bottom: 16px; border-bottom: 1px solid rgb(242 247 248 / .15); }
.shf-optin-title { font-weight: 600; }
.shf-optin .shf-muted { color: var(--sh-on-panel-muted); }
.shf-confirm-row { display: grid; gap: 16px; align-items: center; }
@media (min-width: 768px) { .shf-confirm-row { grid-template-columns: auto 1fr; gap: 24px; } }
.shf-confirm .sh-btn-primary { background: var(--sh-cyan); color: var(--sh-on-cyan) !important; min-height: 56px; font-weight: 600; }
.shf-confirm .sh-btn-primary:hover { background: #7fdcf0; box-shadow: 0 8px 24px rgb(81 206 233 / .3); }
.shf-confirm .sh-btn-primary .sh-chip { background: var(--sh-panel); color: var(--sh-cyan); }
.shf-confirm .sh-btn-primary .sh-chip i { font-size: .875rem; }
.shf-assure-inline { margin-top: 0 !important; padding: 0; }
.shf-confirm .shf-assure li { color: var(--sh-on-panel-muted); }
.shf-confirm .shf-assure .sh-icon { color: var(--sh-cyan); }
@media (max-width: 767.98px) { .shf-confirm .sh-btn-primary { width: 100%; } }
.shf-secure-note { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px !important; font-size: .8125rem; color: var(--sh-muted); }
.shf-secure-note .sh-icon { color: var(--sh-ok); font-size: 1.125rem; flex-shrink: 0; }
.shf-captcha .margin-bottom { margin: 0; }

/* Checkout summary */
.shf-summary-head {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 0; margin: 0 0 4px; background: none; border: 0;
    text-align: left; color: var(--sh-ink); cursor: default;
}
.shf-summary-head .shf-summary-title { margin: 0 !important; }
.shf-summary-head-total { margin-left: auto; text-align: right; }
.shf-summary-head-total strong { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.shf-sr-label { display: block; font-size: .75rem; color: var(--sh-muted); }
.shf-summary-caret { display: none; }
.shf-mini-items { display: grid; gap: 0; margin: 12px 0 0 !important; border-top: 1px solid var(--sh-hairline); }
.shf-mini-items li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--sh-hairline); font-size: .9375rem; }
.shf-mini-name { display: flex; flex-direction: column; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.shf-mini-name small { font-weight: 400; font-size: .8125rem; color: var(--sh-muted); }
.shf-mini-price { font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.shf-summary-body .shf-sum-rows { border-top: 0; }
.shf-summary-body .shf-link-btn { margin-top: 6px; font-size: .875rem; text-decoration: none; padding: 0; }
.shf-person {
    display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; padding: 16px; border-radius: var(--sh-r-panel);
    background: var(--sh-tint); font-size: .875rem; color: var(--sh-muted);
}
.shf-person img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 25%; }
.shf-person strong { color: var(--sh-ink); }
@media (max-width: 991.98px) {
    .shf-checkout-aside { order: -1; }
    .shf-checkout-aside .shf-person { display: none; }
    .shf-summary-head { cursor: pointer; min-height: 44px; }
    .shf-summary-caret { display: block; color: var(--sh-muted); transition: transform .25s var(--sh-ease); }
    .shf-summary-head[aria-expanded="true"] .shf-summary-caret { transform: rotate(180deg); }
    .shf-summary-body { display: none; }
    .shf-summary-body.is-open { display: block; }
    #order-standard_cart.shf-flow .shf-checkout-aside .shf-summary { margin: 0; padding: 14px 18px; }
}

/* ---------- 7. Listo and error pages ---------- */
.shf-done, .shf-oops {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px;
    max-width: 760px; margin: 0 auto 48px; padding: 40px 24px; background: var(--sh-surface);
    border: 1px solid var(--sh-hairline); border-radius: var(--sh-r-panel); position: relative; overflow: hidden;
}
.shf-done::before {
    content: ""; position: absolute; width: 520px; height: 520px; left: 50%; top: -340px; transform: translateX(-50%);
    background: radial-gradient(circle, rgb(81 206 233 / .22), transparent 65%); pointer-events: none;
}
.shf-done .shf-h1, .shf-oops .shf-h1 { position: relative; }
.shf-done-check svg { display: block; }
.shf-done-ring { stroke: var(--sh-cyan); }
.shf-done-tick { stroke: var(--sh-petrol); }
.shf-done-check { width: 96px; height: 96px; border-radius: 50%; background: var(--sh-tint); }
.shf-done-number {
    display: inline-flex; gap: 8px; align-items: baseline; padding: 8px 16px; border-radius: 9999px;
    background: var(--sh-canvas); border: 1px solid var(--sh-hairline); font-size: .9375rem; color: var(--sh-muted);
}
.shf-done-number strong { color: var(--sh-ink); font-size: 1.125rem; font-variant-numeric: tabular-nums; }
.shf-done-lead { max-width: 52ch; color: var(--sh-muted); font-size: 1.0625rem; }
.shf-done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
@media (max-width: 575.98px) { .shf-done-actions .sh-btn { width: 100%; } }
.shf-next { max-width: 760px; margin: 0 auto 32px; }
.shf-timeline { position: relative; display: grid; gap: 0; margin-bottom: 24px !important; }
.shf-timeline li { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding-bottom: 24px; }
.shf-timeline li::before {
    content: ""; position: absolute; left: 23px; top: 48px; bottom: 0; width: 2px; background: var(--sh-hairline);
}
.shf-timeline li:last-child { padding-bottom: 0; }
.shf-timeline li:last-child::before { content: none; }
.shf-tl-dot {
    width: 48px; height: 48px; border-radius: 50%; background: var(--sh-surface); border: 1px solid var(--sh-hairline-strong);
    display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; color: var(--sh-petrol); position: relative; z-index: 1;
}
.shf-timeline li.is-now .shf-tl-dot { background: var(--sh-cyan); border-color: var(--sh-cyan); color: var(--sh-on-cyan); }
.shf-timeline li.is-done .shf-tl-dot { background: var(--sh-petrol); border-color: var(--sh-petrol); color: var(--sh-petrol-mark); }
.shf-timeline strong { display: block; font-size: 1.0625rem; font-weight: 600; padding-top: 10px; }
.shf-timeline p { color: var(--sh-muted); font-size: .9375rem; }
.shf-person-wide { grid-template-columns: 64px 1fr; }
.shf-person-wide img { width: 64px; height: 64px; }
.shf-oops-icon {
    width: 72px; height: 72px; border-radius: 50%; background: var(--sh-danger-bg); color: var(--sh-danger);
    display: inline-flex; align-items: center; justify-content: center; font-size: 2rem;
}
.shf-oops .alert { width: 100%; margin: 0; font-size: 1rem; font-weight: 500; }
.shf-oops-msg { color: var(--sh-muted); max-width: 56ch; }
.shf-oops-help { font-size: .875rem; }

/* ---------- 8. Wrapped standard_cart pages ---------- */
.shf-wrap ~ #order-standard_cart { font-size: 16px; color: var(--sh-ink); }
.shf-wrap ~ #order-standard_cart .cart-sidebar { display: none !important; }
.shf-wrap ~ #order-standard_cart .cart-body { float: none; width: 100%; padding: 0 !important; }
.shf-wrap ~ #order-standard_cart .header-lined h1 { font-size: 2.25rem !important; font-weight: 600; letter-spacing: -0.03em; }
.shf-wrap ~ #order-standard_cart .sidebar-collapsed { display: none; }
.shf-wrap ~ #order-standard_cart .sub-heading { border-top-color: var(--sh-hairline); }
.shf-wrap ~ #order-standard_cart .sub-heading span { background: var(--sh-canvas) !important; color: var(--sh-ink) !important; font-weight: 600; }
.shf-wrap ~ #order-standard_cart .domain-checker-container,
.shf-wrap ~ #order-standard_cart .domain-checker-bg {
    background: var(--sh-panel) !important; border-radius: var(--sh-r-panel); background-image: none !important;
}
.shf-wrap ~ #order-standard_cart .btn-primary, .shf-wrap ~ #order-standard_cart .btn-success {
    background: var(--sh-petrol); border-color: var(--sh-petrol); color: var(--sh-on-petrol); border-radius: var(--sh-r-control);
}
.shf-wrap ~ #order-standard_cart .panel, .shf-wrap ~ #order-standard_cart .card,
.shf-wrap ~ #order-standard_cart .domain-selection-options, .shf-wrap ~ #order-standard_cart .order-summary .summary-container {
    border-radius: var(--sh-r-panel); border-color: var(--sh-hairline);
}
.shf-wrap ~ #order-standard_cart .order-summary { background: var(--sh-surface); border-radius: var(--sh-r-panel); }
.shf-wrap ~ #order-standard_cart .order-summary h2 { background: transparent; color: var(--sh-ink); text-align: left; font-weight: 600; }
.shf-wrap ~ #order-standard_cart .form-control { min-height: 44px; border-color: var(--sh-hairline-strong); border-radius: var(--sh-r-control); }

/* ---------- 9. Motion ---------- */
@keyframes shf-fill { from { transform: scaleX(var(--from, 0)); } to { transform: scaleX(var(--to, 0)); } }
@keyframes shf-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes shf-pulse-ring { 0% { box-shadow: 0 0 0 6px var(--sh-canvas), 0 0 0 6px rgb(81 206 233 / .45); } 100% { box-shadow: 0 0 0 6px var(--sh-canvas), 0 0 0 14px rgb(81 206 233 / 0); } }
@keyframes shf-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes shf-dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
@keyframes shf-check-pop { 0% { transform: scale(.4); opacity: 0; } 60% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); } }
@keyframes shf-draw { from { stroke-dashoffset: var(--len); } to { stroke-dashoffset: 0; } }
@keyframes shf-pop-in { 0% { opacity: 0; transform: scale(.94); } 100% { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
    .shf-steps-track > i { animation: shf-fill .9s var(--sh-ease) .15s both; }
    .shf-step.is-current .shf-step-dot { animation: shf-pulse-ring 1.6s var(--sh-ease) .9s 2; }
    .shf-plan:hover, .shf-pro-card:hover { transform: translateY(-4px); }
    .shf-plan.is-picked { animation: shf-pop-in .4s var(--sh-ease); }
    .sh-reveal-ready .shf-compare .shf-bar-fill { transform: scaleX(0); transition: transform 1s var(--sh-ease); transition-delay: calc(.2s + var(--d, 0) * 120ms); }
    .sh-reveal-ready .shf-compare.is-in .shf-bar-fill { transform: scaleX(1); }
    .shf-searching i { animation: shf-dot 1s var(--sh-ease) infinite; }
    .shf-searching i:nth-child(2) { animation-delay: .15s; }
    .shf-searching i:nth-child(3) { animation-delay: .3s; }
    #order-standard_cart.shf-flow .shf-result-card .headline { animation: shf-rise .45s var(--sh-ease) both; }
    #order-standard_cart.shf-flow .shf-result-card .domain-checker-available::before,
    #order-standard_cart.shf-flow .shf-result-card .domain-checker-unavailable.headline::before { animation: shf-check-pop .55s var(--sh-ease) both; }
    #order-standard_cart.shf-flow .shf-result-card .domain-price { animation: shf-rise .45s var(--sh-ease) .12s both; }
    .shf-domain-panel { animation: shf-rise .35s var(--sh-ease); }
    .shf-domain-card:hover { transform: translateY(-2px); }
    .shf-domain-card:has(input:checked) .shf-domain-icon, .shf-domain-option.is-selected .shf-domain-icon { transform: scale(1.06) rotate(-4deg); }
    .shf-cycle:hover { transform: translateY(-2px); }
    .shf-cycle[aria-checked="true"] .shf-cycle-badge { animation: shf-pop-in .35s var(--sh-ease); }
    #producttotal > .shf-sum { animation: shf-rise .35s var(--sh-ease); }
    .shf-paycard:hover { transform: translateY(-2px); }
    .shf-promo[open] .shf-promo-body { animation: shf-rise .3s var(--sh-ease); }
    .shf-done-check { animation: shf-check-pop .6s var(--sh-ease) both; }
    .shf-done-ring { --len: 277; stroke-dasharray: 277; animation: shf-draw .9s var(--sh-ease) .15s both; }
    .shf-done-tick { --len: 60; stroke-dasharray: 60; animation: shf-draw .5s var(--sh-ease) .8s both; }
    .shf-done .shf-h1, .shf-done-number, .shf-done-lead, .shf-done-actions { animation: shf-rise .5s var(--sh-ease) both; }
    .shf-done .shf-h1 { animation-delay: .5s; } .shf-done-number { animation-delay: .65s; } .shf-done-lead { animation-delay: .75s; } .shf-done-actions { animation-delay: .85s; }
    .shf-timeline li { animation: shf-rise .5s var(--sh-ease) both; animation-delay: calc(1s + var(--i, 0) * 120ms); }
    .shf-faq-list details[open] p, .shf-specs[open] .shf-spec-rows { animation: shf-rise .35s var(--sh-ease); }
}
@media (prefers-reduced-motion: reduce) {
    .shf-flow *, .shf-flow *::before, .shf-flow *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* standard_cart pulls .empty-cart up 20px (it used to hang off the table); here it sat behind the item card */
#order-standard_cart.shf-flow .shf-empty-cart.empty-cart { margin: 12px 4px 0 0; line-height: 1.5; text-align: right; }
#order-standard_cart.shf-flow .shf-empty-cart .shf-link-btn { min-height: 40px; display: inline-flex; align-items: center; gap: 6px; }

/* Renewal note: room to breathe */
#order-standard_cart.shf-flow .shf-sum-renew.recurring-totals {
    margin-top: 16px !important; padding: 14px 16px; gap: 10px; line-height: 1.55; border-radius: 14px;
    border: 1px solid var(--sh-hairline);
}
#order-standard_cart.shf-flow .shf-sum-renew .sh-icon { margin-top: 4px; flex-shrink: 0; }
#order-standard_cart.shf-flow .shf-discount dd { color: var(--sh-ok); font-weight: 600; }
.shf-discount-code { color: var(--sh-muted); font-size: .8125rem; }

/* Full spec list also on ECO (band) and SILVER PRO / PREMIUM */
.shf-band-copy .shf-specs, .shf-pro-copy .shf-specs { margin-top: 12px; }
.shf-band-copy .shf-spec-rows { max-width: 640px; }
@media (min-width: 768px) {
    .shf-pro-copy .shf-spec-rows, .shf-band-copy .shf-spec-rows { grid-template-columns: 1fr 1fr; column-gap: 32px; }
}

/* Domain step: the Continuar button is shown by WHMCS while the lookup runs (disabled);
   hide it until there is something to continue with, so no ghost button appears */
#order-standard_cart.shf-flow #btnDomainContinue:disabled,
#order-standard_cart.shf-flow #btnDomainContinue.disabled { display: none !important; }

/* "Ver todo lo que incluye" also on Configura (under the product box) and on each cart item */
.shf-product-specs { margin: -4px 0 20px; padding: 4px 20px 8px; background: var(--sh-surface); border: 1px solid var(--sh-hairline); border-radius: var(--sh-r-panel); }
.shf-item-specs { margin: 10px 0 6px; max-width: 560px; }
@media (min-width: 768px) {
    .shf-product-specs .shf-spec-rows, .shf-item-specs .shf-spec-rows { grid-template-columns: 1fr 1fr; column-gap: 32px; }
}
.shf-product-specs .shf-specs { border-top: 0; margin-top: 0; padding-top: 0; }

/* ---------- 10. Dark mode ----------
 * Tokens follow :root[data-theme="dark"] from silverhost.css. These rules cover role changes
 * (the cycle switch thumb is raised, not cyan, as on the site) and standard_cart / Nexus parts
 * that hardcode white or light greys. */
:root[data-theme="dark"] .shf-cycle-thumb { background: var(--sh-raised); box-shadow: inset 0 0 0 1px rgb(81 206 233 / .55); }
:root[data-theme="dark"] .shf-cycle-switch button[aria-pressed="true"] { color: var(--sh-ink); }
:root[data-theme="dark"] .shf-cycle-switch:not(.is-ready) button[aria-pressed="true"] { background: var(--sh-raised); }
:root[data-theme="dark"] #order-standard_cart .form-control,
:root[data-theme="dark"] #order-standard_cart .custom-select {
    background-color: var(--sh-surface) !important; color: var(--sh-ink) !important; border-color: var(--sh-hairline-strong);
}
:root[data-theme="dark"] #order-standard_cart label,
:root[data-theme="dark"] #order-standard_cart .shf-label { color: var(--sh-ink) !important; }
:root[data-theme="dark"] #order-standard_cart .domain-checker-container .input-group-box { background-color: var(--sh-surface); }
:root[data-theme="dark"] #order-standard_cart .domain-pricing .bg-white,
:root[data-theme="dark"] #order-standard_cart .domain-pricing .tld-row,
:root[data-theme="dark"] #order-standard_cart .domain-pricing .tld-pricing-header div {
    background-color: var(--sh-surface) !important; color: var(--sh-ink) !important; border-color: var(--sh-hairline) !important;
}
:root[data-theme="dark"] #order-standard_cart .domain-pricing .tld-row div { background-color: transparent !important; color: var(--sh-ink) !important; }
:root[data-theme="dark"] #order-standard_cart .domain-pricing .tld-row:nth-child(even) { background-color: var(--sh-tint) !important; }
:root[data-theme="dark"] #order-standard_cart .domain-pricing .tld-row.highlighted { background-color: var(--sh-raised) !important; }
:root[data-theme="dark"] #order-standard_cart .domain-pricing .tld-pricing-header div { border-bottom-color: var(--sh-hairline-strong) !important; }
:root[data-theme="dark"] #order-standard_cart .domain-pricing small,
:root[data-theme="dark"] #order-standard_cart .domain-promo-box .small { color: var(--sh-muted) !important; }
:root[data-theme="dark"] #order-standard_cart .tld-filters .badge-secondary { background: var(--sh-surface); color: var(--sh-ink); border: 1px solid var(--sh-hairline-strong); }
:root[data-theme="dark"] #order-standard_cart .domain-promo-box { background-color: var(--sh-surface); border-color: var(--sh-hairline); color: var(--sh-ink); }
:root[data-theme="dark"] #order-standard_cart .domain-promo-box h3 { color: var(--sh-ink); }
:root[data-theme="dark"] #order-standard_cart .domain-promo-box .text-primary { color: var(--sh-cyan-ink) !important; }
:root[data-theme="dark"] #order-standard_cart .multiselect.btn,
:root[data-theme="dark"] #order-standard_cart .multiselect .multiselect-selected-text { color: var(--sh-ink) !important; }
/* Grid children may shrink below their content (the URL bar ellipsises instead of overflowing) */
.shf-head-split > * { min-width: 0; }
/* Domain promo boxes (standard_cart): yellow text and buttons fail contrast; use the notice tone */
#order-standard_cart .domain-promo-box .text-warning { color: var(--sh-notice) !important; }
#order-standard_cart .domain-promo-box .btn-warning {
    background: var(--sh-surface); border: 1px solid var(--sh-hairline-strong); color: var(--sh-ink);
}
#order-standard_cart .domain-promo-box .btn-warning:hover { background: var(--sh-tint); border-color: var(--sh-petrol); color: var(--sh-ink); }
:root[data-theme="dark"] #order-standard_cart textarea { background-color: var(--sh-surface) !important; color: var(--sh-ink) !important; border-color: var(--sh-hairline-strong) !important; }
/* Logged-in checkout, "Elegir cuenta": one selectable card per account (same language as the
   payment cards). standard_cart draws joined grey boxes with #order-standard_cart
   .account-select-container div.account, so these rules match that specificity. */
#order-standard_cart .account-select-container {
    display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 0; border: 0;
}
@media (min-width: 576px) { #order-standard_cart .account-select-container { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#order-standard_cart .account-select-container > [class*="col-"] { max-width: none; flex: none; width: auto; padding: 0; }
#order-standard_cart .account-select-container > .col-sm-12:last-child { grid-column: 1 / -1; }
/* !important only on borders/radius: Bootstrap's .border-bottom utility (on "Crear una cuenta nueva")
   is !important, and standard_cart strips the other sides of the joined boxes. */
#order-standard_cart .account-select-container.row div.account {
    height: 100%; padding: 14px 16px; background: var(--sh-surface); color: var(--sh-ink);
    border: 1px solid var(--sh-hairline-strong) !important; border-radius: 14px !important; transition: border-color .2s, background-color .2s;
}
#order-standard_cart .account-select-container.row div.account:hover { border-color: var(--sh-petrol) !important; }
#order-standard_cart .account-select-container.row div.account.active {
    background: var(--sh-tint); border-color: var(--sh-petrol) !important; box-shadow: inset 0 0 0 1px var(--sh-petrol);
}
#order-standard_cart .account-select-container label.radio-inline {
    display: flex; align-items: flex-start; gap: 12px; width: 100%; margin: 0; padding: 0;
    color: var(--sh-ink); font-weight: 400; cursor: pointer;
}
#order-standard_cart .account-select-container label.radio-inline > div,
#order-standard_cart .account-select-container label.radio-inline > input { flex: none; margin-top: 1px; }
#order-standard_cart .account-select-container .address { display: block; min-width: 0; line-height: 1.4; }
#order-standard_cart .account-select-container .address strong { font-weight: 600; color: var(--sh-ink); margin-right: 6px; }
#order-standard_cart .account-select-container .address .small { display: block; margin-top: 4px; color: var(--sh-muted); font-size: .8125rem; }
#order-standard_cart .account-select-container .label { border-radius: 9999px; padding: 1px 8px; font-size: .6875rem; font-weight: 600; vertical-align: 1px; }

/* Active TLD filter: Nexus paints it with var(--bg-inverted) + #fff at (1,4,1) specificity
   (body #order-standard_cart .domain-pricing .tld-filters .badge.badge-success); match and beat it */
body #order-standard_cart .domain-pricing .tld-filters .badge.badge-success,
body #order-standard_cart .domain-pricing .tld-filters .badge.active { background-color: var(--sh-petrol); border-color: var(--sh-petrol); color: var(--sh-on-petrol); }
/* Domain pricing table: light borders from standard_cart, and readable promo text in both modes */
#order-standard_cart .domain-pricing .tld-row .two-row-center { border-right-color: var(--sh-hairline) !important; }
#order-standard_cart .domain-pricing .tld-pricing-header div { border-bottom-width: 2px !important; border-bottom-color: var(--sh-hairline-strong) !important; }
#order-standard_cart .domain-promo-box .text-primary { color: var(--sh-cyan-ink) !important; }
#order-standard_cart .domain-promo-box .small, #order-standard_cart .domain-promo-box p.small { color: var(--sh-muted) !important; }
/* iCheck radios and checkboxes (standard_cart sprite, greyed by Nexus with a filter in every state)
   drawn like the theme's .sh-checkbox (forms.css), in both modes: hairline ring, petrol ring on
   hover, petrol fill when checked with a cyan dot / tick (dark tick on cyan in dark mode). */
#order-standard_cart .iradio_square-blue, #order-standard_cart .icheckbox_square-blue {
    width: 22px; height: 22px; border: 2px solid var(--sh-hairline-strong); background: var(--sh-surface) !important;
    filter: none !important; transition: background-color .15s, border-color .15s, box-shadow .15s;
}
#order-standard_cart .iradio_square-blue { border-radius: 50%; }
#order-standard_cart .icheckbox_square-blue { border-radius: 6px; }
#order-standard_cart .iradio_square-blue.hover, #order-standard_cart .icheckbox_square-blue.hover,
#order-standard_cart label:hover .iradio_square-blue, #order-standard_cart label:hover .icheckbox_square-blue { border-color: var(--sh-petrol); }
#order-standard_cart .iradio_square-blue.focus, #order-standard_cart .icheckbox_square-blue.focus { box-shadow: 0 0 0 3px rgb(81 206 233 / .55); border-color: var(--sh-petrol); }
#order-standard_cart .iradio_square-blue.checked {
    border-color: var(--sh-petrol); background: radial-gradient(circle, var(--sh-petrol-mark) 0 3.5px, var(--sh-petrol) 4.5px) !important;
}
#order-standard_cart .icheckbox_square-blue.checked {
    border-color: var(--sh-petrol); background: var(--sh-petrol) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%2351cee9' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat !important;
}
:root[data-theme="dark"] #order-standard_cart .icheckbox_square-blue.checked { background: var(--sh-petrol) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4.8' fill='none' stroke='%23071317' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px 14px no-repeat !important; }
#order-standard_cart .iradio_square-blue.disabled, #order-standard_cart .icheckbox_square-blue.disabled { opacity: .5; }

#order-standard_cart input[type="radio"], #order-standard_cart input[type="checkbox"] { accent-color: var(--sh-petrol); }
/* Domain result marks: data-URI strokes cannot read tokens, so dark mode gets its own colours */
:root[data-theme="dark"] #order-standard_cart.shf-flow .shf-result-card .domain-checker-available::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='none' stroke='%236fd3a5' stroke-linecap='round' stroke-linejoin='round' stroke-width='24' d='M40 136l56 56L216 72'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] #order-standard_cart.shf-flow .shf-result-card .domain-checker-unavailable.headline::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='none' stroke='%23f3a5a5' stroke-linecap='round' stroke-width='24' d='M64 64l128 128M192 64L64 192'/%3E%3C/svg%3E");
}
/* Domain register page (standard_cart markup): side gutter on phones, AI search field like the other
   fields, no stacked-column divider, and the reCAPTCHA challenge frame never widens the page */
@media (max-width: 767.98px) {
    .sh-page-domainregister #order-standard_cart .domain-pricing .two-row-center { border-right: 0 !important; }
}
.sh-page-domainregister #order-standard_cart textarea#message {
    border-radius: var(--sh-r-control); border: 1px solid var(--sh-hairline-strong); padding: 12px 14px; min-height: 140px; resize: vertical;
}
@media (max-width: 575.98px) {
    .sh-page-domainregister #order-standard_cart .input-group-box .input-group-btn,
    .sh-page-domainregister #order-standard_cart .input-group-box .input-group-append { position: static !important; display: block; width: 100%; margin-top: 8px; }
    .sh-page-domainregister #order-standard_cart .input-group-box .btn { width: 100%; position: static !important; }
}
body.sh-page-domainregister { overflow-x: clip; }
/* The stock .row (-15px margins) sits directly in #order-standard_cart, which has no padding: keep
   the page's gutter instead of running edge to edge */
@media (max-width: 767.98px) { .sh-page-domainregister #order-standard_cart > .row { margin-left: 0; margin-right: 0; } }
/* Checkout account cards: the currency pill keeps its own background on the selected (tinted) card */
#order-standard_cart .account-select-container .account.active .label { background: var(--sh-surface); }