/*
 * The funnel and the customer panel.
 *
 * Why this file exists at all: the purchased theme is a *brochure* theme. Its WHMCS half ships the
 * marketing pages and leaves the cart, the checkout and the client area to WHMCS core — whose
 * stylesheet is built on Bootstrap 4, while the theme we serve carries Bootstrap 5. Importing it
 * would drop a second, older Bootstrap on top of ours (`.form-group`, `.ml-auto`, `.panel`), and the
 * collisions would be silent. So the shop is styled here, against the theme's own custom properties
 * (`--color-primary`, `--border-color`, …), and it inherits the site's typography and buttons rather
 * than restating them.
 *
 * Everything below is layout. No colours are invented: every one is a `var(--…)` the theme declared.
 */

/* ---------------------------------------------------------------- shared */

.shop-section {
    padding: 80px 0;
}

.shop-section h1 {
    margin-bottom: 8px;
}

.shop-section .shop-lead {
    color: var(--btc);
    margin-bottom: 40px;
}

.shop-panel {
    background: var(--color-white);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    box-shadow: var(--box-shadow);
    padding: 32px;
}

.shop-panel + .shop-panel {
    margin-top: 24px;
}

.shop-panel__title {
    font-size: 20px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-color);
}

.shop-hidden {
    display: none !important;
}

.shop-muted {
    color: var(--btc);
}

/* --------------------------------------------------------------- alerts */

.shop-alert {
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 24px;
    font-size: 15px;
    line-height: 1.5;
}

.shop-alert--error {
    background: #FFF1F1;
    border: 1px solid #FFD2D2;
    color: #B42318;
}

.shop-alert--notice {
    background: #EEFBF3;
    border: 1px solid #CDEFDB;
    color: #067647;
}

/*
 * A 503 is not a refusal, and it must not look like one. The backend keeps
 * `VatValidationUnavailable`, `InvoiceProviderUnavailable` and `DomainAvailabilityStatus::UNKNOWN`
 * apart from a rejection precisely so the shop can say "try again" instead of "no" — a red box
 * saying "your VAT number is invalid" when in truth VIES was down gets a company charged as an
 * individual. So an outage is amber and reads as temporary, and it is never red.
 */
.shop-alert--retry {
    background: #FFF8EB;
    border: 1px solid #FDE2B2;
    color: #93590C;
}

.shop-alert ul {
    margin: 0;
    padding-left: 20px;
}

/* ----------------------------------------------------------------- table */

.shop-table {
    width: 100%;
    border-collapse: collapse;
}

.shop-table th,
.shop-table td {
    padding: 16px 12px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--border-color);
}

.shop-table thead th {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--btc);
    border-bottom: 1px solid var(--light-border);
}

.shop-table td.shop-num,
.shop-table th.shop-num {
    text-align: right;
    white-space: nowrap;
}

.shop-table tbody tr:hover {
    background: var(--plan-bg);
}

.shop-table__name {
    font-weight: 600;
    color: var(--color-secondary);
}

.shop-table__sub {
    display: block;
    font-size: 13px;
    color: var(--btc);
    margin-top: 2px;
}

/* A cart or panel table on a phone: each row becomes a card, with the header as a label. */
@media (max-width: 767px) {
    .shop-table thead {
        display: none;
    }

    .shop-table,
    .shop-table tbody,
    .shop-table tr,
    .shop-table td {
        display: block;
        width: 100%;
    }

    .shop-table tr {
        border: 1px solid var(--border-color);
        border-radius: 10px;
        margin-bottom: 16px;
        padding: 8px 4px;
    }

    .shop-table td {
        border: 0;
        display: flex;
        justify-content: space-between;
        gap: 16px;
        padding: 8px 14px;
        text-align: right;
    }

    .shop-table td::before {
        content: attr(data-label);
        font-size: 13px;
        font-weight: 600;
        color: var(--btc);
        text-align: left;
    }

    .shop-table td.shop-num {
        text-align: right;
    }
}

/* ------------------------------------------------------------------ cart */

.shop-cart__empty {
    padding: 48px 0;
    text-align: center;
    color: var(--btc);
}

.shop-cart__totals {
    margin-top: 24px;
    margin-left: auto;
    max-width: 380px;
}

.shop-cart__totals dl {
    display: flex;
    justify-content: space-between;
    margin: 0 0 12px;
}

.shop-cart__totals dt {
    color: var(--btc);
    font-weight: 400;
}

.shop-cart__totals dd {
    margin: 0;
    font-weight: 600;
}

.shop-cart__totals .shop-cart__grand {
    border-top: 1px solid var(--light-border);
    padding-top: 12px;
    margin-bottom: 0;
    font-size: 20px;
}

.shop-cart__grand dt,
.shop-cart__grand dd {
    color: var(--color-secondary);
    font-weight: 700;
}

.shop-cart__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-top: 32px;
    flex-wrap: wrap;
}

.shop-cart__remove {
    background: none;
    border: 0;
    color: var(--btc);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition);
}

.shop-cart__remove:hover {
    color: #B42318;
}

/*
 * The tax assumption, and it is not decoration. An anonymous visitor is priced at the storefront's
 * default country as a private individual — the highest rate an ordinary buyer pays — so the figure
 * can only fall at checkout. Unlabelled, that is a price that changes; labelled, a company's reverse
 * charge is a pleasant surprise. docs/STOREFRONT.md §1.4 makes the label mandatory.
 */
.shop-tax-label {
    margin-top: 20px;
    padding: 12px 16px;
    background: var(--plan-bg);
    border-radius: 8px;
    font-size: 14px;
    color: var(--btc);
}

/*
 * The plan cards need something to sit on, and the theme keys that off the body, not the section.
 *
 * `.card-plan` is white with a **transparent** 1px border and no shadow, so its edges are drawn by
 * contrast alone. The theme supplies that contrast with
 * `.wordpress-hosting .rts-pricing-plan, .template-resell .rts-pricing-plan { background: #F4F9FF }`
 * — a rule keyed on the body's template class. Any new plan page that names a template class of its
 * own therefore gets white cards on a white section and looks unframed. Measured 2026-09-22 on the
 * mail page, where exactly that happened and the cards read as loose text.
 *
 * Same token as the theme uses, so nothing here is a new colour. A page added later needs its
 * template class on this list or it will hit the same thing.
 */
.email-hosting .rts-pricing-plan {
    background: #F4F9FF;
}

/* --------------------------------------------------------------- domains */

/*
 * One height for every extension mark, so the row of cards reads as a set.
 *
 * The marks are somebody else's artwork and arrive at whatever size they were drawn. Measured
 * 2026-09-22: `.eu`, `.org`, `.info`, `.shop` and `.xyz` render 28px tall, `.net` 29, `.com` 32, and
 * the `.hu` mark 56, which is exactly double and made its card 284px against the others' 257.
 *
 * 28 is the number because six of the eight already sit there. The consequence worth naming: `.com`
 * comes down from 32, so this does adjust one of the theme's own marks rather than only the one that
 * was added. An even row is the point, and a single mark standing 4px proud of the rest is the same
 * untidiness in miniature.
 *
 * `width: auto` keeps each mark's own proportions; every one of these files carries a viewBox, so
 * they scale rather than squash.
 */
.pricing-wrapper .logo img {
    height: 28px;
    width: auto;
}


/*
 * Behaviour and appearance are kept apart here on purpose. The `shop-search__*` / `shop-cart__*`
 * names are **JavaScript hooks** — `shop/partials/js.blade.php` binds to them — and the rest of the
 * names below are presentation. A redesign may restyle freely; it may not rename a hook without
 * moving the handler with it.
 */

.shop-search__results {
    list-style: none;
    padding: 0;
    margin: 32px 0 0;
}

.shop-search__empty {
    margin-top: 24px;
    color: var(--btc);
}

.shop-search__result {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    background: var(--color-white);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 12px;
}

.shop-search__result--available {
    border-color: var(--color-primary);
    box-shadow: var(--box-shadow);
}

.shop-search__domain {
    flex: 1 1 240px;
    font-size: 18px;
    font-weight: 700;
    color: var(--color-secondary);
    word-break: break-all;
}

.shop-search__status {
    font-size: 14px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
}

.shop-search__status--available {
    background: #EEFBF3;
    color: #067647;
}

