/* ==========================================================================
   HostElevate Smart Order 1.1 — Store page, Configure page and summary.
   Loaded after order.css. Brand gradient and accent come from the client theme
   (--he-grad, --nx-accent); the fallbacks below are HostElevate's own colours.
   ========================================================================== */

.heo, .heo-qc, .heo-mbar {
    --h-grad: var(--he-grad, linear-gradient(118deg, #032A1E 0%, #0E7A58 100%));
    --h-link: var(--nx-link, #0B6B4F);
    --h-sel: var(--h-link);
    --h-accent-ink: #3B2500;
    --h-tile-r: 14px;
    --h-card-r: 16px;
}

/* ---------- Page head ---------- */
.heo-head { margin: 0 0 34px; }
.heo-title { letter-spacing: -.02em; }
.heo:not(.heo-standalone) .heo-head .heo-cartbtn { display: none; }
.heo-intro { margin: 0 0 22px; font-size: 15px; }

/* ---------- Store page: categories + plan cards ---------- */
.heo-store { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 34px; align-items: start; }
.heo-store-main { min-width: 0; }
.heo-cats {
    position: sticky; top: 24px;
    background: var(--h-card); border: 1px solid var(--h-line); border-radius: var(--h-card-r);
    padding: 26px 20px 22px;
}
.heo-cats-title { font-size: 19px !important; font-weight: 500 !important; margin: 0 4px 16px !important; color: var(--h-ink); }
.heo-cats-list { display: grid; gap: 2px; }
.heo-cat {
    display: flex; align-items: center; gap: 14px; width: 100%;
    padding: 8px 10px; border: 0; border-radius: 10px; background: transparent;
    font: inherit; font-size: 15px; color: var(--h-ink); text-align: left; cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.heo-cat-ico {
    width: 34px; height: 34px; flex: none; border-radius: 50%;
    display: grid; place-items: center; background: var(--h-grad); color: #fff;
    box-shadow: 0 4px 10px -4px rgba(3, 42, 30, .45);
}
.heo-cat-ico .heo-ico { width: 17px; height: 17px; }
.heo-cat-label { min-width: 0; line-height: 1.3; }
.heo-cat:hover { background: var(--h-hover); }
.heo-cat:hover .heo-cat-label { color: var(--h-link); }
.heo-cat.is-active { background: var(--h-soft); }
.heo-cat.is-active .heo-cat-label { color: var(--h-link); font-weight: 600; }
.heo-cat:focus-visible { outline: none; box-shadow: var(--h-focus); }

.heo-pgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; align-items: stretch; }
.heo-pgrid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.heo-pgrid.cols-1 { grid-template-columns: minmax(0, 1fr); }
.heo-pcard {
    position: relative; display: flex; flex-direction: column; min-width: 0;
    background: var(--h-card); border: 1px solid var(--h-line); border-radius: 22px; overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.heo-pcard:hover { box-shadow: 0 22px 44px -26px rgba(3, 42, 30, .40); transform: translateY(-2px); }
.heo-pcard.is-featured { border: 2px solid color-mix(in srgb, var(--h-link) 70%, transparent); }
.heo-pcard.is-out { opacity: .7; }
.heo-pcard-ribbon {
    position: relative; overflow: hidden;
    padding: 12px 16px; background: var(--h-grad); color: #fff;
    text-align: center; font-size: 15px; font-weight: 500; letter-spacing: .01em;
}
.heo-pcard-ribbon::after {
    content: ""; position: absolute; right: -30px; top: -40px; width: 120px; height: 120px; border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 158, 11, .45), rgba(245, 158, 11, 0) 70%);
}
.heo-pcard-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 34px 36px 36px; }
.heo-pcard-top { display: flex; align-items: center; gap: 12px; }
.heo-pcard-top .heo-plan-ico, .heo-pcard-top .heo-plan-img { width: 38px; height: 38px; }
.heo-pcard-name {
    margin: 0 !important; font-size: 22px !important; font-weight: 700 !important; line-height: 1.2;
    text-transform: uppercase !important; letter-spacing: .005em; color: var(--h-ink);
}
.heo-pcard-tag { margin: 8px 0 0 !important; color: var(--h-muted); font-size: 14px; }
.heo-pcard-from { margin-top: 22px; color: var(--h-muted); font-size: 15.5px; }
.heo-pcard-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; }
.heo-pcard-amount { font-size: 31px; font-weight: 700; letter-spacing: -.015em; color: var(--h-ink); font-variant-numeric: tabular-nums; }
.heo-pcard-per { font-size: 19px; font-weight: 500; color: var(--h-muted); }
.heo-pcard .heo-plan-feats { margin: 26px 0 32px; padding: 0; border: 0; gap: 11px; font-size: 15px; }
.heo-pcard .heo-plan-feats li { display: flex; align-items: flex-start; gap: 12px; }
.heo-pcard .heo-plan-feats .heo-ico { width: 19px; height: 19px; color: var(--h-link); stroke-width: 2.3; margin-top: 1px; }
.heo-pcard .heo-plan-text { margin: 22px 0 28px; }
.heo-pcard .heo-stock { margin: -14px 0 16px; }
.heo-pcard-btn {
    margin-top: auto; width: 100%; min-height: 54px; padding: 0 20px;
    border: 2px solid var(--h-ink); border-radius: 30px; background: var(--h-card); color: var(--h-ink);
    font: inherit; font-size: 16px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; cursor: pointer;
    transition: background-color .15s ease, color .15s ease, filter .15s ease;
}
.heo-pcard-btn:hover:not(:disabled) { background: var(--h-ink); color: var(--h-card); }
.heo-pcard-btn:focus-visible { outline: none; box-shadow: var(--h-focus); }
.heo-pcard-btn:disabled { opacity: .55; cursor: not-allowed; }
.heo-pcard.is-featured .heo-pcard-btn { border: 0; background: var(--h-grad); color: #fff; }
.heo-pcard.is-featured .heo-pcard-btn:hover:not(:disabled) { filter: brightness(1.12); }

/* ---------- Configure page ---------- */
.heo-layout { grid-template-columns: minmax(0, 1fr) 380px; gap: 46px; }
.heo-main { gap: 50px; }
.heo-parts, .heo-options { display: grid; gap: 50px; min-width: 0; }
.heo-aside.is-sticky { top: 24px; }

.heo-sec { background: transparent; border: 0; padding: 0; border-radius: 0; box-shadow: none; }
.heo-sec-head { margin: 0 0 18px; }
.heo-sec-ico { display: none; }
.heo-sec-title { font-size: 24px !important; font-weight: 400 !important; letter-spacing: -.01em; }
.heo-main.is-numbered .heo-sec-num { width: 30px; height: 30px; border: 0; background: var(--h-grad); color: #fff; }

/* promotion bar with countdown */
.heo-promobar {
    position: relative; overflow: hidden; margin: 0 0 26px;
    border: 0 !important; border-radius: 12px; padding: 14px 18px;
    background: var(--h-grad) !important; color: #fff !important; font-weight: 500;
}
.heo-promobar::after {
    content: ""; position: absolute; right: 60px; top: -60px; width: 160px; height: 160px; border-radius: 50%;
    background: radial-gradient(circle, rgba(245, 158, 11, .35), rgba(245, 158, 11, 0) 70%); pointer-events: none;
}
.heo-promobar > * { position: relative; z-index: 1; }
.heo-promobar .heo-promobar-ico { background: rgba(255, 255, 255, .16); color: #fff; }
.heo-promobar .heo-countdown { color: #fff; font-weight: 700; }
.heo-promobar .heo-code { background: var(--h-accent); color: var(--h-accent-ink); border-color: transparent; }

/* chosen plan */
.heo-prodcard {
    background: var(--h-card); border: 1px solid var(--h-line); border-radius: var(--h-card-r);
    padding: 30px 30px 28px;
}
.heo-prodcard-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.heo-prodcard-title { flex: 1 1 auto; min-width: 0; margin: 0 !important; font-size: 24px !important; font-weight: 700 !important; letter-spacing: -.01em; color: var(--h-ink); }
.heo-prodcard-change { color: var(--h-link) !important; text-decoration: none; font-size: 14px; }
.heo-prodcard-change:hover { text-decoration: underline; }
.heo-prodcard-tag { margin: 6px 0 0 !important; color: var(--h-muted); }
.heo-prodcard-feats { margin-top: 22px !important; display: grid; gap: 6px; font-size: 15px; color: var(--h-muted); }
.heo-prodcard-feats strong { color: var(--h-ink); font-weight: 600; }

/* radio dot shared by tiles */
.heo-radio { width: 21px; height: 21px; border-color: color-mix(in srgb, var(--h-line) 40%, var(--h-muted)); }
.is-selected > .heo-radio { border-color: var(--h-link); }
.is-selected > .heo-radio::after { inset: 4px; background: var(--h-link); }

/* billing cycles */
.heo-cycles { gap: 26px 26px; }
.heo-cycle {
    flex-direction: row; align-items: flex-start; gap: 14px;
    min-height: 98px; padding: 24px 22px 20px; border-radius: var(--h-tile-r);
}
.heo-cycle-main { display: grid; gap: 3px; min-width: 0; }
.heo-cycle .heo-cycle-name { font-size: 16px; font-weight: 500; }
.heo-cycle .heo-cycle-price { gap: 10px; }
.heo-cycle .heo-cycle-price .heo-amount { font-size: 16px; font-weight: 600; }
.heo-cycle .heo-strike { font-size: 13.5px; color: var(--h-muted); }
.heo-cycle-per, .heo-cycle .heo-setup { font-size: 12.5px; color: var(--h-muted); }
.heo-cycle .heo-chip { justify-self: start; margin-top: 4px; }
.heo-save {
    position: absolute; top: -12px; right: 14px;
    padding: 4px 10px; border-radius: 7px;
    background: var(--h-accent); color: var(--h-accent-ink);
    font-size: 12.5px; font-weight: 600; white-space: nowrap; box-shadow: 0 4px 10px -6px rgba(180, 110, 0, .6);
}
.heo-cycle.is-selected, .heo-choice.is-selected, .heo-addon.is-selected, .heo-list-row.is-selected, .heo-seg-btn.is-selected, .heo-plan.is-selected {
    border-color: var(--h-link); box-shadow: inset 0 0 0 1px var(--h-link);
}

/* tiles (cards, locations, tabs) */
.heo-choices { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px 26px; }
.heo-choice { gap: 14px; min-height: 66px; padding: 16px 20px; border-radius: var(--h-tile-r); }
.heo-choice::before {
    content: ""; order: 0; flex: none; width: 21px; height: 21px; border-radius: 50%;
    border: 1.5px solid color-mix(in srgb, var(--h-line) 40%, var(--h-muted)); background: var(--h-card);
    transition: border-color .15s ease, background .15s ease;
}
.heo-choice.is-selected::before { border-color: var(--h-link); background: radial-gradient(circle, var(--h-link) 0 5px, var(--h-card) 5.6px); }
.heo-choice > .heo-tick { display: none; }
.heo-choice > .heo-choice-main { order: 1; }
.heo-choice > .heo-chip { order: 2; }
.heo-choice > .heo-mark, .heo-choice > .heo-mark-img, .heo-choice > .heo-flag-wrap { order: 3; margin-left: auto; }
.heo-choice-main strong { font-size: 15.5px; font-weight: 500; white-space: normal; }
.heo-choice-main small { font-size: 12.5px; color: var(--h-muted); }
.heo-choice-price { justify-items: start; font-weight: 600; color: var(--h-muted); }
.heo-mark { width: 34px; height: 34px; border-radius: 50%; font-size: 14px; }
.heo-mark-img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.heo-flag-wrap { width: 32px; height: 32px; }
.heo-flag { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.heo-flag-code { border-radius: 50%; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; }
.heo-image::before { display: none; }

/* region filter + option tabs: pill bar */
.heo-filter, .heo-pills {
    display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 5px; margin: 0 0 4px; max-width: 100%;
    background: var(--h-card); border: 1px solid var(--h-line); border-radius: 999px; justify-self: start;
}
.heo-filter-btn, .heo-pill {
    display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
    height: 38px; min-height: 0; padding: 0 18px !important; margin: 0 !important; border: 0; border-radius: 999px;
    background: transparent; color: var(--h-muted); font: inherit; font-size: 14.5px; font-weight: 500; line-height: 1 !important;
    white-space: nowrap; vertical-align: middle; text-transform: none; letter-spacing: normal; box-shadow: none;
    cursor: pointer; transition: background .15s ease, color .15s ease;
}
.heo-filter-btn:hover, .heo-pill:hover { color: var(--h-ink); }
.heo-filter-btn.is-on, .heo-pill.is-on { background: var(--h-grad); color: #fff; box-shadow: 0 6px 14px -8px rgba(3, 42, 30, .6); }
.heo-pill.has-sel::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-radius: 50%; background: var(--h-accent); vertical-align: 2px; }
.heo-filter-btn:focus-visible, .heo-pill:focus-visible { outline: none; box-shadow: var(--h-focus); }
.heo-places, .heo-otabs { display: grid; gap: 22px; }

/* dropdowns, sliders, steppers and switches sit in a white card */
.heo-opt { display: grid; gap: 14px; }
.heo-opt-head { font-size: 15px; }
.heo-opt-select > .heo-select-wrap,
.heo-opt-slider > .heo-slider-row,
.heo-opt-stepper > .heo-stepper-row {
    background: var(--h-card); border: 1px solid var(--h-line); border-radius: var(--h-card-r); padding: 26px 26px;
}
.heo-opt-select .heo-select-wrap .heo-ico { right: 38px; }
.heo-input { height: 50px; border-radius: 10px; border-color: color-mix(in srgb, var(--h-line) 70%, var(--h-muted)); font-size: 15px; }
.heo-input:focus { border-color: var(--h-link); box-shadow: 0 0 0 3px color-mix(in srgb, var(--h-link) 16%, transparent); }

.heo-slider-row { gap: 10px; padding-top: 48px !important; }
.heo-slider-track { position: relative; }
.heo-range { height: 22px; border-radius: 6px; background: linear-gradient(90deg, var(--h-link) var(--fill, 0%), #EEF1EF var(--fill, 0%)); }
.heo-range::-webkit-slider-thumb { width: 26px; height: 34px; border-radius: 8px; background: #fff; border: 1px solid var(--h-line); box-shadow: 0 2px 6px rgba(0, 0, 0, .14); }
.heo-range::-moz-range-thumb { width: 24px; height: 32px; border-radius: 8px; background: #fff; border: 1px solid var(--h-line); box-shadow: 0 2px 6px rgba(0, 0, 0, .14); }
.heo-slider-bubble {
    position: absolute; bottom: calc(100% + 10px); left: calc(13px + (100% - 26px) * var(--p, 0));
    transform: translateX(-50%); min-width: 36px; padding: 5px 9px; border-radius: 6px;
    background: var(--h-grad); color: #fff; font-size: 14px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums;
}
.heo-slider-bubble::after { content: ""; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #0B5D45; }
.heo-slider-ticks { display: flex; justify-content: space-between; padding: 6px 2px 0; font-size: 12.5px; color: var(--h-muted); font-variant-numeric: tabular-nums; }
.heo-slider-meta { color: var(--h-muted); }
.heo-slider-cost { font-weight: 600; color: var(--h-ink); }

/* ---------- Domain: options + brand band ---------- */
.heo-dom { background: var(--h-card); border: 1px solid var(--h-line); border-radius: var(--h-card-r); overflow: hidden; }
.heo-dom-modes { display: grid; gap: 14px; padding: 30px 36px; }
.heo-dom-mode {
    display: flex; align-items: center; gap: 13px; padding: 0; border: 0; background: transparent;
    cursor: pointer; font-size: 16px; color: var(--h-ink); outline: none; border-radius: 6px;
}
.heo-dom-mode:focus-visible { box-shadow: var(--h-focus); }
.heo-dom-mode.is-selected .heo-dom-mode-label { font-weight: 500; }
.heo-dom-band {
    position: relative; overflow: hidden; padding: 42px 36px;
    background: var(--h-grad);
}
.heo-dom-band::before, .heo-dom-band::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.heo-dom-band::before { width: 340px; height: 340px; right: -110px; top: -170px; background: radial-gradient(circle, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 70%); }
.heo-dom-band::after { width: 220px; height: 220px; left: -80px; bottom: -140px; background: radial-gradient(circle, rgba(245, 158, 11, .32), rgba(245, 158, 11, 0) 70%); }
.heo-dom-band > * { position: relative; z-index: 1; }
.heo-dom-band .heo-input-group { gap: 14px; }
.heo-dom-band .heo-input { height: 56px; border: 0; border-radius: 12px; font-size: 16px; padding: 0 18px; }
.heo-dom-band .heo-tld-wrap { flex: 0 0 140px; }
.heo-dom-band .heo-tld-wrap .heo-input { padding-right: 34px; }
.heo-dom-band .heo-field > label { color: #fff; }
.heo-dom-band .heo-help { color: rgba(255, 255, 255, .78); }
.heo-btn-band {
    min-height: 56px !important; padding: 0 30px; border: 0; border-radius: 12px;
    background: var(--h-accent); color: var(--h-accent-ink) !important; font-size: 16px; font-weight: 700;
}
.heo-btn-band:hover:not(:disabled) { filter: brightness(1.06); }
.heo-dom .heo-domain-result:not(:empty) { display: block; padding: 22px 36px 26px; }
.heo-free-note { margin-top: 12px !important; font-size: 13.5px; color: var(--h-muted); display: flex; align-items: center; gap: 8px; }

/* ---------- Add-ons, fields, server ---------- */
.heo-addons { grid-template-columns: minmax(0, 1fr); gap: 16px; }
.heo-addon { padding: 22px 24px; border-radius: var(--h-tile-r); }
.heo-addon-title strong { font-size: 16px; font-weight: 600; }
.heo-addon-main small { font-size: 14px; line-height: 1.55; color: var(--h-muted); }
.heo-addon-price { font-size: 15px; }
.heo-addon.is-selected .heo-checkbox { background: var(--h-link); border-color: var(--h-link); }
.heo-sec-fields .heo-sec-body, .heo-sec-server .heo-sec-body, .heo-sec-promo .heo-sec-body, .heo-sec-promo-bottom .heo-sec-body {
    background: var(--h-card); border: 1px solid var(--h-line); border-radius: var(--h-card-r); padding: 26px;
}

/* ---------- Order summary ---------- */
.heo-summary { gap: 0; padding: 30px 28px 26px; border-radius: var(--h-card-r); box-shadow: 0 1px 2px rgba(16, 24, 20, .04); }
.heo-summary-head h2 { font-size: 27px !important; font-weight: 300 !important; letter-spacing: -.01em; margin: 0 0 22px !important; }
.heo-sum-plan { padding: 0 0 18px; border-radius: 0; background: none; border-bottom: 1px solid var(--h-line); align-items: flex-start; }
.heo-sum-plan strong { font-size: 15px; font-weight: 500; }
.heo-sum-plan-price { font-size: 14px; font-weight: 500; text-align: right; }
.heo-sum-list { padding: 14px 0; border-bottom: 1px solid var(--h-line); gap: 10px; }
.heo-sum-list dt { font-weight: 400; }
.heo-sum-list dt small { color: var(--h-muted); }
.heo-sum-block { padding: 16px 0; border-bottom: 1px solid var(--h-line); display: grid; gap: 6px; }
.heo-sum-cap { font-size: 13.5px; color: var(--h-muted); }
.heo-sum-row { font-size: 14.5px; }
.heo-sum-row.is-block { padding: 16px 0; border-bottom: 1px solid var(--h-line); color: var(--h-muted); }
.heo-sum-row.is-discount { padding: 12px 0; color: var(--h-ok); }
.heo-sum-total { flex-direction: column; align-items: flex-start; gap: 4px; padding: 22px 0 20px; border-top: 0; }
.heo-sum-total-label { font-size: 14px; font-weight: 400; color: var(--h-muted); }
.heo-sum-total-amount { font-size: 34px; font-weight: 700; text-align: left; }
.heo-sum-renew, .heo-sum-note { margin: 0 0 12px !important; justify-content: flex-start; }
.heo-actions { display: grid; gap: 10px; }
.heo-btn-primary, .heo-btn-primary:hover:not(:disabled) { background: var(--h-grad); border: 0; color: #fff !important; }
.heo-btn-primary:hover:not(:disabled) { filter: brightness(1.12); }
.heo-actions .heo-btn-lg { min-height: 58px; border-radius: 12px; font-size: 18px; }
.heo-sum-promo, .heo-promo-toggle { margin-top: 14px; }
.heo-sum-foot { margin-top: 14px !important; }
.heo-errors { margin-bottom: 14px; }

/* ---------- Domain tabs inside the store frame ---------- */
.heo-store.is-domain .heo-layout { grid-template-columns: minmax(0, 1fr); gap: 30px; }

/* ---------- Responsive ---------- */
@media (max-width: 1399px) {
    .heo-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; }
    .heo-store { grid-template-columns: 250px minmax(0, 1fr); gap: 26px; }
    .heo-pgrid.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .heo-pcard-body { padding: 28px 28px 30px; }
    .heo-store.is-domain .heo-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1199px) {
    .heo-pgrid { gap: 22px; }
    .heo-cycles { gap: 20px; }
    .heo-choices { gap: 16px; }
}
@media (max-width: 991px) {
    .heo-store { grid-template-columns: minmax(0, 1fr); }
    .heo-cats { position: static; padding: 16px; }
    .heo-cats-title { display: none; }
    .heo-cats-list { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
    .heo-cats-list::-webkit-scrollbar { display: none; }
    .heo-cat { white-space: nowrap; width: auto; border: 1px solid var(--h-line); padding: 6px 14px 6px 6px; }
    .heo-cat-ico { width: 30px; height: 30px; }
    .heo-layout { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
    .heo-pgrid, .heo-pgrid.cols-3 { grid-template-columns: minmax(0, 1fr); }
    .heo-pcard-name { font-size: 19px !important; }
    .heo-pcard-amount { font-size: 27px; }
    .heo-sec-title { font-size: 20px !important; }
    .heo-main, .heo-parts, .heo-options { gap: 36px; }
    .heo-prodcard { padding: 22px 20px; }
    .heo-prodcard-title { font-size: 20px !important; }
    .heo-dom-modes { padding: 22px 20px; }
    .heo-dom-band { padding: 26px 20px; }
    .heo-dom-band .heo-input-group { flex-wrap: wrap; }
    .heo-dom-band .heo-input-group > .heo-input { flex: 1 1 100%; }
    .heo-dom-band .heo-tld-wrap { flex: 1 1 auto; }
    .heo-btn-band { flex: 1 1 auto; }
    .heo-dom .heo-domain-result:not(:empty) { padding: 18px 20px 20px; }
    .heo-filter, .heo-pills { border-radius: 14px; }
    .heo-save { right: 10px; }
}
@media (max-width: 640px) {
    .heo-cycles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
    .heo-cycle { padding: 20px 14px 16px; gap: 10px; }
}
@media (max-width: 640px) {
    .heo-filter, .heo-pills { flex-wrap: nowrap; overflow-x: auto; border-radius: 999px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .heo-filter::-webkit-scrollbar, .heo-pills::-webkit-scrollbar { display: none; }
    .heo-filter-btn, .heo-pill { flex: none; height: 36px; padding: 0 15px !important; font-size: 14px; }
}
@media (max-width: 420px) {
    .heo-cycle { padding: 18px 12px 14px; gap: 8px; min-height: 0; }
    .heo-cycle .heo-cycle-name { font-size: 15px; }
    .heo-cycle-price .heo-amount { font-size: 18px; }
}
@media (max-width: 340px) {
    .heo-cycles { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Dark mode ---------- */
html.nx-dark .heo-range { background: linear-gradient(90deg, var(--h-link) var(--fill, 0%), var(--h-line) var(--fill, 0%)); }
html.nx-dark .heo-pcard-btn { border-color: var(--h-ink); }

/* ==========================================================================
   1.2 — option widgets: logos, round flags, quantity sliders and steppers,
   switches. One white card per control, compact and aligned.
   ========================================================================== */
.heo-options .heo-sec-body { display: grid; gap: 26px; }
.heo-opt { gap: 12px; }
.heo-opt + .heo-opt { border-top: 0 !important; padding-top: 0 !important; }
.heo-opt-head { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--h-ink); }
.heo-opt-label { font-weight: 600; }
.heo-opt-desc { margin: -4px 0 0; font-size: 13px; color: var(--h-muted); }

/* logos and flags on tiles */
.heo-logo {
    order: 3; margin-left: auto; flex: none;
    width: 36px; height: 36px; border-radius: 50%;
    display: grid; place-items: center;
    background: #fff; box-shadow: 0 0 0 1px var(--h-line), 0 2px 6px -3px rgba(10, 25, 20, .18);
}
.heo-logo img { width: 22px; height: 22px; object-fit: contain; display: block; }
.heo-choice > .heo-logo { order: 3; margin-left: auto; }
.heo-flag-wrap { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; flex: none; }
.heo-flag-wrap .heo-flag { position: static; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .06); }
.heo-flag-wrap.is-rect .heo-flag { object-fit: cover; }
.heo-flag-wrap.is-code { overflow: visible; }
.heo-flag-wrap.is-code .heo-flag-code { width: 30px; height: 30px; font-size: 10px; }
.heo-choice { align-items: center; }
.heo-tile .heo-choice-main strong,
.heo-place .heo-choice-main strong { font-size: 15px; }

/* segmented buttons (short choices) */
.heo-seg { display: flex; flex-wrap: wrap; gap: 10px; }
.heo-seg-btn { min-width: 92px; min-height: 46px; padding: 8px 18px; border-radius: 12px; justify-content: center; display: inline-grid; place-items: center; gap: 0; }
.heo-seg-btn strong { font-size: 14.5px; font-weight: 600; }
.heo-seg-btn small { font-size: 12px; color: var(--h-muted); }

/* dropdown in a card */
.heo-opt-select > .heo-select-wrap { padding: 16px 18px !important; }
.heo-opt-select .heo-select-wrap .heo-input { height: 50px; }

/* quantity: slider or stepper in one compact card */
.heo-opt-slider > .heo-slider-row,
.heo-opt-stepper > .heo-stepper-row,
.heo-qty {
    background: var(--h-card); border: 1px solid var(--h-line); border-radius: 14px;
    padding: 18px 22px !important;
}
.heo-stepper-row.heo-qty { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 18px; }
.heo-qty-info { display: grid; gap: 2px; min-width: 0; }
.heo-qty-value { font-size: 16px; font-weight: 600; color: var(--h-ink); font-variant-numeric: tabular-nums; }
.heo-qty-note { font-size: 12.5px; color: var(--h-muted); }
.heo-qty-cost { font-size: 14px; font-weight: 600; color: var(--h-link); white-space: nowrap; font-variant-numeric: tabular-nums; }
.heo-qty .heo-stepper { border-radius: 12px; }
.heo-qty .heo-step { width: 44px; height: 44px; }
.heo-qty .heo-stepper .heo-qty-input { width: 64px; height: 44px; font-size: 15px; font-weight: 600; }

.heo-slider-row.heo-qty { display: grid; gap: 10px; }
.heo-slider-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 22px; }
.heo-slider-track { position: relative; padding-top: 32px; }
.heo-range { display: block; height: 8px !important; border-radius: 4px !important; margin: 0; background: linear-gradient(90deg, var(--h-link) var(--fill, 0%), color-mix(in srgb, var(--h-line) 70%, #fff) var(--fill, 0%)) !important; }
.heo-range::-webkit-slider-thumb { width: 22px !important; height: 22px !important; border-radius: 50% !important; background: #fff !important; border: 3px solid var(--h-link) !important; box-shadow: 0 2px 8px rgba(3, 42, 30, .25) !important; cursor: grab; }
.heo-range::-moz-range-thumb { width: 18px !important; height: 18px !important; border-radius: 50% !important; background: #fff !important; border: 3px solid var(--h-link) !important; box-shadow: 0 2px 8px rgba(3, 42, 30, .25) !important; }
.heo-slider-bubble {
    position: absolute; top: 0; bottom: auto; left: calc(11px + (100% - 22px) * var(--p, 0));
    transform: translateX(-50%); min-width: 30px; padding: 3px 8px; border-radius: 6px;
    background: var(--h-grad); color: #fff; font-size: 12.5px; font-weight: 700; line-height: 1.4; text-align: center;
}
.heo-slider-bubble::after { border-width: 4px; }
.heo-slider-ticks { position: relative; display: block; height: 18px; margin-top: 8px; padding: 0; }
.heo-slider-ticks span { position: absolute; top: 0; left: calc(11px + (100% - 22px) * var(--p, 0)); transform: translateX(-50%); font-size: 12px; color: var(--h-muted); }
.heo-slider-box {
    display: inline-flex; align-items: center; gap: 0; margin: 22px 0 0;
    border: 1px solid var(--h-line); border-radius: 12px; overflow: hidden; background: var(--h-card);
}
.heo-slider-box .heo-slider-input { width: 78px; height: 44px; border: 0; border-radius: 0; text-align: center; font-weight: 600; -moz-appearance: textfield; padding: 0 6px; }
.heo-slider-box .heo-slider-input::-webkit-inner-spin-button,
.heo-slider-box .heo-slider-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.heo-slider-box span { padding: 0 12px; height: 44px; display: grid; place-items: center; border-left: 1px solid var(--h-line); background: color-mix(in srgb, var(--h-line) 25%, var(--h-card)); font-size: 13px; color: var(--h-muted); }
.heo-slider-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 10px; border-top: 1px dashed var(--h-line); }

/* switch row */
.heo-toggle { padding: 16px 20px; border-radius: 14px; gap: 16px; }
.heo-toggle-label strong { font-size: 15px; font-weight: 600; }
.heo-toggle-label small { font-size: 12.5px; }
.heo-toggle .heo-choice-price { margin-left: auto; color: var(--h-link); font-weight: 600; }
.heo-toggle-state { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--h-muted); }
.heo-toggle.is-selected .heo-toggle-state { color: var(--h-link); }

@media (max-width: 767.98px) {
    .heo-stepper-row.heo-qty { grid-template-columns: minmax(0, 1fr) auto; }
    .heo-stepper-row.heo-qty .heo-qty-cost { grid-column: 1 / -1; order: 3; }
    .heo-slider-main { grid-template-columns: minmax(0, 1fr); gap: 6px; }
    .heo-slider-box { margin-top: 0; justify-self: start; }
    .heo-choices { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
}
html.nx-dark .heo-logo { background: #F4F6F5; }

/* plan card: the chosen plan's details (style picked in Settings > Layout > Chosen plan) */
.heo-prodcard-body { display: grid; gap: 12px; margin-top: 16px; }
.heo-prodcard-body.has-head { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--h-line); }
.heo-prodcard-label { margin: 0 !important; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--h-muted); }
.heo-pd { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0 !important; padding: 0 !important; list-style: none; }
.heo-pd > li { margin: 0 !important; min-width: 0; }
.heo-pd.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.heo-pd.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* icons: icon, value, label under it; dashed line between rows */
.heo-feat-list { gap: 0 28px; overflow: hidden; }
.heo-feat { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--h-line); }
.heo-pd > li.heo-feat { margin: 0 0 -1px !important; }
.heo-feat-ico { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 10px;
    background: color-mix(in srgb, var(--h-link) 9%, var(--h-card)); color: var(--h-link); }
.heo-feat-ico .heo-ico { width: 18px; height: 18px; }
.heo-feat-text { display: grid; gap: 1px; min-width: 0; font-size: 15px; line-height: 1.35; color: var(--h-ink); }
.heo-feat-text strong { font-weight: 700; color: var(--h-ink); overflow-wrap: anywhere; }
.heo-feat-text small { font-size: 12.5px; color: var(--h-muted); }
.heo-feat:not(.is-spec) .heo-feat-text { display: block; color: var(--h-muted); }

/* simple: one line each, bold value then label, no icons */
.heo-pd-simple { gap: 2px 28px; }
.heo-pd-simple > li { font-size: 15.5px; line-height: 1.75; color: var(--h-muted); overflow-wrap: anywhere; }
.heo-pd-simple strong { font-weight: 700; color: color-mix(in srgb, var(--h-ink) 82%, var(--h-muted)); }

/* checks: tick before each line */
.heo-pd-checks { gap: 6px 28px; }
.heo-pd-checks > li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--h-muted); }
.heo-pd-checks > li .heo-ico { flex: none; margin-top: 4px; color: var(--h-link); }
.heo-pd-checks strong { font-weight: 700; color: var(--h-ink); }

/* tiles: spec boxes */
.heo-pd-tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.heo-pd-tile { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px;
    background: color-mix(in srgb, var(--h-link) 6%, var(--h-card)); border: 1px solid color-mix(in srgb, var(--h-link) 14%, var(--h-line)); }
.heo-pd-tile small { font-size: 12px; color: var(--h-muted); }
.heo-pd-tile strong { font-size: 15.5px; font-weight: 700; color: var(--h-ink); overflow-wrap: anywhere; }

@media (max-width: 640px) {
    .heo-pd.cols-2, .heo-pd.cols-3 { grid-template-columns: minmax(0, 1fr); }
    .heo-pd-tiles, .heo-pd-tiles.cols-2, .heo-pd-tiles.cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* an option with a single possible value: a read-only line */
.heo-fixed { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border: 1px solid var(--h-line); border-radius: var(--h-r); background: var(--h-card); }
.heo-fixed-ico { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--h-ok) 14%, var(--h-card)); color: var(--h-ok); }
.heo-fixed-value { font-weight: 700; color: var(--h-ink); }
.heo-fixed small { color: var(--h-muted); }
.heo-fixed-price { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--h-muted); }

/* flags: soft ring so white flags keep their edge */
.heo-flag-wrap { box-shadow: 0 0 0 1px var(--h-line); }

/* dropdown: plain full-width field, no extra card */
.heo-opt-select > .heo-select-wrap { background: transparent !important; border: 0 !important; padding: 0 !important; box-shadow: none !important; }
.heo-opt-select .heo-select-wrap .heo-input { height: 52px; border-radius: 12px; font-size: 15px; }

/* stepper info */
.heo-stepper-row .heo-qty-value { font-size: 15px; }

/* long text fields span the full width */
.heo-field:has(textarea) { grid-column: 1 / -1; }
.heo-field textarea.heo-input { min-height: 96px; }
.heo-toggle.is-selected { border-color: var(--h-link) !important; box-shadow: inset 0 0 0 1px var(--h-link); }

/* ==========================================================================
   1.2 — Register / Transfer domain pages: search banner, result, cart strip,
   "Most Popular" TLD cards, promo cards and the authorization code dialog.
   ========================================================================== */
.heo-modal {
    --h-grad: var(--he-grad, linear-gradient(118deg, #032A1E 0%, #0E7A58 100%));
    --h-link: var(--nx-link, #0B6B4F);
}
.heo-layout.is-single { grid-template-columns: minmax(0, 1fr); }
.heo-dz { display: grid; gap: 22px; }

.heo-dz-hero {
    position: relative; overflow: hidden; border-radius: 18px; padding: 30px 32px 26px;
    background: var(--h-grad); color: #fff; display: grid; gap: 20px;
}
.heo-dz-hero::after {
    content: ""; position: absolute; right: -60px; top: -80px; width: 260px; height: 260px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%); pointer-events: none;
}
.heo-dz-hero-copy { display: flex; align-items: center; gap: 16px; position: relative; z-index: 1; }
.heo-dz-hero-ico { width: 48px; height: 48px; flex: none; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, .14); }
.heo-dz-hero-ico .heo-ico { width: 24px; height: 24px; }
.heo-dz-hero h2 { margin: 0 !important; font-size: 22px !important; font-weight: 700 !important; color: #fff !important; letter-spacing: -.01em; }
.heo-dz-hero p { margin: 4px 0 0 !important; color: rgba(255, 255, 255, .82) !important; font-size: 14.5px; }
.heo-dz-form { display: grid; gap: 12px; position: relative; z-index: 1; }
.heo-dz-label { font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .9); }
.heo-dz-bar {
    display: flex; align-items: center; gap: 0; background: #fff; border-radius: 14px; padding: 6px;
    box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .55);
}
.heo-dz-bar-ico { width: 44px; display: grid; place-items: center; color: #6B7A73; flex: none; }
.heo-dz-input {
    flex: 1 1 auto; min-width: 0; height: 48px; border: 0 !important; outline: 0; background: transparent !important;
    font-size: 16px; color: #0F1A15; padding: 0 8px; box-shadow: none !important;
}
.heo-dz-tld { flex: none; position: relative; border-left: 1px solid #E3E9E6; margin: 0 8px 0 0; }
.heo-dz-tld select { height: 48px; border: 0 !important; background: transparent !important; padding: 0 30px 0 14px; font-weight: 600; color: #0F1A15; appearance: none; -webkit-appearance: none; box-shadow: none !important; }
.heo-dz-tld .heo-ico { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; color: #6B7A73; }
.heo-btn.heo-dz-go {
    flex: none; height: 48px; padding: 0 26px; border-radius: 10px; border: 0;
    background: var(--h-grad); color: #fff; font-weight: 600; font-size: 15px;
}
.heo-btn.heo-dz-go:hover { filter: brightness(1.12); color: #fff; }
.heo-dz-hero .heo-years { color: rgba(255, 255, 255, .85); }
.heo-dz-hero .heo-years .heo-muted { color: rgba(255, 255, 255, .8); }
.heo-dz-hero .heo-filter-btn { background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .22); }
.heo-dz-hero .heo-filter-btn.is-on { background: #fff; color: #0B3B2C; border-color: #fff; box-shadow: none; }
.heo-dz-foot { margin: 0 !important; font-size: 12.5px !important; color: rgba(255, 255, 255, .72) !important; }

.heo-dz-result[hidden], .heo-dz-cart[hidden] { display: none !important; }
.heo-dz-result .heo-dr { border-radius: 16px; background: var(--h-card); padding: 18px 20px; gap: 16px; }
.heo-dz-result .heo-dr.is-big .heo-dr-ico { width: 44px; height: 44px; }
.heo-dz-result .heo-dr.is-big .heo-dr-ico .heo-ico { width: 22px; height: 22px; }
.heo-dz-result .heo-dr-text strong { font-size: 16.5px; font-weight: 600; }
.heo-dz-result .heo-dr-price { font-size: 20px; }

.heo-dz-cart {
    display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 14px;
    background: color-mix(in srgb, var(--h-link) 7%, var(--h-card)); border: 1px solid color-mix(in srgb, var(--h-link) 22%, var(--h-line));
}
.heo-dz-cart-ico { width: 40px; height: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--h-grad); color: #fff; }
.heo-dz-cart-text { flex: 1 1 auto; min-width: 0; display: grid; gap: 2px; }
.heo-dz-cart-text strong { font-weight: 600; }
.heo-dz-cart-text small { color: var(--h-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.heo-dz-cart-act { display: flex; gap: 8px; flex: none; }

.heo-dz-sec { display: grid; gap: 14px; }
.heo-dz-sec[hidden] { display: none; }
.heo-dz-title { margin: 6px 0 0 !important; font-size: 20px !important; font-weight: 600 !important; color: var(--h-ink); text-align: center; }
.heo-dz .heo-spot { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.heo-dz .heo-spot-card {
    position: relative; overflow: hidden; display: grid; justify-items: center; text-align: center; gap: 6px;
    padding: 26px 16px 18px; border-radius: 16px; background: var(--h-card); border: 1px solid var(--h-line);
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.heo-dz .heo-spot-card.is-clickable:hover { border-color: var(--h-link); box-shadow: 0 12px 26px -20px rgba(3, 42, 30, .55); transform: translateY(-2px); }
.heo-dz .heo-spot-tld { font-size: 26px; font-weight: 700; color: var(--h-ink); }
.heo-dz .heo-spot-price { font-size: 15px; color: var(--h-ink); }
.heo-dz .heo-spot-card > .heo-btn { margin-top: 6px; min-width: 96px; justify-content: center; }
.heo-spot-pick { pointer-events: none; }
.heo-spot-taken { margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--h-bad); }
.heo-ribbon {
    position: absolute; top: 12px; left: -30px; width: 110px; transform: rotate(-45deg);
    padding: 3px 0; text-align: center; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff;
}
.heo-ribbon.is-hot { background: #E5484D; }
.heo-ribbon.is-sale { background: #F5A524; color: #3B2500; }
.heo-ribbon.is-new { background: #12A26E; }

.heo-dz .heo-suggest { background: var(--h-card); border-radius: 16px; }
.heo-dz .heo-suggest-row { padding: 14px 18px; }

.heo-dz-promos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.heo-dz-promo {
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 6px 16px;
    padding: 22px; border-radius: 16px; background: var(--h-card); border: 1px solid var(--h-line);
}
.heo-dz-promo-ico { grid-row: span 2; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; background: color-mix(in srgb, var(--h-link) 10%, var(--h-card)); color: var(--h-link); }
.heo-dz-promo-ico .heo-ico { width: 26px; height: 26px; }
.heo-dz-promo-body { display: grid; gap: 4px; }
.heo-dz-promo-body strong { font-size: 17px; font-weight: 600; color: var(--h-ink); }
.heo-dz-promo-sub { margin: 0 !important; font-size: 14px; color: var(--h-ink); }
.heo-dz-promo-body small { font-size: 12.5px; color: var(--h-muted); }
.heo-dz-promo > .heo-btn { grid-column: 2; justify-self: start; margin-top: 8px; }
.heo-dz .heo-table-wrap { background: var(--h-card); border-radius: 16px; }

/* authorization code dialog */
.heo-epp-box { width: min(460px, 100%); padding: 28px 26px 22px; border-radius: 18px; gap: 12px; }
.heo-epp-ico { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--h-grad); color: #fff; justify-self: start; }
.heo-epp-ico .heo-ico { width: 24px; height: 24px; }
.heo-epp-box h2 { font-size: 20px !important; font-weight: 700; }
.heo-epp-box .heo-epp-domain { font-weight: 600; color: var(--h-link); font-size: 15px; }
.heo-epp-box .heo-field { display: grid; gap: 6px; margin-top: 4px; }
.heo-epp-box .heo-field label { font-size: 13.5px; font-weight: 600; color: var(--h-ink); }
.heo-epp-box .heo-input { height: 50px; border-radius: 12px; font-size: 15px; }
.heo-epp-box .heo-modal-actions .heo-btn { min-width: 110px; justify-content: center; height: 46px; border-radius: 12px; }
.heo-epp-box .heo-btn-primary { background: var(--h-grad); border: 0; color: #fff; }

@media (max-width: 767.98px) {
    .heo-dz-hero { padding: 22px 18px; border-radius: 16px; }
    .heo-dz-hero-copy { align-items: flex-start; }
    .heo-dz-hero-ico { width: 40px; height: 40px; }
    .heo-dz-hero h2 { font-size: 18px !important; }
    .heo-dz-bar { flex-wrap: wrap; padding: 6px; }
    .heo-dz-bar-ico { display: none; }
    .heo-dz-input { flex: 1 1 60%; }
    .heo-btn.heo-dz-go { flex: 1 1 100%; margin-top: 6px; }
    .heo-dz-tld { margin-right: 0; }
    .heo-dz-cart { flex-wrap: wrap; }
    .heo-dz-cart-act { width: 100%; }
    .heo-dz-cart-act .heo-btn { flex: 1 1 0; justify-content: center; }
    .heo-dz .heo-spot { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .heo-dz-result .heo-dr { flex-wrap: wrap; }
}
html.nx-dark .heo-dz-bar { background: #0F1A16; }
html.nx-dark .heo-dz-input, html.nx-dark .heo-dz-tld select { color: #E8EFEC; }
html.nx-dark .heo-dz-tld { border-color: #24332D; }
.heo-dz-hero .heo-dz-label { color: rgba(255, 255, 255, .9) !important; font-weight: 600; }
.heo-modal-box p.heo-field-error, .heo-epp-box .heo-field-error { color: var(--h-bad, #D93036); font-size: 13px; font-weight: 500; }

/* phones: two compact tiles per row, the border shows the selection */
@media (max-width: 575.98px) {
    .heo-choices { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
    .heo-choice { padding: 12px !important; gap: 8px !important; min-height: 58px; }
    .heo-choice::before { display: none !important; }
    .heo-choice-main { min-width: 0; }
    .heo-choice-main strong { font-size: 14px !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; overflow-wrap: anywhere; line-height: 1.3; }
    .heo-logo { width: 30px; height: 30px; }
    .heo-logo img { width: 18px; height: 18px; }
    .heo-flag-wrap, .heo-flag-wrap .heo-flag { width: 26px; height: 26px; }
    .heo-dz .heo-suggest-row { flex-wrap: wrap; row-gap: 8px; }
    .heo-dz .heo-suggest-row strong { flex: 1 1 100%; }
    .heo-dz .heo-suggest-price { margin-right: auto; }
    .heo-dz-hero .heo-filter-btn { padding: 4px 12px; font-size: 13px; }
}
.heo-fixed-logo { width: 26px; height: 26px; object-fit: contain; }

/* one-page form: cycle tiles stack name, price and "billed" text */
.heo-cycle.is-classic { flex-direction: column; align-items: stretch; gap: 6px; min-height: 0; padding: 20px 18px 16px; }
.heo-cycle.is-classic .heo-cycle-top { display: flex; align-items: center; gap: 8px; }
.heo-cycle.is-classic .heo-cycle-top > :last-child { margin-left: auto; }
.heo-cycle.is-classic .heo-cycle-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.heo-cycle.is-classic .heo-cycle-price .heo-amount { font-size: 22px; }
.heo-cycle.is-classic .heo-cycle-sub { font-size: 12.5px; color: var(--h-muted); }
.heo-cycle.is-classic .heo-pick-btn { align-self: flex-start; }

/* ===================== 4.0.0 ===================== */
/* plan details: one line per feature with a small icon (default style "list") */
.heo-pd-list { gap: 0 32px; }
.heo-pd-list > li { display: flex; align-items: center; gap: 11px; padding: 8px 0; font-size: 14.5px; line-height: 1.4; color: var(--h-ink); border-bottom: 1px dashed var(--h-line); }
.heo-pd-list > li:last-child { border-bottom: 0; }
.heo-pd-list.cols-2 > li:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
.heo-pd-ico { width: 20px; height: 20px; flex: none; display: grid; place-items: center; color: var(--h-link); }
.heo-pd-ico .heo-ico { width: 17px; height: 17px; }
.heo-pd-txt { min-width: 0; overflow-wrap: anywhere; color: var(--h-muted); }
.heo-pd-txt strong { font-weight: 600; color: var(--h-ink); }

/* billing cycle tiles: about 18% smaller */
.heo-cycles { gap: 16px 18px; }
.heo-cycle { min-height: 0; padding: 15px 16px 14px; gap: 11px; }
.heo-cycle .heo-cycle-name { font-size: 14.5px; }
.heo-cycle .heo-cycle-price .heo-amount { font-size: 15px; }
.heo-cycle .heo-strike { font-size: 12.5px; }
.heo-cycle-per, .heo-cycle .heo-setup { font-size: 12px; }
.heo-cycle .heo-radio { width: 18px; height: 18px; }
.heo-save { top: -10px; right: 12px; padding: 3px 8px; font-size: 11.5px; border-radius: 6px; }

/* order summary: shorter and a little narrower */
.heo-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 36px; }
.heo-summary { padding: 22px 22px 20px; }
.heo-summary-head h2 { font-size: 21px !important; font-weight: 600 !important; margin: 0 0 14px !important; }
.heo-sum-plan { padding: 0 0 12px; }
.heo-sum-plan strong { font-size: 14.5px; }
.heo-sum-list { padding: 10px 0; gap: 7px; }
.heo-sum-list .heo-sum-row { font-size: 13.5px; }
.heo-sum-block { padding: 10px 0; gap: 4px; }
.heo-sum-row.is-block { padding: 10px 0; }
.heo-sum-row.is-discount { padding: 8px 0; }
.heo-sum-total { padding: 14px 0 10px; gap: 2px; }
.heo-sum-total-amount { font-size: 28px; }
.heo-sum-renew, .heo-sum-note { margin: 0 0 10px !important; font-size: 12.5px; }
.heo-actions .heo-btn-lg { min-height: 50px; font-size: 16px; border-radius: 11px; }
.heo-sum-promo, .heo-promo-toggle { margin-top: 10px; }
.heo-sum-foot { margin-top: 10px !important; }

/* OS / app versions inside one tile */
.heo-tile.has-vers .heo-choice-main { gap: 5px; }
.heo-ver-wrap { position: relative; display: inline-flex; align-items: center; align-self: flex-start; max-width: 100%; }
.heo-ver { appearance: none; -webkit-appearance: none; height: 30px; padding: 0 28px 0 10px; border: 1px solid var(--h-line); border-radius: 8px;
    background: var(--h-card); color: var(--h-ink); font: 500 13px/1 inherit; cursor: pointer; max-width: 100%; }
.heo-ver:focus { outline: 2px solid color-mix(in srgb, var(--h-link) 35%, transparent); outline-offset: 1px; border-color: var(--h-link); }
.heo-ver-wrap .heo-ico { position: absolute; right: 9px; pointer-events: none; color: var(--h-muted); }
.is-selected .heo-ver { border-color: color-mix(in srgb, var(--h-link) 45%, var(--h-line)); }

@media (max-width: 1399px) { .heo-layout { grid-template-columns: minmax(0, 1fr) 330px; gap: 28px; } }
@media (max-width: 991px) { .heo-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 575px) { .heo-cycle { padding: 13px 14px 12px; } .heo-summary { padding: 18px 16px 16px; } }
.heo-tile .heo-ver-wrap { display: inline-flex !important; width: auto !important; margin: 0 !important; padding: 0 !important; }
.heo-tile .heo-ver { min-width: 92px; width: auto !important; }