.shop-search__status--taken {
    background: #F3F4F6;
    color: var(--btc);
}

.shop-search__status--unsupported,
.shop-search__status--forbidden {
    background: #F3F4F6;
    color: var(--btc);
}

/*
 * `unknown` is the whole point of the search design, so it gets a look of its own and never a price.
 * A registrar timeout is not a "no" — and a stale "available" takes money for a registration that
 * then fails, which is the one outcome that cannot be undone. Amber, like every other "we could not
 * ask" in this shop, and never the grey of a refusal.
 */
.shop-search__status--unknown {
    background: #FFF8EB;
    color: #93590C;
}

.shop-search__price {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-secondary);
    white-space: nowrap;
}

.shop-search__price small {
    display: block;
    font-size: 13px;
    font-weight: 400;
    color: var(--btc);
}

/* The button that buys the name had no colour, so it was invisible until hovered.

   `.primary__btn` is the theme's button, and reading it in full is the whole story: padding, radius,
   font, `border: 1px solid transparent`, a transition — and **no background and no colour**. It gets
   those only from `:hover`, which turns it amber. Everywhere else in the theme it is paired with a
   colour from its surroundings; dropped onto a white result row with nothing else, it rendered as
   bare text on white and then lit up amber under the cursor. Reported as "the add-to-cart button is
   not visible by default" (2026-09-23), which is exactly what it was.

   So the two buttons in a search result carry their own colour. The hover stays the theme's, because
   an amber hover is what every other button in this shop does and the point here was the resting
   state, not the interaction. */
.shop-search__add,
.shop-search__transfer {
    background: var(--color-primary);
    color: var(--color-white);
    padding: 12px 26px;
}

.shop-search__add:hover,
.shop-search__transfer:hover {
    background: var(--color-third);
    color: var(--color-secondary);
}

/* The TLD table's own controls: a filter box and the category tabs. */
/*
 * The filter and the category buttons sit in the middle, under a centred heading.
 *
 * `justify-content` alone does it: the filter is capped at 320px by its own `max-width`, so it
 * cannot swallow the free space even though it is allowed to grow, and the tabs do not grow at all.
 * That leaves real free space for the centring to divide, measured 2026-09-22 as 555px of a
 * 1320px row.
 */
.shop-tld-controls {
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 24px;
}

/*
 * The count on the left, the filter on the right, immediately above the table they both describe.
 */
.shop-tld-listbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}

.shop-tld-listbar .shop-tld-count {
    margin: 0;
}

/*
 * A white fill, because the field had none and was hard to see.
 *
 * Measured 2026-09-22: the input's own background computed `rgba(0, 0, 0, 0)` while the section
 * behind it is `rgb(244, 249, 255)`, and its border is `--light-border`, a pale blue. So it was a
 * faint outline on a faint tint with nothing inside it, which reads as decoration rather than as
 * somewhere to type. White is the theme's own `--color-white`, the same fill its cards use to lift
 * off this section.
 *
 * `flex: 0 1 320px` rather than `1 1 260px`: in this row it must sit at the right-hand end, and an
 * item allowed to grow would stretch across the gap that `space-between` is there to create.
 */
.shop-tld-filter {
    flex: 0 1 320px;
    max-width: 320px;
    padding: 12px 16px;
    border: 1px solid var(--light-border);
    border-radius: 8px;
    background: var(--color-white);
    font-size: 15px;
}

/*
 * Once the row wraps, the field fills its own line instead of trailing off.
 *
 * The count is 105px, the field 320px and the gap 16px, so the bar needs 441px of inner width to
 * hold both on one line, and the bar is the viewport less 20px of padding. Measured 2026-09-22:
 * one line at 576 and 768 with the field flush right and a gap of exactly 0, two lines at 390 with
 * the field sitting left and 50px of nothing beside it. That puts the turn just under 461px, which
 * is why this is not the usual 575px breakpoint: at 575 the field still sits neatly on one line,
 * and stretching it there would undo the alignment rather than tidy it.
 */
@media (max-width: 460px) {
    .shop-tld-filter {
        flex-basis: 100%;
        max-width: none;
    }
}

.shop-tld-filter:focus {
    outline: none;
    border-color: var(--color-primary);
}

/*
 * The buttons centre themselves too, not only the row that holds them.
 *
 * Centring the outer row is enough while the four fit on one line, which is why this looked right on
 * a desktop and ragged on a phone: measured 2026-09-22 at 390px, the group wrapped to two lines and
 * both packed to the left, leaving "Földrajzi" alone at the left edge under the other three. On a
 * wide screen this declaration changes nothing, because the group is exactly as wide as its buttons.
 */
.shop-tld-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
}

/*
 * The tabs sat one per line, centred, and the container was not the culprit.
 *
 * `.shop-tld-tabs` is already a wrapping flex row. Measured 2026-09-22: each button computed to
 * `display: block` at the container's full 401px, so four full-width items wrapped onto four lines,
 * and `text-align: center` then centred each label. The theme sizes bare buttons that way. Naming
 * the width here is the whole fix, and it explains both symptoms at once.
 */
/*
 * The price list is 845 rows, so its header travels with the reader. Above 1200px only.
 *
 * `position: sticky` fails *silently* inside a scrolling ancestor, and this page has one: the theme
 * puts `overflow-x: hidden` on `body` (style.css:148) to swallow Bootstrap's negative row gutters,
 * and the moment one axis is hidden the other computes to `auto`, so the body becomes the scrollport
 * and every sticky element inside it stops sticking. Measured 2026-09-22: the header sat 599px above
 * the viewport, and neutralising the body's overflow moved it to exactly its 82px offset.
 *
 * So the fix lifts that rule, and the width limit is the whole of why this is safe. Lifting it costs
 * horizontal overflow at narrower widths, measured with the rule off: +5px at 390, **+74px at 992**,
 * 0 at 1200, 0 at 1440. 992 therefore is not a boundary that works; 1200 is the narrowest width that
 * measured clean. Below it nothing changes and there is no sticky header, which is the right trade:
 * a phone shows a handful of rows at a time and scrolls the table sideways in its own container.
 *
 * Scoped to `body.template-resell`, which `intrahost/domains/index.blade.php` alone sets, so no other
 * page inherits a change made for this table.
 *
 * The offset is the site header's own scrolled height, not zero: past 100px the theme switches
 * `.rts-header` to `position: fixed` and hides its top strip, leaving an 82px nav row. `top: 0` would
 * park the column titles underneath it, which is worse than not sticking at all.
 */
@media (min-width: 1200px) {
    body.template-resell {
        overflow-x: visible;
    }

    /*
     * The blue has to move to the cell, and that is not a tidy-up.
     *
     * Measured 2026-09-22: the theme paints `--color-primary` on `thead.heading__bg` alone, and both
     * the row and the cell are transparent. A sticky cell lifts out of the table section's painting,
     * so the band stayed behind and scrolled away while the white titles rode on top of the first
     * data row, unreadable over it. `border-collapse: collapse` rules out fixing that with a border.
     *
     * The colour is left alone on purpose: white still inherits down to the cell while it is stuck,
     * which was measured rather than assumed, so restating it here would add a second place to keep
     * the theme's palette in step.
     */
    #shop-tld-table thead th {
        position: sticky;
        top: 82px;
        z-index: 5;
        background: var(--color-primary);
    }
}
/*
 * "Show more" was a button in name only.
 *
 * Measured 2026-09-22: transparent background, a 1px border in `rgba(0, 0, 0, 0)`, body-grey text,
 * and 1320px wide, because the theme stretches a bare `button` to its container exactly as it did
 * to the category tabs. So it read as a stray line of text under an 845-row table.
 *
 * The page already speaks two button languages and this borrows from both rather than inventing a
 * third: the card CTA's solid `--color-primary` on white text, at the row button's roomier padding
 * and radius. Hover goes to `--color-secondary`, which is the colour the theme's own secondary
 * buttons move to, so nothing here is a new value.
 */
/*
 * The table sat 113px inside its own area, so its left edge missed the filter and the count above it.
 *
 * The cause is the theme's, and it is a literal number:
 * `.rts-domain-pricing-area.area-2 .tab__content .table { width: 1095px; margin: auto; }` in
 * style.css, aimed at this very section and sized for the demo table it shipped with. A second rule
 * with the same selector asks for 100% and loses on source order. Found 2026-09-22 by asking the
 * element which rules match it, after searching the stylesheet by hand turned up nothing.
 *
 * An id outweighs the theme's three classes, so one declaration settles it without `!important`.
 */
#shop-tld-table {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}
.shop-tld-more button {
    display: inline-flex;
    align-items: center;
    width: auto;
    padding: 12px 32px;
    border: 0;
    border-radius: 4px;
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 16px;
    font-weight: 600;
    transition: var(--transition);
}

.shop-tld-more button:hover {
    background: var(--color-secondary);
    color: var(--color-white);
}
.shop-tld-tabs .shop-tld-tab {
    display: inline-flex;
    align-items: center;
    width: auto;
    flex: 0 0 auto;
    white-space: nowrap;
}

/*
 * The popular strip is a row of links now, not labels.
 *
 * The theme colours `.tag-list li span` white, on the span rather than the parent, so the text keeps
 * its colour inside an anchor without help. What an anchor does bring is a link colour on itself and
 * an underline, so both are turned off, and the pill's own 10% white wash brightens on hover to say
 * it can be clicked.
 */
.shop-tld-pill {
    display: flex;
    align-items: center;
    gap: 7px;
    color: inherit;
    text-decoration: none;
}

.shop-tld-pill:hover {
    color: inherit;
}

.rts-hero__content .banner-content-tag .tag-list li:has(.shop-tld-pill):hover {
    background: rgba(255, 255, 255, 0.22);
}
.shop-tld-tab {
    background: var(--color-white);
    border: 1px solid var(--light-border);
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--btc);
    cursor: pointer;
    transition: var(--transition);
}

.shop-tld-tab:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.shop-tld-tab.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.shop-tld-count {
    color: var(--btc);
    font-size: 14px;
    margin-bottom: 16px;
}

.shop-tld-more {
    text-align: center;
    margin-top: 24px;
}

/* ------------------------------------------------------------------ form */

.shop-field {
    margin-bottom: 20px;
}

.shop-field label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-secondary);
    margin-bottom: 8px;
}

.shop-field input[type="text"],
.shop-field input[type="email"],
.shop-field input[type="tel"],
.shop-field input[type="password"],
.shop-field select {
    width: 100%;
    padding: 13px 16px;
    border: 1px solid var(--light-border);
    border-radius: 8px;
    font-size: 15px;
    font-family: var(--font-secondary);
    background: var(--color-white);
    transition: var(--transition);
}

.shop-field input:focus,
.shop-field select:focus {
    outline: none;
    border-color: var(--color-primary);
}

/*
 * The select the buyer actually sees is not the `<select>`.
 *
 * The theme runs jquery-nice-select over every select on the page: the real element is set to
 * `display: none` and a `<div class="nice-select">` is rendered in its place. So `.shop-field select`
 * styles something invisible, which is why the rule above looked right and changed nothing.
 *
 * The plugin's own defaults are `float: left` and `width: auto`, and the float is the visible fault:
 * the *next* field's label wraps up beside the select instead of starting its own row. Measured on
 * the checkout page, where "Teljes név" sat next to the buyer-type select and "Irányítószám" next to
 * the country one.
 *
 * Styled here rather than by adding the plugin's `.wide` class to each `<select>`, because a rule
 * catches the selects that do not exist yet as well.
 */
.shop-field .nice-select {
    float: none;
    width: 100%;
    height: auto;
    line-height: 1.4;
    /* Room on the right for the plugin's chevron, which sits at `right: 12px`. */
    padding: 13px 40px 13px 16px;
    border: 1px solid var(--light-border);
    border-radius: 8px;
    font-size: 15px;
    font-family: var(--font-secondary);
    background: var(--color-white);
}

.shop-field .nice-select:hover {
    border-color: var(--light-border);
}

/* The same answer to the pointer that `.shop-field input:focus` gives. */
.shop-field .nice-select.open,
.shop-field .nice-select:focus {
    border-color: var(--color-primary);
}

/* The dropdown is absolutely positioned and shrinks to its content; make it the field's width. */
.shop-field .nice-select .list {
    left: 0;
    right: 0;
}

.shop-field__hint {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: var(--btc);
}

.shop-field__error {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #B42318;
}

.shop-field input.is-invalid,
.shop-field select.is-invalid {
    border-color: #B42318;
}

/*
 * Give the buyer back the tick and the dot.
 *
 * The theme hides **every** native checkbox and radio on the page — `input[type="checkbox"],
 * input[type="radio"] { opacity: 0; position: absolute }` — because it draws its own control from a
 * sibling element in its own markup. The shop's pages have no such sibling, so the control is simply
 * invisible: measured on the checkout, the card-consent box was a 1680x40 transparent input, and the
 * payment-method radios were dots nobody could see.
 *
 * That is worse than untidy on this page in particular. SimplePay's rules require the buyer to
 * *encounter* the recurring-payment declaration and accept it, and a tick box that cannot be seen is
 * not an encounter — the label is clickable, so the sale still works, and the buyer gets no sign
 * whatsoever that they have agreed to anything.
 *
 * Restored only inside the shop's own form vocabulary, so the theme's brochure pages keep drawing
 * their own controls exactly as before. `width`/`height` go with it because the theme's
 * `input, button, select, textarea { width: 100% }` and `input { height: 40px }` reach these too.
 */
.shop-field input[type="checkbox"],
.shop-field input[type="radio"],
.shop-choice input[type="checkbox"],
.shop-choice input[type="radio"],
.shop-store-card > label input[type="checkbox"] {
    opacity: 1;
    position: static;
    width: auto;
    height: auto;
    accent-color: var(--color-primary);
}

/* What is being asked for, above the sentence that accepts the declaration. */
.shop-store-card__ask {
    display: block;
    font-weight: 600;
    color: var(--color-secondary);
    margin-bottom: 2px;
}

/*
 * A group of them. The bottom margin is the group's, not the last choice's, so a group sits away
 * from the next heading by the same distance a `.shop-field` does.
 */
.shop-choices {
    margin-bottom: 20px;
}

/* A radio or checkbox that is really a card the buyer clicks: payment method, saved address. */
.shop-choice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    border: 1px solid var(--light-border);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: var(--transition);
}

.shop-choice:hover {
    border-color: var(--color-primary);
}

.shop-choice input {
    margin-top: 4px;
}

.shop-choice:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--plan-bg);
}

.shop-choice__label {
    font-weight: 600;
    color: var(--color-secondary);
}

.shop-choice__desc {
    display: block;
    font-weight: 400;
    font-size: 14px;
    color: var(--btc);
    margin-top: 2px;
}

.shop-form__actions {
    margin-top: 32px;
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

/* -------------------------------------------------------- bank transfer */

/*
 * The one place in the whole system where money is a decimal string rather than minor units: a human
 * reads these figures and types them into their bank.
 */
.shop-transfer {
    background: var(--plan-bg);
    border-radius: 12px;
    padding: 28px 32px;
    margin: 24px 0;
}

.shop-transfer dl {
    display: grid;
    grid-template-columns: minmax(140px, auto) 1fr;
    gap: 12px 24px;
    margin: 0;
}

.shop-transfer dt {
    color: var(--btc);
    font-weight: 400;
}

.shop-transfer dd {
    margin: 0;
    font-weight: 700;
    color: var(--color-secondary);
    word-break: break-all;
}

.shop-transfer__reference {
    font-family: monospace;
    font-size: 18px;
}

/* ---------------------------------------------------------------- panel */

.shop-account {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 32px;
    align-items: start;
}

@media (max-width: 991px) {
    .shop-account {
        grid-template-columns: 1fr;
    }
}

.shop-account__nav {
    background: var(--color-white);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 12px;
    position: sticky;
    top: 24px;
}

.shop-account__nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 8px;
    color: var(--btc);
    font-weight: 600;
    font-size: 15px;
    transition: var(--transition);
}

.shop-account__nav a:hover {
    background: var(--plan-bg);
    color: var(--color-primary);
}

.shop-account__nav a.is-active {
    background: var(--color-primary);
    color: var(--color-white);
}

.shop-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.shop-stat {
    background: var(--color-white);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
}

.shop-stat__value {
    font-size: 30px;
    font-weight: 700;
    color: var(--color-secondary);
    line-height: 1.2;
}

.shop-stat__label {
    color: var(--btc);
    font-size: 14px;
    margin-top: 4px;
}

/*
 * Statuses are state machines on the backend, and the panel only ever *reads* one. The colours group
 * them by what a buyer can do: green = nothing to do, amber = we are waiting on you, grey = over,
 * red = it went wrong and somebody will call you.
 */
.shop-status {
    display: inline-block;
    font-size: 13px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 999px;
    white-space: nowrap;
}

.shop-status--good {
    background: #EEFBF3;
    color: #067647;
}

.shop-status--waiting {
    background: #FFF8EB;
    color: #93590C;
}

.shop-status--neutral {
    background: #F3F4F6;
    color: var(--btc);
}

.shop-status--bad {
    background: #FFF1F1;
    color: #B42318;
}

/* An expiry inside the renewal window, which is the one number a panel exists to show. */
.shop-expiry--soon {
    color: #93590C;
    font-weight: 600;
}

.shop-expiry--past {
    color: #B42318;
    font-weight: 600;
}

.shop-empty {
    text-align: center;
    padding: 64px 24px;
    color: var(--btc);
}

.shop-empty__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-secondary);
    margin-bottom: 8px;
}

/* --------------------------------------------------------------- pricing */

.shop-plan {
    background: var(--color-white);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 32px;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: var(--transition);
}

.shop-plan:hover {
    box-shadow: var(--box-shadow);
    border-color: var(--light-border);
}

.shop-plan--featured {
    border-color: var(--color-primary);
    box-shadow: var(--box-shadow);
    position: relative;
}

.shop-plan__badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 13px;
    font-weight: 600;
    padding: 4px 16px;
    border-radius: 999px;
    white-space: nowrap;
}

.shop-plan__name {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-secondary);
}

.shop-plan__desc {
    color: var(--btc);
    font-size: 15px;
    margin: 8px 0 24px;
    min-height: 48px;
}

.shop-plan__price {
    font-size: 36px;
    font-weight: 700;
    color: var(--color-secondary);
    line-height: 1.2;
}

.shop-plan__period {
    color: var(--btc);
    font-size: 15px;
    margin-bottom: 24px;
}

.shop-plan__specs {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    flex: 1;
}

.shop-plan__specs li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    color: var(--btc);
    font-size: 15px;
}

.shop-plan__specs li i {
    color: var(--color-primary);
}

/* The billing-period switch above the plans. */
.shop-terms {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 48px;
}

.shop-term {
    background: var(--color-white);
    border: 1px solid var(--light-border);
    border-radius: 999px;
    padding: 10px 24px;
    font-weight: 600;
    color: var(--btc);
    cursor: pointer;
    transition: var(--transition);
}

.shop-term.is-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

/* ------------------------------------------------------ the domain step */

/*
 * Ordering hosting asks one question before anything else: which domain is this for? Three answers,
 * and they are three different sales — register a new name, transfer one in, or point one they
 * already own at us. The third takes no money for a domain at all, which is why it is offered as an
 * equal and not hidden behind "advanced".
 */
.shop-domain-choice {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.shop-domain-choice__option {
    border: 1px solid var(--light-border);
    border-radius: 12px;
    padding: 20px;
    cursor: pointer;
    text-align: center;
    transition: var(--transition);
}

.shop-domain-choice__option:hover {
    border-color: var(--color-primary);
}

.shop-domain-choice__option:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--plan-bg);
}

.shop-domain-choice__option input {
    display: none;
}

.shop-domain-choice__icon {
    font-size: 26px;
    color: var(--color-primary);
    margin-bottom: 10px;
}

.shop-domain-choice__title {
    font-weight: 700;
    color: var(--color-secondary);
    margin-bottom: 4px;
}

.shop-domain-choice__desc {
    font-size: 14px;
    color: var(--btc);
}

.shop-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--light-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: shop-spin .7s linear infinite;
    vertical-align: middle;
}

@keyframes shop-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ---------------------------------------------------------------------------------------------
   VPS plans

   The theme has no VPS page, so these are hand-styled against its own custom properties — the same
   bargain the cart and the customer panel live under. `shop-vps--unavailable` is presentation only:
   what actually stops a sale is that the card renders no form at all. A greyed-out button that still
   posted would be the worst of both.
   --------------------------------------------------------------------------------------------- */

.shop-vps__locations {
    font-size: 13px;
    color: var(--color-body, #74787c);
    margin-bottom: 12px;
}

.shop-vps--unavailable {
    opacity: .55;
    filter: grayscale(1);
}

.shop-vps__unavailable {
    border: 1px dashed var(--color-border, #e1e1e1);
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 16px;
}

.shop-vps__unavailable-title {
    font-weight: 600;
    margin-bottom: 4px;
}

/* The card is greyed, but its explanation must stay readable — that sentence is the whole point of
   showing the plan rather than hiding it. */
.shop-vps--unavailable .shop-vps__unavailable {
    opacity: 1;
    filter: none;
}

/* ---------------------------------------------------------------- header */

/*
 * A header for the pages the theme never imagined.
 *
 * Every page the purchased theme ships opens with a coloured banner, so its header is transparent
 * and its text is white. The shop's own pages do not: cart, checkout, account, sign-in and the
 * error pages start with a plain white section, and the header painted white on white. Nothing was
 * broken, which is why it lasted: the markup matched the theme's exactly, all four stylesheets were
 * loaded and applied, and the band was 122px tall with 22 nav links at full width. All of it
 * `rgb(255, 255, 255)` on `rgb(255, 255, 255)`.
 *
 * The theme has no variant for this, because it ships no such page. `header__with__bg` looks like
 * one and is not: it recolours `.rts-menu`, a class our header does not contain, so it would paint
 * the 40px top strip and leave the 82px nav row exactly as invisible as before.
 *
 * So: the banner's own gradient, on the whole header, which is what the header was designed to sit
 * on. One declaration rather than per-element overrides, and no invented colour — the same rule the
 * top of this file states. The 10% white wash on `.rts-ht__bg` then lands on it as intended.
 *
 * `:not(.header-sticky)` because the scrolled state belongs to the theme and this rule was taking
 * it. Past 100px the theme's own JS adds `header-sticky`, which paints the bar `--color-white` and
 * swaps the white logo for the dark one. That is a plain colour while this is a gradient, both
 * selectors weigh two classes, and shop.css loads after style.css: measured 2026-09-22, the
 * gradient won and the dark mark sat on a blue band on every one of these pages, on any scroll.
 */
.rts-header.header--solid:not(.header-sticky) {
    background: var(--banner-most-used-bg);
}

/*
 * The content takes the header's height, because the header never does.
 *
 * `.rts-header` is `position: absolute; top: 0` with no positioned ancestor, so it occupies no
 * space in the flow on any page at all. The theme's own pages survive that because every one of
 * them opens with a banner whose top padding holds the header up. The shop's pages have no banner,
 * so their first section starts at y=0 and the header is drawn over the top of it: on the error
 * pages that cut the top off the illustration, and on the cart, the checkout and the panel it would
 * hide the first rows of what somebody is trying to read.
 *
 * The padding goes on `body`, not on a wrapper around each view. An absolutely positioned element
 * with no positioned ancestor resolves against the initial containing block, so padding on `body`
 * moves the content and leaves the header exactly where it is. Fifteen shop views and five error
 * views are fixed without one of them gaining an element.
 *
 * `position: relative` on the header was the other candidate and is wrong: at 100px the theme
 * switches it to `fixed`, so it would leave the flow mid-scroll and the page would jump by its own
 * height under the reader.
 *
 * Three bands, because the header has three heights and the tallest of them is in the middle.
 * Measured 2026-09-22 as top bar + nav row:
 *
 *     1440  122 = 40 + 82          640  144 = 40 + 103
 *     1200  122 = 40 + 82          575  144 = 40 + 103
 *      992  136 = 54 + 82          390  144 = 40 + 103
 *      991  158 = 54 + 103
 *      768  158 = 54 + 103
 *
 * The top bar wraps to two lines between 640 and 768 and unwraps again between 992 and 1200.
 * Neither point is a breakpoint: they are where the promo line stops fitting. So each band is
 * padded to its own tallest reading rather than to a representative one. Over-padding costs at most
 * 14px of white space; under-padding puts the content back under the header, which is this fault.
 */
body.page--below-header {
    padding-top: 158px;
}

@media (min-width: 992px) {
    body.page--below-header {
        padding-top: 136px;
    }
}

@media (min-width: 1200px) {
    body.page--below-header {
        padding-top: 122px;
    }
}

/*
 * `capitalize` is the theme's, and it is wrong in Hungarian.
 *
 * The theme transforms text in 53 places: every button (`.primary__btn`, `.secondary__btn`,
 * `.rts-btn`, `.btn__two`), the main menu and its submenu, the footer's widget titles and menu
 * links, and most section headings. In English that is unremarkable. In Hungarian only the first
 * word of a sentence and proper nouns take a capital, so it renders "Próbáld Újra" and
 * "Iratkozz Fel Hírlevelünkre". The copy in `lang/hu` was correct all along and only the rendering
 * was not, which is why reading the language files proved nothing.
 *
 * Scoped to `html[lang="hu"]`, because the shop serves both locales from one stylesheet and the
 * English pages should keep the theme's own typography. The layout already names the active locale
 * on `<html>`, so nothing had to be added to make this addressable.
 *
 * `uppercase` is deliberately left alone. It sits on table headings, a sale badge and the TLD
 * extension list, where it is a typographic choice rather than a rule about words, and it reads the
 * same in both languages.
 *
 * The selector list is generated from the served stylesheet rather than typed, so it cannot drift
 * from what actually carries `capitalize`. Regenerate it if the theme is ever updated.
 */
html[lang="hu"] .blog-info .blog-share .share,
html[lang="hu"] .blog-info .blog-tags .tags-title,
html[lang="hu"] .blog-info .blog-tags__list a,
html[lang="hu"] .btn__two,
html[lang="hu"] .cloud-feature .title,
html[lang="hu"] .dedicated-feature-area .dedicated-feature-image .feature-text .performance p,
html[lang="hu"] .dedicated-feature-area .dedicated-feature-image .feature-text .seo p,
html[lang="hu"] .intrahost-menu .intrahost-desktop-menu .intrahost-submenu .nav-item a.nav-link,
html[lang="hu"] .intrahost-menu .intrahost-desktop-menu .menu-item,
html[lang="hu"] .payment__method h5,
html[lang="hu"] .pricing-comparison .additional-content .additional-feature ul li span.new,
html[lang="hu"] .primary__btn,
html[lang="hu"] .rts-affiliate .become__affiliate__content .single .content h4,
html[lang="hu"] .rts-blog-list .single-post__meta .author__date__cat a,
html[lang="hu"] .rts-btn,
html[lang="hu"] .rts-contact-form .form__content .input-form,
html[lang="hu"] .rts-contact-form .form__content .nice-select.input-form,
html[lang="hu"] .rts-cta__left .cta__title,
html[lang="hu"] .rts-cta__left .primary__btn,
html[lang="hu"] .rts-domain-finder__content form.domain-checker button[type=submit],
html[lang="hu"] .rts-domain-finder__content h3,
html[lang="hu"] .rts-faq__first--shape .shape-one,
html[lang="hu"] .rts-faq__first--shape .shape-two,
html[lang="hu"] .rts-flash-sell .single__sell--content .offer,
html[lang="hu"] .rts-flash-sell .single__sell--content span,
html[lang="hu"] .rts-flash-sell__title h3,
html[lang="hu"] .rts-footer__widget h5.widget-title,
html[lang="hu"] .rts-footer__widget--menu ul li a,
html[lang="hu"] .rts-hero-four__content .offer,
html[lang="hu"] .rts-hosting-banner__content .starting__price,
html[lang="hu"] .rts-hosting-feature-four .feature__single--title,
html[lang="hu"] .rts-hosting-type__single .title,
html[lang="hu"] .rts-payment-option .section-inner .payment-method-wrapper .heading-title,
html[lang="hu"] .rts-plan__table table thead .package__item__info span,
html[lang="hu"] .rts-plan__table table thead th,
html[lang="hu"] .rts-pricing-plan .card-plan .popular-tag,
html[lang="hu"] .rts-pricing-plan .card-plan__cartbtn a,
html[lang="hu"] .rts-pricing-plan__tab .tab__button__item button,
html[lang="hu"] .rts-section__two .sub__title,
html[lang="hu"] .rts-service-four__tab .single__tab .tab__title,
html[lang="hu"] .rts-service-four__tab--content .tab__content--details .feature__list .feature__item,
html[lang="hu"] .rts-service-four__tab--content .tab__content--details a.all-feature,
html[lang="hu"] .rts-service-two .service-two__content .title,
html[lang="hu"] .rts-service__single--title,
html[lang="hu"] .rts-services-area.area-3 .section-inner .service-wrapper .content .title,
html[lang="hu"] .rts-sidebar .rts-single-widget .widget-title,
html[lang="hu"] .rts-sidebar .rts-single-widget.tags-widget .popular-tags .tags a,
html[lang="hu"] .rts-support__wrapper--content .feature__list .feature__item,
html[lang="hu"] .rts-team-area .rts-section-title-area .section-title,
html[lang="hu"] .rts-whychoose__content--title,
html[lang="hu"] .secondary__btn,
html[lang="hu"] .social__media h5,
html[lang="hu"] .view-plan-btn .long-btn {
    text-transform: none;
}

/* ----------------------------------------------------------------- error */

/*
 * The error pages, which were a title and a paragraph floating in white space.
 *
 * The theme's own 404 is a full-screen takeover with no header and no footer. A shop cannot use
 * that: somebody who meets a 503 mid-purchase still needs the cart, the panel and the phone number.
 * So this borrows the theme's illustration and its centred stack, and keeps the site chrome.
 *
 * The weight sits in the headline, and the illustration supports it rather than swamping it. It was
 * the other way round at first: 380px of pale line art above one sentence made the largest thing on
 * the page also the faintest. One solid action in the theme's blue and one bordered pill; two filled
 * buttons would leave neither of them meaning anything.
 */
/*
 * Optically centred between the header and the footer, not clinging to the top.
 *
 * With fixed padding the content sat just under the header and left a large void above the footer,
 * which is most of why the page read as thin. `min-height` with centred flex gives the short copy
 * somewhere to sit; `60vh` rather than `100vh` because the header and footer are still on the page
 * and a full viewport would push the footer entirely out of sight.
 */
.shop-error {
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 64px 0 72px;
    text-align: center;
}

/*
 * Sized to support the headline, not to outrank it.
 *
 * The theme's own illustration is a 1036px square, and at 380 it stood taller than the title, the
 * sentence and both buttons put together while being the palest thing on the page. 260 leaves it
 * legible and lets the headline carry the message, which is what somebody who has just hit an error
 * actually needs to read first.
 */
.shop-error__art {
    display: block;
    width: 100%;
    max-width: 260px;
    height: auto;
    margin: 0 auto 28px;
}

.shop-error__title {
    font-size: var(--size-h3);
    line-height: 1.25;
    color: var(--color-secondary);
    margin-bottom: 12px;
}

/*
 * A measure, not a width. The body is one sentence and it must not run the full container on a
 * desktop: past about 70 characters the eye loses the line, and a centred paragraph loses it sooner.
 */
.shop-error__body {
    max-width: 52ch;
    margin: 0 auto 36px;
    color: var(--btc);
}

.shop-error__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

/*
 * The quiet action, readable rather than merely present.
 *
 * `border__btn` is `--border-color` (#E9EDFF) on white, which all but disappears, and it leaves the
 * label at the inherited body colour. Naming the text `--color-secondary` is what makes it read as
 * the second of two choices instead of as a disabled one.
 */
.shop-error__actions .border__btn {
    color: var(--color-secondary);
}

/*
 * The solid action, written here because the stylesheet we serve carries no rule for it.
 *
 * **Unscoped on purpose.** It began life as `.shop-error__actions .primary__btn.primary` and was
 * therefore the error page's alone, which left the funnel's own buttons — `Megrendelés` above all —
 * with shape and no colour, reading as text rather than as the thing to press. Nothing else in the
 * served build carries a rule for `.primary__btn.primary`, so widening it collides with nothing and
 * means the next solid action is one class rather than another copy of this block.
 *
 * `.primary__btn` is shape only: padding, radius, weight, and no colour whatsoever. The theme
 * completes it with a background class, and the build under `public/ith/` offers exactly two.
 * `.secondary__bg` is the amber, which is this theme's hover colour and wrong at rest on white.
 * `.primary__bg` is the brand blue with `--btc` text, which is #4C5671 on #0774FF and does not read.
 *
 * The theme's *archive* has a third, `.primary__btn.primary`, blue with white text. Our build does
 * not carry it, so swapping the class alone rendered a link with no button around it at all.
 * Measured 2026-09-22, after making exactly that mistake: read the stylesheet that is served, not
 * the one in the reference folder, because they are two different builds.
 *
 * No invented colour. `--color-primary` is the blue the header's own gradient starts from, and
 * white on it is what every solid action in this theme does.
 */
.primary__btn.primary {
    background: var(--color-primary);
    color: var(--color-white);
}

/*
 * The theme's own hover, restored at this specificity rather than replaced.
 *
 * `.primary__btn:hover` (amber, dark text) is what every button on the site does, but it weighs two
 * classes and the rule above weighs three, so without this the button would sit at blue and answer
 * the pointer with nothing. That is the kind of fault nobody reports: it does not look broken, the
 * page is simply harder to use. Same colours as the theme's rule, so the error page behaves like
 * every other page rather than acquiring an interaction of its own.
 */
.primary__btn.primary:hover {
    background: var(--color-third);
    color: var(--color-secondary);
}

@media (max-width: 575px) {
    .shop-error {
        padding: 48px 0 64px;
    }

    .shop-error__title {
        font-size: var(--size-h4);
    }

    /* A square illustration costs its own width in height, which a phone has least of. */
    .shop-error__art {
        max-width: 200px;
        margin-bottom: 24px;
    }

    /* Side by side they would each be too narrow to read as a button. */
    .shop-error__actions {
        flex-direction: column;
        align-items: stretch;
    }

    .shop-error__actions .primary__btn {
        max-width: none;
        text-align: center;
    }
}

/* ------------------------------------------------------------------------------------------------
   The per-package page.

   The theme has no page for one product, so these are hand-written against its own custom
   properties, exactly as the cart and the panel are. Nothing here is a new design language: the
   spec list reuses `card-plan__feature--list`, the price box reuses `card-plan`, and this only
   arranges them.
   ------------------------------------------------------------------------------------------------ */
.shop-package__heading {
    margin-bottom: 24px;
}

.shop-package__specs {
    margin: 0;
    padding: 0;
    list-style: none;
}

.shop-package__terms {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.shop-package__term {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-border, #E9EEF6);
}

.shop-package__term:last-child {
    border-bottom: 0;
}

.shop-package__term-price {
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--color-heading-1, #14133B);
}

/* The theme's own cart button is full width inside a card; in a row it should hug its label. */
.shop-package__term .card-plan__cartbtn {
    margin: 0;
    flex: 0 0 auto;
}

.shop-package__others {
    margin-top: 72px;
}

/* The one package the owner's own price card stars. A label, not a decoration: it says which plan
   we would pick, and it is set in ListsHostingPlans::RECOMMENDED where a person can change it.

   It rides on the card's top edge and is **out of the flow**, which is the whole point rather than a
   styling preference. Sitting beside the name it wrapped "IntraHost Sirius" onto a second line, and
   because the theme's cards are one column of stacked blocks, that pushed this card's icon, price,
   button and every feature row below the other three. Taking it out of the flow means a card that
   carries the mark and a card that does not have identical internals. `.card-plan` is already
   `position: relative` in the theme, so nothing else is needed to anchor it. */
.card-plan__recommended {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    display: inline-block;
    white-space: nowrap;
    padding: 3px 14px;
    border-radius: 100px;
    background: var(--color-primary, #0B63F6);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.8;
}

/* Packages side by side only compare if their rows line up, and the catalogue's own sentences run to
   one line or two: measured on the home page, IntraHost Altair's description was one line and the
   other three were two, so its price, button and every feature row sat 26px above its neighbours'.
   The two blocks above the price get a floor rather than the card getting a fixed height: a longer
   name still grows, it just cannot pull the row out of line.

   **Scoped to every plan row, not to one page.** It used to be `.rts-pricing-plan.wordpress`, which
   is the hosting page's class alone, so the home page's section had no floors at all and drifted the
   moment it started rendering the same cards. The mail page carried a near-identical pair of its own
   for the same symptom; they are gone, because two rules with one purpose are how the two pages end
   up disagreeing about the answer. */
.rts-pricing-plan .card-plan__package {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 62px;
}

.rts-pricing-plan .card-plan__desc {
    min-height: 52px;
}

/* Every card in a row ends on the same line, on every page that draws them: hosting, the home page,
   mail and VPS. The owner's instruction, and it is also what makes a row comparable at a glance, a
   ragged bottom edge reads as though the short card is missing something.

   Bootstrap already stretches the columns, so the card only has to fill the column it sits in. The
   flex column is what stops the fill from pooling as dead space under the last feature: the feature
   block takes the slack, so the cards grow from the same place. The cards keep their own natural
   height wherever they are not in a row of equals. */
.rts-pricing-plan .card-plan {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.rts-pricing-plan .card-plan__feature {
    flex: 1 1 auto;
}

/* The term switcher grows to fit its labels instead of clipping them.

   The theme sizes that bar at a fixed `height: 40px` and built it for **two short English words**,
   "monthly" and "yearly". We put four terms in it, in Hungarian: "1 hónap", "3 hónap", "6 hónap",
   "1 év". Three of those are two words, they wrapped onto a second line inside a 40px box, and the
   overflow was simply cut off — the labels read as "1 hóna" with the rest hanging outside the pill
   (reported with a screenshot, 2026-09-23).

   Two changes, and both are needed. The height becomes a floor rather than a ceiling, so the bar can
   be as tall as its contents; and a label is kept on one line, so "1 hónap" never breaks between the
   number and the word. On a narrow screen the buttons then wrap as whole pills, which is the
   readable way for this to degrade. */
.rts-pricing-plan .plan__tab .tab__button {
    height: auto;
    min-height: 40px;
    display: flex;
    align-items: center;
}

.rts-pricing-plan .plan__tab .tab__button__item {
    flex-wrap: wrap;
    justify-content: center;
}

/* Measured 2026-09-23 at a 1680px viewport: all four term pills were 342px wide — the full width of
   their flex container — so each claimed a line and the switcher stood four rows tall. The cause is
   the theme's own form reset, `input, button, select, textarea { width: 100% }` in `style.css`,
   which applies to every button on the site. The `height: auto` added that morning treated the
   symptom: the bar stopped being clipped and became tall instead. A pill sizes to its text. */
.rts-pricing-plan .plan__tab .tab__button__item button {
    white-space: nowrap;
    width: auto;
}

/* The four service cards on the home page end on one line, like every other card row.

   Last night's equal-height rule was written for `.card-plan`, which is the *package* card, and these
   are `.service-two-small` — different markup, so they were never covered and the row stayed ragged.
   The theme gives them no height at all. Bootstrap already stretches the columns, so the card only
   has to fill the one it sits in; the description takes the slack so the arrow buttons line up. */
.rts-service-two .service-two-small {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.rts-service-two .service-two-small__content {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.rts-service-two .service-two-small__content .description {
    flex: 1 1 auto;
}

@media (max-width: 991px) {
    /* Two across, where a floor would only add dead space. */
    .rts-pricing-plan .card-plan__package,
    .rts-pricing-plan .card-plan__desc {
        min-height: 0;
    }
}

/* The mail page's own floors used to live here, for IntraMail Essential: it carries no description
   and a single spec, so without one its price rode up above its neighbours' and its card ended half
   a row early. The rule above now covers every plan row, this page included, so the pair is gone
   rather than kept at slightly different figures. The silence itself is a catalogue gap and not a
   layout one: a sentence on that row is what fixes it properly. See docs/STOREFRONT.md §13.7. */

/* ------------------------------------------------------------------------------------------------
   The package comparison table.

   Deliberately **not** `.shop-table`. That one turns each row into a card below 767px by hiding the
   `thead` — right for a cart or an invoice list, where a row is one record, and fatal here, where
   the header *is* the package name and hiding it leaves four anonymous columns of ticks. A matrix
   scrolls sideways instead, which is what this codebase prescribes for a table too wide to fit.
   ------------------------------------------------------------------------------------------------ */
.shop-compare {
    overflow-x: auto;
    margin-top: 40px;
    background: #fff;
    border: 1px solid var(--color-border, #E9EEF6);
    border-radius: 12px;
}

.shop-compare__table {
    width: 100%;
    min-width: 640px;
    border-collapse: collapse;
}

.shop-compare__table th,
.shop-compare__table td {
    padding: 16px 20px;
    text-align: center;
    vertical-align: middle;
    border-bottom: 1px solid var(--color-border, #E9EEF6);
}

/* The feature column reads as a label, not as data. */
.shop-compare__table thead th:first-child,
.shop-compare__table tbody th {
    text-align: left;
    font-weight: 600;
    color: var(--color-heading-1, #14133B);
    white-space: nowrap;
}

.shop-compare__table thead th {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-heading-1, #14133B);
    border-bottom: 2px solid var(--color-border, #E9EEF6);
}

.shop-compare__table thead th a {
    color: inherit;
}

.shop-compare__table tbody tr:last-child th,
.shop-compare__table tbody tr:last-child td {
    border-bottom: 0;
}

.shop-compare__yes {
    color: #16A34A;
}

/* A spec a package does not carry. Muted rather than absent: an empty cell reads as an oversight. */
.shop-compare__no {
    color: var(--btc, #74787C);
}

/* The theme uppercases every `th` on the site from a bare element selector (`style.css`, `th { … }`),
   so this table arrived shouting: "TÁRHELY", "E-MAIL FIÓKOK", "INTRAHOST CANOPUS". Hungarian reads
   worse in caps than English does — the accents go with it — which is why `html[lang="hu"]` already
   carries a 57-selector exception a few rules above. `th` is not in that list, and adding it there
   would also change the TLD price table, which nobody has looked at since. So this is scoped to the
   comparison table alone: the defect seen is the defect fixed. */
.shop-compare__table th {
    text-transform: none;
    letter-spacing: 0;
}

/* A package name in the header is a link, but caps plus an underline made it read as a warning
   rather than a column title. The name still goes to its own page. */
.shop-compare__table thead th a {
    text-decoration: none;
}

.shop-compare__table thead th a:hover {
    text-decoration: underline;
}

/* The big service card on the home page carries a blue gradient with a white title, and the theme
   never put a paragraph in it: its `.description` inherits the dark body colour, which on that
   background is almost unreadable. The card gained one when the six placeholder cards became three
   real ones, so this is the consequence of that change rather than a theme bug. */
.rts-service-two .service-two__content .description {
    color: rgba(255, 255, 255, .85);
    margin-bottom: 24px;
}

/* The domain strip's boxes became links when they started pointing at each extension's own page, and
   the theme never styled `.single-list` as an anchor: it sets a background, a border and an underline
   on the name, and no `:hover` at all. So they inherited the browser's default link blue, which is
   what made the hover look wrong. At rest they go back to inheriting, so the strip is unchanged;
   hovering uses the theme's own amber (`--color-third`) rather than a hex typed in here, so it
   follows if the theme ever retunes it. */
.rts-ds-two__domainlist a.single-list {
    color: inherit;
}

.rts-ds-two__domainlist a.single-list:hover .name,
.rts-ds-two__domainlist a.single-list:hover .price {
    color: var(--color-third);
}

.rts-ds-two__domainlist a.single-list:hover {
    border-color: var(--color-third);
}

/*
    The recurring card declaration at checkout.

    The theme has no page for this, which is why it is here at all: `shop.css` covers exactly what
    the purchased theme does not ship. Built from the theme's own custom properties so it belongs to
    the page rather than sitting on it.

    It is deliberately **quiet and long** rather than a link. SimplePay's documentation is explicit
    that the statement must be one the customer encounters, so hiding it behind a modal or a link to
    the terms would defeat the point. Small type, scrollable, and the tick beneath it.
*/
.shop-store-card__terms {
    padding: 20px;
    margin-bottom: 16px;
    max-height: 260px;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.6;
}

.shop-store-card__title {
    font-weight: 600;
    margin-bottom: 8px;
}

.shop-store-card__terms p + .shop-store-card__title {
    margin-top: 16px;
}

.shop-store-card__terms ul {
    margin: 0 0 8px 18px;
    list-style: disc;
}

.shop-store-card__terms p {
    margin-bottom: 8px;
}

/*
    The tick itself. The theme gives every `<button>` `width: 100%`, and a label holding a checkbox
    inherits nothing useful, so the alignment is set here rather than fought for elsewhere.
*/
.shop-store-card > label {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    cursor: pointer;
}

.shop-store-card > label input[type="checkbox"] {
    margin-top: 4px;
    flex: 0 0 auto;
}

/* ---------------------------------------------------------------- a stored article's own HTML
 *
 * The knowledge base article page is the theme's `blog-details.html`, so its headings, paragraphs and
 * blockquote are the theme's. What the theme never had to style is the *stored* markup an editor can
 * produce: a table, a code block, a nested list. These three rules cover that and nothing else, and
 * they are scoped inside `article.blog-details` so they cannot reach the theme's own pages.
 */

article.blog-details table {
    inline-size: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
}

article.blog-details th,
article.blog-details td {
    border: 1px solid #E6E8EC;
    padding: 10px 12px;
    text-align: start;
}

article.blog-details code {
    background: #F4F5F7;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 14px;
}

article.blog-details pre {
    background: #F4F5F7;
    border-radius: 8px;
    padding: 16px;
    overflow-x: auto;
    margin-bottom: 24px;
}

/* A blog post's cover. The theme's own wrapper class for this is not in our rebranded build, and `img`
 * is already capped at 100% globally, so all this adds is the rounding and the space under it. */

.shop-article__cover {
    border-radius: 10px;
    margin-bottom: 32px;
}

/* ---------------------------------------------------------------- a WHOIS record
 *
 * The registry's own bytes, in the registry's own layout. The theme never had to show one, so this is
 * ours: monospace, scrollable sideways rather than wrapped (a WHOIS record's columns are its meaning),
 * and bounded in height so a chatty registry does not push the page below it out of sight.
 */

.shop-whois__record {
    margin: 16px 0 0;
    padding: 16px;
    background: #F4F5F7;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.6;
    max-height: 480px;
    overflow: auto;
    white-space: pre;
}

/*
 * The readable half of an RDAP answer, and the raw document folded under it.
 *
 * Only RDAP ever produces fields: a WHOIS body is free text nobody parses, so that branch still renders
 * the `<pre>` alone and these rules never apply to it.
 */
.shop-panel__subtitle {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--color-secondary);
}

.shop-whois__raw {
    margin-top: 24px;
}

.shop-whois__raw > summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-primary);
}

/* A summary inside the record block must not inherit its monospace scroll box. */
.shop-whois__raw > summary::marker {
    color: var(--color-primary);
}

/* ---------------------------------------------------------------------------
   The migration promo's two small pieces.

   `.shop-step__number` sits inside the theme's own `card-feature__single--icon`, which is sized and
   centred by the theme; only the numeral itself is ours. `.shop-list` is a plain bulleted list inside a
   `.shop-panel`, which the theme never had to draw because it has no such panel.
   --------------------------------------------------------------------------- */
.shop-step__number {
    font-size: 28px;
    font-weight: 700;
    line-height: 1;
    color: var(--color-primary);
}

.shop-list {
    margin: 0 0 16px;
    padding-left: 20px;
    list-style: disc;
}

.shop-list li {
    margin-bottom: 8px;
    color: var(--color-body);
}

/*
 * The per-extension leaf pages (`intrahost/domains/registration-page.blade.php`).
 *
 * The purchased theme has no page shaped like this one — its `domain-registration.html` is a single
 * marketing page rather than one of 847 — so these are the shop's own, built on the theme's custom
 * properties so they sit beside it rather than on top of it. `.shop-fact` is deliberately the same
 * card as `.shop-stat` with a quieter value: a registry rule is a sentence, not a figure, and giving
 * it 30px type would make the page shout its footnotes.
 */
.shop-section--tight {
    padding: 48px 0;
}

.shop-fact {
    background: var(--color-white);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    height: 100%;
}

.shop-fact__label {
    color: var(--btc);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.shop-fact__value {
    color: var(--color-secondary);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    margin-top: 6px;
}

.shop-prose {
    color: var(--btc);
    margin-top: 8px;
    margin-bottom: 0;
}

/* The way out of a leaf. A wrapping row of quiet chips rather than a list: eight extensions in a
   column would be longer than the block that earns the page. */
.shop-tld-related {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

.shop-tld-related__item {
    display: inline-block;
    padding: 8px 18px;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    background: var(--color-white);
    color: var(--color-secondary);
    font-weight: 600;
    transition: all 0.3s;
}

.shop-tld-related__item:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/*
 * A banner with no search box in it.
 *
 * The theme's `domain-checker-padding` is 255px over 170px, sized around the search form the domain
 * pages carry, and `banner-default-height` pins the whole thing at 700px for the same reason. The
 * renewal page has neither — a renewal is not a name to look up — so measured it rendered 700px of
 * blue around 116px of content. The top padding still has to clear the transparent header, which is
 * why this is not simply smaller everywhere.
 */
.shop-banner--compact {
    padding: 180px 0 90px;
}

/* ------------------------------------------------------------------
   A legördülő menük nyila eltűnt görgetés közben (2026-09-30).

   A téma a nyilat `.intrahost-dropdown-main-element::before`-ként rajzolja,
   egy Font Awesome glyphhel, és a színét BEDRÓTOZZA fehérre. Görgetéskor a
   fejléc `header-sticky` osztályt kap: a háttér fehér lesz, a link és az
   aláhúzás (`::after`) átvált `var(--btc)`-re — a nyíl viszont nem, mert a
   témában egyetlen `header-sticky … ::before` szabály sincs. Fehér nyíl
   fehér háttéren: láthatatlan.

   Megmérve az eredeti, megvásárolt témán is (hostie-main/assets/css/style.css):
   ugyanez a hiba, tehát ÖRÖKÖLT, nem a mi átszínezésünk hozta.

   A javítás `inherit`, nem egy sticky-specifikus szín: a nyíl így minden
   fejlécállapotban és minden fejlécstílusban a saját feliratát követi, és
   nincs második hely, ami elcsúszhat. A témában nincs olyan szabály, ami a
   nyilat szándékosan más színre tenné, mint a szövegét — ezért ez nem vesz
   el semmit.
   ------------------------------------------------------------------ */
.intrahost-menu .intrahost-desktop-menu .intrahost-has-dropdown .intrahost-dropdown-main-element::before {
    color: inherit;
}

/* ------------------------------------------------------------------
   A téma két max-widthje, ami a MI elrendezésünkben nem véd semmit
   (a tulajdonos kérése, 2026-09-30).

   `.rts-hosting-banner__content` a megvásárolt témában egy KÉT oszlopos
   hero bal fele volt: 450 px szöveg, mellette illusztráció. Nálunk nincs
   illusztráció — megmérve a tárhely oldalon: a szülő sor 1350 px, egyetlen
   gyereke van, és a tartalom 450 px-en áll benne. A cím és a bevezető így
   a bal harmadba szorul, a jobb kétharmad üres kék sáv.

   NEM a korlát törlése a javítás, hanem a megemelése: 1350 px-es sorhossz
   olvashatatlan. 720 px-en a bevezető egy sorba fér, a cím kap levegőt, és
   a sorhossz még mindig olvasható marad.

   `.rts-section__two` ugyanez a főoldalon (510 px). A téma saját
   `index-two.html`-jének szekciófeje egy bal 50%-os szövegblokk, mellette
   jobbra kitett gombbal — ott a korlát a gombnak tart helyet. Ahol mi gomb
   nélkül használjuk, ott csak szűkít.
   ------------------------------------------------------------------ */
.rts-hosting-banner__content {
    max-width: 720px;
}

.rts-section__two {
    max-width: none;
}

/* ------------------------------------------------------------------
   Örökölt téma-hiba: 440 px-es min-width egy 390 px-es telefonon.

   `.rts-hosting-feature__content .rts-section__two` a megvásárolt témában
   `min-width: 440px; max-width: max-content`, MÉDIA-LEKÉRDEZÉS NÉLKÜL —
   tehát telefonon is. Megmérve 390 px-es nézeten a főoldalon: a szülő
   370 px, a blokk 440 px, a jobb széle 450 px-nél van.

   Amiért ez eddig nem tűnt fel: a LAP nem csordul túl (`scrollWidth` 390),
   mert valami elvágja — nincs vízszintes görgetősáv, csak levágott szöveg
   a jobb szélen. A 2026-09-28-i „390 px-en tizenöt lapon nincs túlcsordulás"
   mérés a lap görgetési szélességét nézte, és ez a kritérium egy LEVÁGOTT
   elemet nem lát. A helyes kritérium az elem saját doboza a nézethez mérve.

   576 px alatt oldjuk fel: 480 px-es nézeten a konténer ~460 px, ott a
   440 még elfér, tehát ennél feljebb nem nyúlunk a téma elrendezéséhez.
   ------------------------------------------------------------------ */
@media (max-width: 575.98px) {
    .rts-hosting-feature__content .rts-section__two {
        min-width: 0;
    }
}

/* ------------------------------------------------------------------
   A tudásbázis-cikk végi felhívás — „szürke és pici" (a tulajdonos,
   2026-09-30).

   Megmérve a cikkoldalon: a `.rts-cta-two__wrapper` bekezdése 16 px,
   `rgb(76, 86, 113)`, 400-as súly — BETŰRE UGYANAZ, mint a cikk
   törzsszövege (16 px, `rgb(76, 86, 113)`). Tehát nem arról van szó,
   hogy halvány egy felhíváshoz: vizuálisan nem is felhívás, hanem egy
   újabb bekezdés, amit az olvasó a cikk folytatásának néz.

   A wrapper maga átlátszó, 58/80 px paddinggel — a hely megvan, a súly
   hiányzik. A blokk a téma saját tokenjeit kapja meg (`--color-secondary`
   a címszín, `#F4F9FF` az `alice__blue`), tehát nem találunk ki se
   színt, se méretet.

   SAJÁT OSZTÁLYRA szűkítve, nem `.rts-cta-two__wrapper`-re: azt hat nézet
   használja (főoldal, VPS, konténerek, tárhely, e-mail, cikk), és közülük
   csak a cikkoldalról érkezett panasz. Egy szűkítetlen szabály öt olyan
   szekciót színezne át, amit senki nem nézett meg.
   ------------------------------------------------------------------ */
.shop-article-cta {
    background: #F4F9FF;
    border-radius: 10px;
}

.shop-article-cta p {
    font-size: 24px;
    line-height: 1.4;
    font-weight: 600;
    color: var(--color-secondary);
}

/* ---------------------------------------------------------------- impersonation bar */

/*
 * The purchased theme has no element like this, so it is ours. It is drawn only for an admin who is
 * signed in in a customer's name, and it must not be mistakable for anything else: that session holds
 * full payment powers. Colours are the theme's own custom properties, and the button is the paired
 * `rts-btn rts-btn-primary` the theme actually paints.
 *
 * Fixed to the BOTTOM, and photographed to be: the theme's header is absolutely positioned and takes
 * no room in the flow, so an in-flow bar at the top of the page sat under the header's own box on every
 * hero page and cut off the top bar and the logo. A bar at the bottom cannot cover the header at all,
 * and the body is padded so it never hides the end of the footer.
 */
.shop-impersonation-bar {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10000;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 10px 16px;
    background: var(--color-primary);
    color: #fff;
    font-weight: 600;
}

.shop-impersonation-bar form {
    margin: 0;
}

.shop-impersonation-bar .rts-btn {
    background: #fff;
    color: var(--color-primary);
}

body:has(.shop-impersonation-bar) {
    padding-bottom: 76px;
}

/* Public comments an admin wrote on a subscription (account → subscriptions). */
.shop-notes { margin: 1rem 0; }
.shop-notes__title { font-size: 1rem; margin-bottom: .5rem; }
.shop-note { padding: .5rem 0; border-top: 1px solid rgba(0, 0, 0, .08); }