/*
 * HostAccent Cart — premium skin for the WHMCS order form.
 *
 * Layers on top of WHMCS's own standard_cart styles rather than replacing them, mirroring how
 * templates/hostaccent-premium/css/premium-v3.css layers over the twenty-one parent. Nothing
 * here depends on a forked .tpl, so a WHMCS upgrade that rewrites the cart markup degrades to
 * "some rules stop matching" instead of a broken page.
 *
 * Loaded automatically: standard_cart/common.tpl wraps its stylesheet link in
 * {assetExists file="custom.css"}, which resolves through the theme chain, so a child theme that
 * ships css/custom.css gets it linked with no .tpl override at all. Do NOT try to add the link by
 * overriding common.tpl -- the parent's page templates hardcode
 * {include file="orderforms/standard_cart/common.tpl"}, so a child's common.tpl is never reached.
 *
 * Token bridge: every value reads --ha3-* from the hostaccent-premium client area theme, with the
 * measured premium value inlined as a fallback. That way the cart matches the premium theme when
 * it is active, and still looks right today under hexa, without duplicating the palette.
 */

#order-standard_cart {
    --hac-canvas: var(--ha3-canvas, #f4f7fc);
    --hac-surface: var(--ha3-surface-solid, #fff);
    --hac-surface-soft: var(--ha3-surface-soft, #f7f9fd);
    --hac-ink: var(--ha3-ink, #101b2f);
    --hac-copy: var(--ha3-copy, #53627a);
    --hac-muted: var(--ha3-muted, #65718a);
    --hac-line: var(--ha3-line, rgba(106, 125, 156, .14));

    --hac-action: var(--ha3-action, #1f5fd0);
    --hac-action-2: var(--ha3-action-2, #5340c8);
    --hac-action-hover: var(--ha3-action-hover, #1a4fb0);
    --hac-action-hover-2: var(--ha3-action-hover-2, #4b37b8);
    --hac-focus: var(--ha3-focus, #1f5fd0);

    --hac-success: var(--ha3-success-fill, #0f7d5b);
    --hac-success-text: var(--ha3-green-text, #0f7d5b);
    --hac-info-text: var(--ha3-cyan-text, #0b6f8f);
    --hac-danger: var(--ha3-danger, #c4283a);
    --hac-danger-text: var(--ha3-red-text, #c4283a);
    --hac-warn-text: var(--ha3-amber-text, #8a6206);
    --hac-accent-text: var(--ha3-blue-text, #1f5fd0);

    /* Defined once. Seventeen rules repeated this literal, which is both a maintenance trap and
       the reason the accent felt ubiquitous rather than deliberate. */
    /* Motion system. Four different durations were scattered across the file, all on a plain
       `ease`, which is why hovers felt slightly different depending on what you touched. */
    --hac-ease: cubic-bezier(.2, .8, .25, 1);
    --hac-ease-entrance: cubic-bezier(.16, 1, .3, 1);
    --hac-fast: 120ms;
    --hac-base: 180ms;
    --hac-lift: -2px;

    --hac-grad: linear-gradient(135deg, var(--hac-action), var(--hac-action-2));
    --hac-grad-hover: linear-gradient(135deg, var(--hac-action-hover), var(--hac-action-hover-2));


    --hac-shadow-xs: var(--ha3-shadow-xs, 0 8px 24px rgba(27, 45, 78, .055));
    --hac-shadow-sm: var(--ha3-shadow-sm, 0 16px 42px rgba(27, 45, 78, .085));
    --hac-shadow-lg: var(--ha3-shadow-lg, 0 30px 90px rgba(16, 31, 57, .16));
    --hac-radius: var(--ha3-radius, 16px);
    --hac-radius-lg: var(--ha3-radius-lg, 23px);
    --hac-control-h: var(--ha3-control-h, 42px);

    color: var(--hac-copy);
}

/* The premium theme flips tokens on html[data-ha-theme="dark"]; the var() chain above picks that
 * up on its own. These only restate the fallbacks, for when the premium theme is not the active
 * client area template and there is nothing to inherit from. */
html[data-ha-theme="dark"] #order-standard_cart {
    --hac-canvas: var(--ha3-canvas, #08111f);
    --hac-surface: var(--ha3-surface-solid, #0f1c30);
    --hac-surface-soft: var(--ha3-surface-soft, #12213a);
    --hac-ink: var(--ha3-ink, #edf4ff);
    --hac-copy: var(--ha3-copy, #a8b6ca);
    --hac-muted: var(--ha3-muted, #808fa6);
    --hac-line: var(--ha3-line, rgba(159, 183, 220, .13));
    --hac-focus: var(--ha3-focus, #7bacff);
    --hac-success-text: var(--ha3-green-text, #45d6a4);
    --hac-info-text: var(--ha3-cyan-text, #4cc9f0);
    --hac-danger-text: var(--ha3-red-text, #ff7b85);
    --hac-warn-text: var(--ha3-amber-text, #f0b849);
    --hac-accent-text: var(--ha3-blue-text, #7bacff);

    --hac-shadow-xs: var(--ha3-shadow-xs, 0 8px 25px rgba(0, 0, 0, .18));
    --hac-shadow-sm: var(--ha3-shadow-sm, 0 16px 42px rgba(0, 0, 0, .28));
    --hac-shadow-lg: var(--ha3-shadow-lg, 0 30px 90px rgba(0, 0, 0, .42));
}

/* ---------------------------------------------------------------- typography */

#order-standard_cart h1,
#order-standard_cart h2,
#order-standard_cart h3,
#order-standard_cart h4 {
    color: var(--hac-ink);
    letter-spacing: -.01em;
}

#order-standard_cart .header-lined {
    border-bottom: 1px solid var(--hac-line);
    color: var(--hac-ink);
    font-weight: 650;
    padding-bottom: 14px;
}

/* Stock renders .sub-heading as centred text over a full-width rule, with the span carrying an
   opaque background to punch a hole in it. Checkout uses ten of them in a column, which reads as a
   wall of dividers. Re-cast as a left-aligned section header with a gradient tick: the rule is
   dropped, so the span no longer needs to mask anything. */
#order-standard_cart .sub-heading {
    align-items: center;
    border-bottom: 0;
    display: flex;
    margin: 34px 0 18px;
    text-align: left;
}

#order-standard_cart .sub-heading::before {
    background: linear-gradient(180deg, var(--hac-action), var(--hac-action-2));
    border-radius: 3px;
    content: "";
    flex: 0 0 auto;
    height: 20px;
    margin-right: 12px;
    width: 4px;
}

#order-standard_cart .sub-heading span,
#order-standard_cart .sub-heading span.primary-bg-color {
    background: transparent;
    color: var(--hac-ink);
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -.01em;
    padding: 0;
    text-transform: none;
}

#order-standard_cart .info-text-sm,
#order-standard_cart .field-help-text {
    color: var(--hac-muted);
}

/* ------------------------------------------------------------- product cards */

#order-standard_cart .products .product {
    background: var(--hac-surface);
    border: 1px solid var(--hac-line);
    border-radius: var(--hac-radius);
    box-shadow: var(--hac-shadow-xs);
    overflow: hidden;
    transition: transform var(--hac-base) var(--hac-ease), box-shadow var(--hac-base) var(--hac-ease), border-color var(--hac-base) var(--hac-ease);
}

#order-standard_cart .products .product:hover {
    border-color: color-mix(in srgb, var(--hac-action) 32%, var(--hac-line));
    box-shadow: var(--hac-shadow-sm);
    transform: translateY(var(--hac-lift));
}

#order-standard_cart .products .product header {
    background: var(--hac-grad);
    border-bottom: 0;
    color: #fff;
    font-weight: 650;
    letter-spacing: -.01em;
    padding: 18px 20px;
}

#order-standard_cart .products .product header span,
#order-standard_cart .products .product header .qty {
    color: rgba(255, 255, 255, .88);
}

#order-standard_cart .products .product div.product-desc {
    background: transparent;
    color: var(--hac-copy);
    padding: 18px 20px;
}

#order-standard_cart .products .product span.feature-value {
    color: var(--hac-ink);
    font-weight: 620;
}

#order-standard_cart .products .product div.product-pricing {
    background: var(--hac-surface-soft);
    border-top: 1px solid var(--hac-line);
    color: var(--hac-muted);
    padding: 18px 20px;
}

#order-standard_cart .products .product div.product-pricing span.price {
    color: var(--hac-ink);
    font-weight: 700;
    letter-spacing: -.02em;
}

#order-standard_cart .products .product footer {
    background: var(--hac-surface-soft);
    border-top: 0;
    padding: 0 20px 20px;
}

/* ---------------------------------------------------------------- card layout

   Two layouts collide on .product: the stock cart floats the footer right at a fixed width, while
   the premium client area theme also styles .product and puts display:flex on it. The result is a
   footer stranded mid-card with dead space around it. Rather than unpick either, the card is made
   an explicit flex column here, so the description grows and the footer pins to the bottom -- which
   is also what .row-eq-height needs to line the cards up. */

#order-standard_cart .products .row-eq-height > [class*="col-"] {
    display: flex;
}

#order-standard_cart .products .product {
    display: flex;
    flex-direction: column;
    width: 100%;
}

#order-standard_cart .products .product div.product-desc {
    flex: 1 1 auto;
}

#order-standard_cart .products .product div.product-desc ul {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}

#order-standard_cart .products .product div.product-desc li {
    border-top: 1px solid var(--hac-line);
    padding: 8px 0;
}

#order-standard_cart .products .product footer {
    align-items: center;
    display: flex;
    float: none;
    gap: 16px;
    justify-content: space-between;
    margin-top: auto;
    width: 100%;
}

#order-standard_cart .products .product div.product-pricing {
    background: transparent;
    border-top: 0;
    flex: 1 1 auto;
    padding: 0;
    text-align: left;
}

#order-standard_cart .products .product div.product-pricing span.price {
    display: block;
    font-size: 1.55em;
    line-height: 1.2;
}

#order-standard_cart .products .product .btn-order-now {
    flex: 0 0 auto;
    padding: 10px 20px;
    white-space: nowrap;
}

/* The pricing block sat on its own tinted shelf; now that it shares the footer row, the tint
   belongs to the whole foot. */
#order-standard_cart .products .product footer {
    background: var(--hac-surface-soft);
    border-top: 1px solid var(--hac-line);
    padding: 18px 20px;
}

/* ------------------------------------------------------------------- buttons */

#order-standard_cart .btn {
    border-radius: 12px;
    font-weight: 620;
    transition: background var(--hac-base) var(--hac-ease), box-shadow var(--hac-base) var(--hac-ease), transform var(--hac-base) var(--hac-ease);
}

#order-standard_cart .btn-primary,
#order-standard_cart .btn-success,
#order-standard_cart .btn-order-now {
    background: var(--hac-grad);
    border: 0;
    box-shadow: 0 10px 26px color-mix(in srgb, var(--hac-action) 26%, transparent);
    color: #fff;
}

#order-standard_cart .btn-primary:hover,
#order-standard_cart .btn-primary:focus,
#order-standard_cart .btn-success:hover,
#order-standard_cart .btn-success:focus,
#order-standard_cart .btn-order-now:hover,
#order-standard_cart .btn-order-now:focus {
    background: var(--hac-grad-hover);
    color: #fff;
    transform: translateY(var(--hac-lift));
}

#order-standard_cart .btn-default {
    background: var(--hac-surface);
    border: 1px solid var(--hac-line);
    color: var(--hac-ink);
}

#order-standard_cart .btn-default:hover,
#order-standard_cart .btn-default:focus {
    background: var(--hac-surface-soft);
    border-color: color-mix(in srgb, var(--hac-action) 30%, var(--hac-line));
    color: var(--hac-ink);
}

#order-standard_cart .btn-link,
#order-standard_cart .btn-continue-shopping {
    color: var(--hac-accent-text);
}

#order-standard_cart .btn-remove-from-cart {
    color: var(--hac-danger-text);
}

#order-standard_cart .btn:focus-visible {
    outline: 2px solid var(--hac-focus);
    outline-offset: 2px;
}

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

#order-standard_cart .form-control,
#order-standard_cart .field.form-control,
#order-standard_cart select,
#order-standard_cart .categories-collapsed select {
    background: var(--hac-surface);
    border: 1px solid var(--hac-line);
    border-radius: 12px;
    box-shadow: none;
    color: var(--hac-ink);
    min-height: var(--hac-control-h);
    transition: border-color var(--hac-base) var(--hac-ease), box-shadow var(--hac-base) var(--hac-ease);
}

#order-standard_cart .form-control:focus,
#order-standard_cart select:focus {
    border-color: var(--hac-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hac-focus) 18%, transparent);
    outline: none;
}

#order-standard_cart label {
    color: var(--hac-ink);
    font-weight: 600;
}

#order-standard_cart .field-icon {
    color: var(--hac-muted);
}

#order-standard_cart .field-error-msg {
    color: var(--hac-danger-text);
}

/* ---------------------------------------------------------- addons and options */

#order-standard_cart .panel-addon {
    background: var(--hac-surface);
    border: 1px solid var(--hac-line);
    border-radius: var(--hac-radius);
    box-shadow: var(--hac-shadow-xs);
    transition: border-color var(--hac-base) var(--hac-ease), box-shadow var(--hac-base) var(--hac-ease);
}

#order-standard_cart .panel-addon .panel-body {
    color: var(--hac-copy);
}

#order-standard_cart .panel-addon .panel-price {
    color: var(--hac-ink);
    font-weight: 700;
}

#order-standard_cart .panel-addon-selected {
    border-color: var(--hac-success);
    box-shadow: 0 0 0 1px var(--hac-success), var(--hac-shadow-sm);
}

#order-standard_cart .panel-addon-selected .panel-price,
#order-standard_cart .panel-addon-selected .panel-add {
    color: var(--hac-success-text);
}

#order-standard_cart .domain-selection-options .option {
    background: var(--hac-surface);
    border: 1px solid var(--hac-line);
    border-radius: var(--hac-radius);
    transition: border-color var(--hac-base) var(--hac-ease), background var(--hac-base) var(--hac-ease);
}

#order-standard_cart .domain-selection-options .option:hover {
    border-color: color-mix(in srgb, var(--hac-action) 32%, var(--hac-line));
}

/* --------------------------------------------------------- sidebar and totals */

#order-standard_cart .cart-sidebar,
#order-standard_cart .sidebar .panel,
#order-standard_cart .summary-container {
    background: var(--hac-surface);
    border: 1px solid var(--hac-line);
    border-radius: var(--hac-radius-lg);
    box-shadow: var(--hac-shadow-sm);
}

#order-standard_cart .bordered-totals {
    border-color: var(--hac-line);
    color: var(--hac-ink);
}

#order-standard_cart .cost {
    color: var(--hac-ink);
    font-weight: 700;
}

#order-standard_cart .cycle {
    color: var(--hac-muted);
}

#order-standard_cart .view-cart-empty {
    color: var(--hac-muted);
}

/* ------------------------------------------------- stock cart's hardcoded chrome

   standard_cart/style.css still ships its original palette -- #058 on the cart header and the
   empty-cart button, #666 on the order summary, #336699 on the active category. These are the
   bars that read as "old WHMCS", so they are re-pointed at the premium tokens here rather than
   by forking style.css. */

#order-standard_cart .view-cart-items-header {
    background: var(--hac-grad);
    border-radius: var(--hac-radius) var(--hac-radius) 0 0;
    color: #fff;
    font-weight: 620;
    letter-spacing: .01em;
    padding: 13px 20px;
}

#order-standard_cart .view-cart-items {
    border-bottom: 1px solid var(--hac-line);
    border-radius: 0 0 var(--hac-radius) var(--hac-radius);
    box-shadow: var(--hac-shadow-xs);
    overflow: hidden;
}

#order-standard_cart .view-cart-items .item {
    background: var(--hac-surface);
    border-bottom: 1px solid var(--hac-line);
    color: var(--hac-copy);
    padding: 16px 20px;
}

#order-standard_cart .view-cart-items .item:nth-child(even) {
    background: var(--hac-surface-soft);
}

#order-standard_cart .view-cart-items .item:last-child {
    border-bottom: 0;
}

#order-standard_cart .view-cart-items .item-title {
    color: var(--hac-ink);
    font-weight: 650;
}

#order-standard_cart .view-cart-items .item-group,
#order-standard_cart .view-cart-items .item-domain {
    color: var(--hac-muted);
}

#order-standard_cart .view-cart-items .item-price span {
    color: var(--hac-ink);
}

#order-standard_cart .view-cart-items .item-price .cycle {
    color: var(--hac-muted);
}

#order-standard_cart #btnEmptyCart {
    background: transparent;
    border: 1px solid var(--hac-line);
    border-radius: 10px;
    box-shadow: none;
    color: var(--hac-danger-text);
    padding: 6px 14px;
}

#order-standard_cart #btnEmptyCart:hover,
#order-standard_cart #btnEmptyCart:focus {
    background: color-mix(in srgb, var(--hac-danger) 9%, transparent);
    border-color: color-mix(in srgb, var(--hac-danger) 34%, var(--hac-line));
    color: var(--hac-danger-text);
}

#order-standard_cart .order-summary {
    background: transparent;
    border-bottom: 0;
    border-radius: var(--hac-radius-lg) var(--hac-radius-lg) 0 0;
    overflow: hidden;
}

#order-standard_cart .order-summary h2 {
    background: var(--hac-grad);
    color: #fff;
    font-weight: 650;
    letter-spacing: -.01em;
    padding: 15px 20px;
}

#order-standard_cart .order-summary .summary-totals {
    border-color: var(--hac-line);
}

#order-standard_cart .order-summary .product-name {
    color: var(--hac-ink);
}

#order-standard_cart .order-summary .product-group {
    color: var(--hac-muted);
}

#order-standard_cart .list-group-item.active,
#order-standard_cart .list-group-item-action.active {
    background: var(--hac-grad);
    border-color: transparent;
    color: #fff;
}

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

#order-standard_cart .alert {
    border: 1px solid var(--hac-line);
    border-radius: var(--hac-radius);
    box-shadow: var(--hac-shadow-xs);
}

#order-standard_cart .alert-success {
    background: color-mix(in srgb, var(--hac-success) 10%, var(--hac-surface));
    color: var(--hac-success-text);
}

#order-standard_cart .alert-info {
    background: color-mix(in srgb, var(--hac-info-text) 10%, var(--hac-surface));
    color: var(--hac-info-text);
}

#order-standard_cart .alert-warning {
    background: color-mix(in srgb, var(--hac-warn-text) 12%, var(--hac-surface));
    color: var(--hac-warn-text);
}

#order-standard_cart .alert-danger {
    background: color-mix(in srgb, var(--hac-danger) 10%, var(--hac-surface));
    color: var(--hac-danger-text);
}

/* --------------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
    #order-standard_cart .products .product,
    #order-standard_cart .btn {
        transition: none;
    }

    #order-standard_cart .products .product:hover,
    #order-standard_cart .btn-primary:hover {
        transform: none;
    }
}


/* ==============================================================================
   Per-step treatment

   The flow is Domain search -> Products -> Configure -> Review -> Checkout. Each step below is
   styled against markup that was read off the live pages, so every selector here corresponds to
   something that actually renders. Nothing depends on a forked template.
   ============================================================================== */

/* ------------------------------------------------------- step: domain search

   Stock ships this banner in orange with a globe bitmap, which fights the brand on the very first
   screen a buyer sees. The globe is kept (it carries the meaning) and re-tinted by dropping it to
   low opacity over the brand gradient. */

#order-standard_cart .domain-checker-container {
    background: var(--hac-grad);
    border-radius: var(--hac-radius-lg);
    box-shadow: var(--hac-shadow-sm);
    overflow: hidden;
}

#order-standard_cart .domain-checker-bg {
    background-blend-mode: soft-light;
    opacity: .999;
    padding: 52px 28px;
}

#order-standard_cart .domain-checker-container .form-control {
    border: 0;
    border-radius: 14px 0 0 14px;
    font-size: 17px;
    height: 56px;
    padding-left: 22px;
}

#order-standard_cart .domain-checker-container .btn {
    border-radius: 0 14px 14px 0;
    font-size: 16px;
    height: 56px;
    padding: 0 30px;
}

#order-standard_cart .domain-checker-result-headline {
    color: var(--hac-ink);
    font-weight: 650;
}

#order-standard_cart .domain-available,
#order-standard_cart .domain-checker-available {
    background: color-mix(in srgb, var(--hac-success) 10%, var(--hac-surface));
    border: 1px solid color-mix(in srgb, var(--hac-success) 32%, var(--hac-line));
    border-radius: var(--hac-radius);
    color: var(--hac-success-text);
}

#order-standard_cart .domain-error,
#order-standard_cart .domain-checker-unavailable,
#order-standard_cart .domain-invalid,
#order-standard_cart .domain-checker-invalid {
    background: color-mix(in srgb, var(--hac-danger) 9%, var(--hac-surface));
    border: 1px solid color-mix(in srgb, var(--hac-danger) 30%, var(--hac-line));
    border-radius: var(--hac-radius);
    color: var(--hac-danger-text);
}

#order-standard_cart .domain-suggestion {
    background: var(--hac-surface);
    border: 1px solid var(--hac-line);
    border-radius: 12px;
    margin-bottom: 8px;
    transition: border-color var(--hac-base) var(--hac-ease), transform var(--hac-base) var(--hac-ease);
}

#order-standard_cart .domain-suggestion:hover {
    border-color: color-mix(in srgb, var(--hac-action) 34%, var(--hac-line));
    transform: translateX(2px);
}

#order-standard_cart .domain-price,
#order-standard_cart .domain-pricing {
    color: var(--hac-ink);
    font-weight: 650;
}

#order-standard_cart .tld-column {
    color: var(--hac-copy);
}

/* ------------------------------------------------------------ step: configure

   Configurable options render as bare radios in two columns, which gives a buyer no sense of what
   is selected without reading every line. Each option becomes a hit-target tile with a real
   selected state. Group labels carry a for= attribute and option labels do not, which is what
   separates them here. */

#order-standard_cart #frmConfigureProduct .form-group > label[for] {
    color: var(--hac-muted);
    display: block;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: .05em;
    margin-bottom: 10px;
    text-transform: uppercase;
}

#order-standard_cart #productConfigurableOptions label:not([for]) {
    align-items: center;
    background: var(--hac-surface);
    border: 1px solid var(--hac-line);
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    font-weight: 500;
    gap: 10px;
    margin-bottom: 8px;
    padding: 11px 14px;
    transition: border-color var(--hac-base) var(--hac-ease), background var(--hac-base) var(--hac-ease), box-shadow var(--hac-base) var(--hac-ease);
    width: 100%;
}

#order-standard_cart #productConfigurableOptions label:not([for]):hover {
    border-color: color-mix(in srgb, var(--hac-action) 34%, var(--hac-line));
}

/* iCheck replaces the input with a styled div and marks the wrapper .checked, so :has() is what
   reaches the label from the checked state in both the plain and iCheck cases. */
#order-standard_cart #productConfigurableOptions label:not([for]):has(input:checked),
#order-standard_cart #productConfigurableOptions label:not([for]):has(.checked) {
    background: color-mix(in srgb, var(--hac-action) 7%, var(--hac-surface));
    border-color: color-mix(in srgb, var(--hac-action) 46%, var(--hac-line));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--hac-action) 30%, transparent);
    color: var(--hac-ink);
    font-weight: 600;
}

#order-standard_cart .product-configurable-options {
    margin-top: 4px;
}

/* -------------------------------------------------------------- step: checkout

   The stock checkout is one long unframed column: ten section headers, no grouping, and the buyer
   loses sight of what they are paying for at the moment they are asked to pay. The form becomes a
   single elevated panel, and the total is promoted rather than left as a generic success alert. */

#order-standard_cart #frmCheckout,
#order-standard_cart #frmConfigureDomains {
    background: var(--hac-surface);
    border: 1px solid var(--hac-line);
    border-radius: var(--hac-radius-lg);
    box-shadow: var(--hac-shadow-sm);
    padding: 8px 28px 28px;
}

#order-standard_cart #frmCheckout .sub-heading:first-of-type {
    margin-top: 24px;
}

#order-standard_cart .account,
#order-standard_cart .account-select .account {
    background: var(--hac-surface);
    border: 1px solid var(--hac-line);
    border-radius: var(--hac-radius);
    padding: 16px 18px;
    transition: border-color var(--hac-base) var(--hac-ease), box-shadow var(--hac-base) var(--hac-ease);
}

#order-standard_cart .account.active,
#order-standard_cart .account:has(input:checked),
#order-standard_cart .account:has(.checked) {
    border-color: color-mix(in srgb, var(--hac-action) 46%, var(--hac-line));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--hac-action) 30%, transparent);
}

#order-standard_cart .account .address {
    color: var(--hac-muted);
}

/* .payment-methods is the class on the radio INPUT, not on a container -- an earlier pass here
   styled it as if it were a panel and hung rules off `.payment-methods label`, which can never
   match. The gateway tiles are built on .ha-gateway instead, further down. */

#order-standard_cart #totalDueToday {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--hac-action) 10%, var(--hac-surface)),
        color-mix(in srgb, var(--hac-action-2) 10%, var(--hac-surface)));
    border: 1px solid color-mix(in srgb, var(--hac-action) 26%, var(--hac-line));
    border-radius: var(--hac-radius);
    color: var(--hac-ink);
    font-size: 17px;
    padding: 20px;
}

#order-standard_cart #totalCartPrice {
    color: var(--hac-ink);
    font-size: 1.5em;
    font-weight: 700;
    letter-spacing: -.02em;
}

/* The terms checkbox is the last thing between a buyer and a completed order, so it gets a frame
   of its own rather than sitting loose above the button. */
#order-standard_cart #accepttos {
    transform: scale(1.15);
}

#order-standard_cart label[for="accepttos"],
#order-standard_cart .accept-tos {
    color: var(--hac-ink);
}

#order-standard_cart #btnCompleteOrder {
    border-radius: 14px;
    font-size: 17px;
    padding: 15px 40px;
}

#order-standard_cart .checkout-security-msg {
    background: var(--hac-surface-soft);
    border: 1px solid var(--hac-line);
    border-radius: var(--hac-radius);
    color: var(--hac-muted);
    font-size: 13px;
}

#order-standard_cart .checkout-error-feedback,
#order-standard_cart .gateway-errors {
    border-radius: var(--hac-radius);
}

/* ------------------------------------------------------- summary stays in view

   On configure and review the summary is the only thing telling a buyer what the running total is.
   Sticking it to the viewport on desktop keeps the number visible while they scroll long option
   lists -- the single highest-leverage change on this flow. */

@media (min-width: 992px) {
    #order-standard_cart .summary-container {
        position: sticky;
        top: 24px;
    }
}

#order-standard_cart .summary-container {
    overflow: hidden;
}

#order-standard_cart .summary-container .total-due-today .amt {
    letter-spacing: -.03em;
    line-height: 1.1;
}

/* ------------------------------------------------------------------- polish */

#order-standard_cart a {
    transition: color var(--hac-base) var(--hac-ease);
}

#order-standard_cart .badge-success {
    background: var(--hac-success);
}

#order-standard_cart hr {
    border-color: var(--hac-line);
}

@media (prefers-reduced-motion: reduce) {
    #order-standard_cart .domain-suggestion,
    #order-standard_cart #productConfigurableOptions label:not([for]) {
        transition: none;
    }

    #order-standard_cart .domain-suggestion:hover {
        transform: none;
    }
}

/* ------------------------------------------------- domain step, second pass

   Observed on the live page: the banner's globe is a bitmap (standard_cart/img/globe.png) sitting
   on .domain-checker-bg while the brand gradient sits on the parent, so no blend mode can tint it
   -- it stayed yellow against blue. The bitmap is dropped and the highlight drawn in CSS instead,
   which tints with the brand for free and saves a request. */

#order-standard_cart .domain-checker-bg {
    background-image: none;
}

#order-standard_cart .domain-checker-container {
    background:
        radial-gradient(circle at 86% 18%, rgba(255, 255, 255, .18), transparent 45%),
        radial-gradient(circle at 10% 92%, rgba(255, 255, 255, .12), transparent 42%),
        var(--hac-grad);
}

/* Both class names exist across WHMCS versions: .featured-tld is what 8.13 renders for the
   MarketConnect promo row, .spotlight-tld for the TLD strip. */
#order-standard_cart .featured-tld,
#order-standard_cart .spotlight-tld {
    background: var(--hac-surface);
    border: 1px solid var(--hac-line);
    border-radius: var(--hac-radius);
    box-shadow: var(--hac-shadow-xs);
    overflow: hidden;
    transition: box-shadow var(--hac-base) var(--hac-ease), transform var(--hac-base) var(--hac-ease);
}

#order-standard_cart .featured-tld:hover,
#order-standard_cart .spotlight-tld:hover {
    box-shadow: var(--hac-shadow-sm);
    transform: translateY(var(--hac-lift));
}

/* WHMCS emits .price.<tld> and colours it with that TLD's own brand (".online" genuinely is
   green). That is someone else's identity, so only the typography and fit are normalised here --
   the colour is left alone deliberately. */
#order-standard_cart .featured-tld .price,
#order-standard_cart .spotlight-tld .price {
    font-weight: 650;
    letter-spacing: .01em;
    padding: 11px 14px;
}

#order-standard_cart .badge {
    border-radius: 999px;
    font-weight: 600;
    letter-spacing: .01em;
    padding: 6px 13px;
}

#order-standard_cart .badge-secondary {
    background: var(--hac-surface-soft);
    border: 1px solid var(--hac-line);
    color: var(--hac-copy);
    transition: border-color var(--hac-base) var(--hac-ease), color var(--hac-base) var(--hac-ease);
}

#order-standard_cart .badge-secondary:hover {
    border-color: color-mix(in srgb, var(--hac-action) 38%, var(--hac-line));
    color: var(--hac-ink);
}

#order-standard_cart .badge-secondary.badge-success,
#order-standard_cart .badge-success {
    background: var(--hac-grad);
    border-color: transparent;
    color: #fff;
}

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

#order-standard_cart table {
    border-color: var(--hac-line);
}

#order-standard_cart table thead th {
    background: var(--hac-surface-soft);
    border-bottom: 1px solid var(--hac-line);
    border-top: 0;
    color: var(--hac-ink);
    font-weight: 650;
}

#order-standard_cart table tbody td,
#order-standard_cart table tbody th {
    border-color: var(--hac-line);
    color: var(--hac-copy);
}

#order-standard_cart table tbody tr:hover td {
    background: var(--hac-surface-soft);
}

@media (prefers-reduced-motion: reduce) {
    #order-standard_cart .featured-tld,
    #order-standard_cart .spotlight-tld {
        transition: none;
    }

    #order-standard_cart .featured-tld:hover,
    #order-standard_cart .spotlight-tld:hover {
        transform: none;
    }
}

/* ------------------------------------------------ surfaces stock paints white

   Found by walking the checkout in dark mode: these carry a literal #fff/#eee from the stock cart,
   so in dark they stayed white with light text on top -- "Create a New Account" was effectively
   invisible. Binding them to the surface tokens fixes dark without touching light, because the
   tokens resolve to the same white there. Specificity is #id + two classes so the stock rules
   lose. */

#order-standard_cart .account,
#order-standard_cart .account.active,
#order-standard_cart .account.border-bottom,
#order-standard_cart .account-select-container .account {
    background: var(--hac-surface);
    color: var(--hac-copy);
}

#order-standard_cart .account.border-bottom {
    border-bottom-color: var(--hac-line);
}

#order-standard_cart .account strong,
#order-standard_cart .account .account-name {
    color: var(--hac-ink);
}

#order-standard_cart .apply-credit-container {
    background: var(--hac-surface-soft);
    border: 1px solid var(--hac-line);
    border-radius: var(--hac-radius);
    color: var(--hac-copy);
    padding: 16px 18px;
}

#order-standard_cart .apply-credit-container label {
    font-weight: 500;
}

#order-standard_cart .panel,
#order-standard_cart .card,
#order-standard_cart .well,
#order-standard_cart .modal-content {
    background-color: var(--hac-surface);
    border-color: var(--hac-line);
    color: var(--hac-copy);
}

#order-standard_cart .list-group-item {
    background-color: var(--hac-surface);
    border-color: var(--hac-line);
    color: var(--hac-copy);
}

#order-standard_cart .panel-heading,
#order-standard_cart .card-header {
    border-bottom-color: var(--hac-line);
    color: var(--hac-ink);
}

/* The account tiles resisted everything above: the selector matches, --hac-surface resolves to
   #0f1c30 in dark, and yet the used background stayed #fff. The rule responsible could not be
   pinned down through the CSSOM -- shorthands containing var() report an empty value via
   getPropertyValue, and a grouped selector containing :has() makes Element.matches throw, so a
   scan of document.styleSheets returns nothing for this element. Rather than keep guessing, these
   two declarations are forced. Scope is deliberately tight: two properties, one component. */
#order-standard_cart .account,
#order-standard_cart .account.active,
#order-standard_cart .account.border-bottom {
    background-color: var(--hac-surface) !important;
    color: var(--hac-copy) !important;
}

#order-standard_cart .account strong,
#order-standard_cart .account b {
    color: var(--hac-ink) !important;
}

/* ============================================================== order stepper

   Markup comes from includes/order-steps.tpl, which each step template includes with a haStep
   number. standard_cart has no step indicator of its own; this is the clearest signal that the
   flow is short and finite, which is what stops buyers abandoning mid-order. */

#order-standard_cart .ha-steps {
    align-items: flex-start;
    background: var(--hac-surface);
    border: 1px solid var(--hac-line);
    border-radius: var(--hac-radius-lg);
    box-shadow: var(--hac-shadow-xs);
    display: flex;
    list-style: none;
    margin: 0 0 26px;
    padding: 22px 16px 18px;
}

#order-standard_cart .ha-step {
    flex: 1 1 0;
    padding: 0 4px;
    position: relative;
    text-align: center;
}

/* Connector runs from the previous marker's centre to this one's; -50%/100% is what keeps it
   anchored between the two regardless of column width. */
#order-standard_cart .ha-step::before {
    background: var(--hac-line);
    content: "";
    height: 2px;
    left: -50%;
    position: absolute;
    top: 16px;
    width: 100%;
}

#order-standard_cart .ha-step:first-child::before {
    display: none;
}

#order-standard_cart .ha-step.is-done::before,
#order-standard_cart .ha-step.is-current::before {
    background: linear-gradient(90deg, var(--hac-action), var(--hac-action-2));
}

#order-standard_cart .ha-step-marker {
    align-items: center;
    background: var(--hac-surface);
    border: 2px solid var(--hac-line);
    border-radius: 50%;
    color: var(--hac-muted);
    display: inline-flex;
    font-size: 14px;
    font-weight: 700;
    height: 34px;
    justify-content: center;
    position: relative;
    width: 34px;
    z-index: 1;
}

#order-standard_cart .ha-step.is-done .ha-step-marker,
#order-standard_cart .ha-step.is-current .ha-step-marker {
    background: var(--hac-grad);
    border-color: transparent;
    color: #fff;
}

#order-standard_cart .ha-step.is-current .ha-step-marker {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--hac-action) 16%, transparent);
}

#order-standard_cart .ha-step-label {
    color: var(--hac-muted);
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -.005em;
    margin-top: 9px;
}

#order-standard_cart .ha-step.is-done .ha-step-label {
    color: var(--hac-copy);
}

#order-standard_cart .ha-step.is-current .ha-step-label {
    color: var(--hac-ink);
}

@media (max-width: 575px) {
    #order-standard_cart .ha-steps {
        padding: 16px 8px 14px;
    }

    #order-standard_cart .ha-step-marker {
        height: 28px;
        width: 28px;
    }

    #order-standard_cart .ha-step::before {
        top: 13px;
    }

    #order-standard_cart .ha-step-label {
        font-size: 11px;
    }
}

/* ====================================================== checkout order recap

   Markup from includes/checkout-summary.tpl. Deliberately quieter than the review page's summary:
   at this point the buyer has already chosen, and the recap is there for reassurance, not for
   browsing. The due line is the only thing that competes with the pay button. */

#order-standard_cart .ha-recap {
    background: var(--hac-surface);
    border: 1px solid var(--hac-line);
    border-radius: var(--hac-radius-lg);
    box-shadow: var(--hac-shadow-xs);
    margin-bottom: 24px;
    overflow: hidden;
}

#order-standard_cart .ha-recap-head {
    align-items: center;
    background: var(--hac-surface-soft);
    border-bottom: 1px solid var(--hac-line);
    display: flex;
    justify-content: space-between;
    padding: 14px 20px;
}

#order-standard_cart .ha-recap-title {
    color: var(--hac-ink);
    font-size: 15px;
    font-weight: 650;
}

#order-standard_cart .ha-recap-edit {
    color: var(--hac-accent-text);
    font-size: 13px;
    font-weight: 600;
}

#order-standard_cart .ha-recap-items {
    list-style: none;
    margin: 0;
    padding: 0;
}

#order-standard_cart .ha-recap-item {
    align-items: baseline;
    border-bottom: 1px solid var(--hac-line);
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 14px 20px;
}

#order-standard_cart .ha-recap-name {
    color: var(--hac-ink);
    font-weight: 600;
}

#order-standard_cart .ha-recap-price {
    color: var(--hac-ink);
    font-weight: 650;
    text-align: right;
    white-space: nowrap;
}

#order-standard_cart .ha-recap-name small,
#order-standard_cart .ha-recap-price small {
    color: var(--hac-muted);
    display: block;
    font-weight: 500;
    margin-top: 3px;
}

#order-standard_cart .ha-recap-totals {
    padding: 14px 20px 16px;
}

#order-standard_cart .ha-recap-row {
    color: var(--hac-copy);
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
}

#order-standard_cart .ha-recap-discount {
    color: var(--hac-success-text);
}

#order-standard_cart .ha-recap-due {
    align-items: baseline;
    border-top: 1px solid var(--hac-line);
    color: var(--hac-ink);
    font-weight: 650;
    margin-top: 8px;
    padding-top: 12px;
}

#order-standard_cart .ha-recap-due strong {
    font-size: 1.35em;
    letter-spacing: -.02em;
}

@media (max-width: 575px) {
    #order-standard_cart .ha-recap-item {
        flex-direction: column;
        gap: 4px;
    }

    #order-standard_cart .ha-recap-price {
        text-align: left;
    }
}

/* ========================================== domain results, measured and refitted

   Measured on the live search: the suggestion row is 49px tall with 12px/20px padding, leaving
   25px of content box, while the button inside it renders 42px tall (9px/17px padding at the
   theme's .btn size). That 17px is what spills over the row's border. standard_cart sized these
   rows for its own `font-size: .8em`, which the premium theme overrides.

   The spotlight cards have `padding: 15px 0` -- no horizontal padding at all -- so their Add
   button runs to the card edge and gets clipped by the card's own overflow. */

#order-standard_cart .domain-suggestion {
    align-items: center;
    border-color: var(--hac-line);
    display: flex;
    gap: 0;
    padding: 11px 18px;
}

#order-standard_cart .domain-suggestion .domain {
    color: var(--hac-copy);
}

#order-standard_cart .domain-suggestion .extension {
    color: var(--hac-ink);
    font-weight: 650;
}

#order-standard_cart .domain-suggestion .actions {
    align-items: center;
    display: flex;
    gap: 14px;
    margin-left: auto;
}

#order-standard_cart .domain-suggestion .price {
    color: var(--hac-ink);
    font-weight: 650;
    white-space: nowrap;
}

/* Stock leaves this at Bootstrap's default grey (#555) and full .btn height. */
#order-standard_cart .btn-add-to-cart {
    background: var(--hac-grad);
    border: 0;
    border-radius: 10px;
    box-shadow: 0 6px 16px color-mix(in srgb, var(--hac-action) 22%, transparent);
    color: #fff;
    font-size: 13px;
    font-weight: 620;
    padding: 7px 16px;
    white-space: nowrap;
}

#order-standard_cart .btn-add-to-cart:hover,
#order-standard_cart .btn-add-to-cart:focus {
    background: var(--hac-grad-hover);
    color: #fff;
}

#order-standard_cart .spotlight-tlds {
    background: var(--hac-surface-soft);
    border: 1px solid var(--hac-line);
    border-radius: var(--hac-radius-lg);
    padding: 14px;
}

#order-standard_cart .spotlight-tld {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 10px;
    height: auto;
    justify-content: center;
    padding: 18px 16px;
}

#order-standard_cart .spotlight-tld .domain-lookup-result {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* Stock pins these to a flat 100px, which no longer fits the label at the theme's font size. */
#order-standard_cart .domain-lookup-result .btn {
    border-radius: 11px;
    font-size: 13px;
    min-width: 128px;
    padding: 9px 18px;
    width: auto;
}

#order-standard_cart .domain-lookup-result .btn.available {
    background: var(--hac-grad);
    border: 0;
    color: #fff;
}

#order-standard_cart .domain-lookup-result .btn.unavailable,
#order-standard_cart .domain-lookup-result .btn.invalid {
    background: var(--hac-surface-soft);
    border: 1px solid var(--hac-line);
    color: var(--hac-muted);
}

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

   The Categories and Actions panels were carrying stock list-group chrome: hairlines edge to edge,
   no hover, no sense of depth. They are the only persistent navigation in the flow, so they get the
   same card treatment as the content and a hover that moves. */

#order-standard_cart .cart-sidebar .panel,
#order-standard_cart .panel-sidebar {
    border: 1px solid var(--hac-line);
    border-radius: var(--hac-radius-lg);
    box-shadow: var(--hac-shadow-xs);
    overflow: hidden;
}

#order-standard_cart .panel-sidebar .panel-heading,
#order-standard_cart .panel-sidebar .card-header {
    background: var(--hac-surface-soft);
    color: var(--hac-ink);
    font-size: 15px;
    font-weight: 650;
    padding: 15px 18px;
}

#order-standard_cart .panel-sidebar .list-group-item {
    border-left: 0;
    border-radius: 0;
    border-right: 0;
    box-shadow: inset 3px 0 0 transparent;
    color: var(--hac-copy);
    font-weight: 500;
    padding: 12px 18px;
    transition: background var(--hac-base) var(--hac-ease), box-shadow var(--hac-base) var(--hac-ease), color var(--hac-base) var(--hac-ease), padding-left var(--hac-base) var(--hac-ease);
}

#order-standard_cart .panel-sidebar .list-group-item:last-child {
    border-bottom: 0;
}

#order-standard_cart .panel-sidebar .list-group-item:hover {
    background: var(--hac-surface-soft);
    box-shadow: inset 3px 0 0 color-mix(in srgb, var(--hac-action) 55%, transparent);
    color: var(--hac-ink);
    padding-left: 22px;
}

#order-standard_cart .panel-sidebar .list-group-item.active {
    box-shadow: none;
    font-weight: 600;
}

#order-standard_cart .panel-sidebar .list-group-item.active:hover {
    padding-left: 18px;
}

#order-standard_cart .panel-sidebar .list-group-item i {
    margin-right: 9px;
    opacity: .75;
    width: 16px;
}

@media (prefers-reduced-motion: reduce) {
    #order-standard_cart .panel-sidebar .list-group-item {
        transition: none;
    }

    #order-standard_cart .panel-sidebar .list-group-item:hover {
        padding-left: 18px;
    }
}

/* Measured on the live page: the active sidebar row was painting --hac-copy (#53627a) over the
   brand gradient, which is unreadable. Stated here, after the surface-token block that was
   overriding it. */
#order-standard_cart .panel-sidebar .list-group-item.active,
#order-standard_cart .panel-sidebar .list-group-item.active:hover {
    color: #fff;
}

#order-standard_cart .panel-sidebar .list-group-item.active i {
    opacity: 1;
}

/* ==================================================== horizontal package rows

   One package per row: the name bar spans the full width, the spec list sits left and the price
   with its call to action sits right against a divider. Compared with the two-up card grid this
   compares far better across a range of servers -- specs line up in a column instead of being
   split across two boxes -- and it gives long feature lists room, which matters for the dedicated
   and VPS groups. Below 768px it folds back to the stacked card.

   Bootstrap's column classes are widened here rather than changed in the template, so products.tpl
   keeps its stock markup. */

/* The premium theme puts display:grid on .row, so Bootstrap's flex-basis has no effect here and
   the two-up layout comes from the grid's column template. Measured on the live page after
   flex: 0 0 100% left the column at 632px with a computed flex-basis of 100%. */
#order-standard_cart .products .row-eq-height {
    display: grid;
    gap: 20px;
    grid-template-columns: 1fr;
}

#order-standard_cart .products .row-eq-height > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}

@media (min-width: 768px) {
    #order-standard_cart .products .product {
        display: grid;
        grid-template-areas:
            "head head"
            "desc price";
        grid-template-columns: minmax(0, 1fr) 290px;
    }

    #order-standard_cart .products .product > header {
        grid-area: head;
    }

    #order-standard_cart .products .product div.product-desc {
        grid-area: desc;
        padding: 20px 24px;
    }

    /* With the full row to work with, specs read better in two columns than as one long list. */
    #order-standard_cart .products .product div.product-desc ul {
        column-gap: 28px;
        columns: 2;
    }

    #order-standard_cart .products .product div.product-desc li {
        break-inside: avoid;
    }

    #order-standard_cart .products .product footer {
        align-items: stretch;
        border-left: 1px solid var(--hac-line);
        border-top: 0;
        flex-direction: column;
        gap: 12px;
        grid-area: price;
        justify-content: center;
        padding: 22px;
        text-align: center;
    }

    #order-standard_cart .products .product div.product-pricing {
        flex: 0 0 auto;
        text-align: center;
    }

    #order-standard_cart .products .product div.product-pricing span.price {
        font-size: 1.8em;
    }

    #order-standard_cart .products .product .btn-order-now {
        display: block;
        padding: 12px 20px;
        width: 100%;
    }

    /* The lift reads wrong on a full-width row -- it shifts the whole page rhythm. Depth only. */
    #order-standard_cart .products .product:hover {
        transform: none;
    }
}

/* ================================================= product group tabs

   Markup from includes/group-tabs.tpl, built off the same $secondarySidebar menu that fed the
   Categories panel -- which is hidden here rather than deleted from the template, so WHMCS keeps
   owning the group list and the mobile select still has something to bind to. */

#order-standard_cart [menuItemName="Categories"] {
    display: none;
}

#order-standard_cart .ha-group-tabs {
    display: flex;
    gap: 8px;
    margin: 0 0 24px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}

#order-standard_cart .ha-group-tab {
    align-items: center;
    background: var(--hac-surface);
    border: 1px solid var(--hac-line);
    border-radius: 999px;
    color: var(--hac-copy);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 600;
    gap: 8px;
    padding: 10px 18px;
    transition: background var(--hac-base) var(--hac-ease), border-color var(--hac-base) var(--hac-ease), color var(--hac-base) var(--hac-ease);
    white-space: nowrap;
}

#order-standard_cart .ha-group-tab:hover {
    background: var(--hac-surface-soft);
    border-color: color-mix(in srgb, var(--hac-action) 38%, var(--hac-line));
    color: var(--hac-ink);
    text-decoration: none;
}

#order-standard_cart .ha-group-tab.is-current {
    background: var(--hac-grad);
    border-color: transparent;
    box-shadow: 0 8px 20px color-mix(in srgb, var(--hac-action) 24%, transparent);
    color: #fff;
}

#order-standard_cart .ha-group-tab i {
    opacity: .7;
}

#order-standard_cart .ha-group-tab.is-current i {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    #order-standard_cart .ha-group-tab {
        transition: none;
    }
}

/* The sidebar's two panels are both rendered in the bar above the content now, so the column is
   hidden and the body takes the full width.

   .sidebar-collapsed has to go with it. WHMCS renders a second, "collapsed" copy of the same panels
   for small screens; Bootstrap marks it d-md-none but the premium theme puts display:flex on
   .panel, which wins -- so hiding only .cart-sidebar left that duplicate standing at full width
   across the top of every cart page. Verified on a clean load at 1147px before this rule, and it
   needs !important for the same reason. The .row is display:grid under the premium theme --
   the same thing that defeated flex-basis on the package columns -- so the column count is what
   has to change, not the child widths. */

#order-standard_cart .cart-sidebar,
#order-standard_cart .sidebar-collapsed {
    display: none !important;
}

/* The cart rows are display:grid on some pages and display:flex on others -- products.tpl renders
   a grid, viewcart.tpl a flex row -- so both axes have to be handled. Zeroing Bootstrap's negative
   side margins keeps the row exactly as wide as the cart, which is what stopped .cart-body
   overhanging by 30px. */
#order-standard_cart .row:has(> .cart-sidebar) {
    grid-template-columns: 1fr;
    margin-left: 0;
    margin-right: 0;
}

/* Forcing width:100% here made .cart-body 30px wider than the cart itself, because Bootstrap's
   .row carries negative side margins. With the grid down to one column the child fills it on its
   own, so only the cap is needed. */
#order-standard_cart .cart-body {
    flex: 1 1 auto;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

#order-standard_cart .ha-navbar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    justify-content: space-between;
    margin-bottom: 24px;
}

#order-standard_cart .ha-navbar .ha-group-tabs {
    margin-bottom: 0;
}

#order-standard_cart .ha-quick-actions {
    display: flex;
    flex: 0 0 auto;
    gap: 18px;
}

/* Deliberately quieter than the group tabs: these are escape hatches, not the main path. */
#order-standard_cart .ha-quick-action {
    align-items: center;
    color: var(--hac-muted);
    display: inline-flex;
    font-size: 13px;
    font-weight: 600;
    gap: 7px;
    transition: color var(--hac-base) var(--hac-ease);
    white-space: nowrap;
}

#order-standard_cart .ha-quick-action:hover {
    color: var(--hac-accent-text);
    text-decoration: none;
}

@media (max-width: 767px) {
    #order-standard_cart .ha-quick-actions {
        gap: 14px;
        overflow-x: auto;
        width: 100%;
    }
}

/* Without the sidebar the row runs to ~1700px on a wide monitor, which leaves a three-line spec
   list stranded against a lot of white. The extra width goes to the spec columns rather than to
   empty space. */
@media (min-width: 1400px) {
    #order-standard_cart .products .product div.product-desc ul {
        columns: 3;
    }

    #order-standard_cart .products .product {
        grid-template-columns: minmax(0, 1fr) 330px;
    }
}

/* ================================================ checkout: two columns + gateways

   The recap moves out of the top of the page into a sticky right-hand column, so what the buyer is
   paying for stays on screen through the whole form. Below 992px it stacks and is pulled back above
   the form -- underneath the pay button it would be pointless. */

@media (min-width: 992px) {
    #order-standard_cart .ha-checkout-grid {
        align-items: start;
        display: grid;
        gap: 24px;
        grid-template-columns: minmax(0, 1fr) 380px;
    }

    #order-standard_cart .ha-checkout-aside {
        position: sticky;
        top: 24px;
    }
}

@media (max-width: 991px) {
    #order-standard_cart .ha-checkout-grid {
        display: flex;
        flex-direction: column;
    }

    #order-standard_cart .ha-checkout-aside {
        order: -1;
    }
}

#order-standard_cart .ha-checkout-aside .ha-recap {
    margin-bottom: 0;
}

/* With the form in a column of its own the panel padding can come down a little. */
#order-standard_cart .ha-checkout-grid #frmCheckout {
    padding: 8px 24px 24px;
}

#order-standard_cart #paymentGatewaysContainer .text-center {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    text-align: left;
}

#order-standard_cart .ha-gateway {
    align-items: center;
    background: var(--hac-surface);
    border: 1px solid var(--hac-line);
    border-radius: 12px;
    cursor: pointer;
    display: flex;
    font-weight: 500;
    gap: 11px;
    margin: 0;
    padding: 13px 15px;
    transition: background var(--hac-base) var(--hac-ease), border-color var(--hac-base) var(--hac-ease), box-shadow var(--hac-base) var(--hac-ease);
}

#order-standard_cart .ha-gateway:hover {
    border-color: color-mix(in srgb, var(--hac-action) 36%, var(--hac-line));
}

#order-standard_cart .ha-gateway:has(input:checked),
#order-standard_cart .ha-gateway:has(.checked) {
    background: color-mix(in srgb, var(--hac-action) 7%, var(--hac-surface));
    border-color: color-mix(in srgb, var(--hac-action) 46%, var(--hac-line));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--hac-action) 30%, transparent);
}

#order-standard_cart .ha-gateway-icon {
    color: var(--hac-muted);
    font-size: 19px;
    text-align: center;
    width: 24px;
}

#order-standard_cart .ha-gateway:has(input:checked) .ha-gateway-icon {
    color: var(--hac-accent-text);
}

#order-standard_cart .ha-gateway-name {
    color: var(--hac-ink);
    font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
    #order-standard_cart .ha-gateway {
        transition: none;
    }
}

/* ================================================================ addon rows

   addons.tpl nests everything inside a <form>, so .product has exactly one child. The horizontal
   package grid therefore put that form in the first cell and left the 290px price column empty --
   which is the blank band that ran down the right of this page. The grid moves onto the form.

   Seventeen addons on one page is a lot to read, so the row is tuned for scanning: copy on the
   left, and everything needed to buy -- which service to attach it to, the price, the button --
   collected in one column on the right. */

#order-standard_cart .products .product:has(> form) {
    display: block;
}

/* The form carries Bootstrap's .form-inline, and display:flex on it survives even a
   `display: grid !important` override from a more specific selector -- tested in the page, where
   grid-template-columns from that very rule applied while display stayed flex. So the row is built
   with flex rather than fighting for the display value. */
/* The heavy hand here is measured, not habitual. Tested in the live page: on this form the
   flex-basis rule lands on .product-desc but not on footer.col-12, and only an html body-prefixed
   !important moves it -- the same stack also holds display:flex on the form against a
   `display: grid !important` from a more specific selector. Rather than keep guessing at which
   layer wins, these four declarations are forced, and nothing else on the page is. */
@media (min-width: 768px) {
    /* The form computes to flex-direction: column, flex-wrap: nowrap. That is the whole story
       behind the empty boxes seen earlier: on the column axis `flex: 0 0 100%` on the header sets
       its HEIGHT to the full container, not its width, so each addon grew a 416px blank band. The
       direction has to be forced along with everything else on this form. */
    html body #order-standard_cart .products .product > form {
        align-items: stretch !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }

    html body #order-standard_cart .products .product > form > header {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    html body #order-standard_cart .products .product > form > .product-desc {
        flex: 1 1 0 !important;
        max-width: none !important;
        min-width: 0 !important;
        width: auto !important;
    }

    html body #order-standard_cart .products .product > form > footer {
        flex: 0 0 320px !important;
        max-width: 320px !important;
        width: 320px !important;
    }

    /* Stock puts a .clearfix between the copy and the footer; left in the flex line it takes a slot
       of its own and wraps the footer onto the next row. */
    html body #order-standard_cart .products .product > form > .clearfix {
        display: none !important;
    }
}

#order-standard_cart .products .product > form > .product-desc.product-desc-full-width {
    padding: 20px 24px;
}

#order-standard_cart .products .product > form > .product-desc p {
    margin-bottom: 0;
}

#order-standard_cart .products .product > form > footer {
    align-items: stretch;
    background: var(--hac-surface-soft);
    border-left: 1px solid var(--hac-line);
    border-top: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
    justify-content: center;
    padding: 22px;
    text-align: center;
}

#order-standard_cart .ha-addon-target {
    margin: 0;
    text-align: left;
}

#order-standard_cart .ha-addon-target label {
    color: var(--hac-muted);
    display: block;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .05em;
    margin-bottom: 6px;
    text-transform: uppercase;
}

#order-standard_cart .ha-addon-target select {
    width: 100%;
}

#order-standard_cart .products .product > form > footer .product-pricing {
    background: transparent;
    border-top: 0;
    padding: 0;
    text-align: center;
}

#order-standard_cart .products .product > form > footer .price {
    display: block;
    font-size: 1.5em;
    line-height: 1.2;
}

#order-standard_cart .products .product > form > footer .btn {
    display: block;
    padding: 12px 20px;
    width: 100%;
}

@media (max-width: 767px) {
    #order-standard_cart .products .product > form > footer {
        border-left: 0;
        border-top: 1px solid var(--hac-line);
    }
}

/* ======================================================= configure step layout

   Measured on the Intel Dual Core page: 14 option groups, 80 option tiles, 5988px of page. At
   54px per tile the options alone are ~4300px, so the height comes from tile size and column
   count, not from spacing. Three things address it: a narrower summary column (it had grown to
   582px once the sidebar was removed, starving the options), tighter tiles, and a third column on
   wide screens.

   The groups are laid out with CSS columns rather than a grid: they vary from two options to
   fourteen, and column flow packs ragged heights tightly where a grid would leave every row as
   tall as its tallest card. */

@media (min-width: 992px) {
    #order-standard_cart .secondary-cart-sidebar {
        flex: 0 0 380px;
        max-width: 380px;
    }
}

#order-standard_cart .secondary-cart-body {
    flex: 1 1 auto;
    min-width: 0;
}

/* configureproduct.tpl closes and reopens .row every two options, so there are seven rows of two
   rather than one row of fourteen -- measured, after a `columns: 3` on .row produced two cards in
   a 3-column box. The multicol therefore belongs on the container, with the row wrappers taken out
   of the layout via display: contents so the cards flow as one sequence. */
@media (min-width: 1200px) {
    #order-standard_cart #productConfigurableOptions {
        column-gap: 20px;
        columns: 3;
    }

    #order-standard_cart #productConfigurableOptions > .row {
        display: contents;
    }

    #order-standard_cart #productConfigurableOptions [class*="col-"] {
        break-inside: avoid;
        display: block;
        flex: none;
        float: none;
        max-width: 100%;
        width: 100%;
    }
}

/* Each option set becomes a card, so 14 groups read as 14 things rather than one wall. */
#order-standard_cart #productConfigurableOptions [class*="col-"] > .form-group {
    background: var(--hac-surface);
    border: 1px solid var(--hac-line);
    border-radius: var(--hac-radius);
    box-shadow: var(--hac-shadow-xs);
    margin-bottom: 18px;
    padding: 16px 16px 10px;
}

#order-standard_cart #productConfigurableOptions .form-group > label[for] {
    border-bottom: 1px solid var(--hac-line);
    margin-bottom: 12px;
    padding-bottom: 10px;
}

/* 46px + 8px margin over 80 tiles was most of the page height. */
#order-standard_cart #productConfigurableOptions label:not([for]) {
    margin-bottom: 6px;
    padding: 8px 12px;
}

#order-standard_cart #productConfigurableOptions label:not([for]):last-child {
    margin-bottom: 0;
}

/* ================================================== OS logos on option tiles

   The tiles carry data-opt with the option name (set in configureproduct.tpl), so the logo is
   chosen by matching that name case-insensitively. Codepoints were read out of the loaded font
   rather than looked up: this install serves FontAwesome 5 Brands, where fa-debian does not exist
   at all -- Debian and Archlinux therefore fall back to the generic Tux, which is accurate enough
   and better than an empty box.

   Matching is deliberately loose: "cPanel (CentOS)" and "Virtualizor (Linux)" pick up their OS
   logo too, which tells the buyer what the panel runs on. */

#order-standard_cart #productConfigurableOptions label[data-opt]::before {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    color: var(--hac-muted);
    display: none;
    flex: 0 0 auto;
    font-family: "Font Awesome 5 Brands";
    font-size: 17px;
    font-style: normal;
    font-variant: normal;
    font-weight: 400;
    line-height: 1;
    /* A ::before is the first flex item, which put the logo between nothing and the radio and read
       as clutter. Pushed to the trailing edge instead, where it works as a badge. */
    margin-left: auto;
    order: 1;
    text-align: right;
    text-rendering: auto;
    width: 20px;
}

#order-standard_cart #productConfigurableOptions label[data-opt*="linux" i]::before,
#order-standard_cart #productConfigurableOptions label[data-opt*="debian" i]::before {
    content: "\f17c";
    display: inline-block;
}

#order-standard_cart #productConfigurableOptions label[data-opt*="centos" i]::before {
    content: "\f789";
    display: inline-block;
}

#order-standard_cart #productConfigurableOptions label[data-opt*="ubuntu" i]::before {
    content: "\f7df";
    display: inline-block;
}

#order-standard_cart #productConfigurableOptions label[data-opt*="suse" i]::before {
    content: "\f7d6";
    display: inline-block;
}

#order-standard_cart #productConfigurableOptions label[data-opt*="fedora" i]::before {
    content: "\f798";
    display: inline-block;
}

#order-standard_cart #productConfigurableOptions label[data-opt*="red hat" i]::before,
#order-standard_cart #productConfigurableOptions label[data-opt*="redhat" i]::before {
    content: "\f7bc";
    display: inline-block;
}

#order-standard_cart #productConfigurableOptions label[data-opt*="freebsd" i]::before {
    content: "\f3a4";
    display: inline-block;
}

/* Last, so "Windows Server ..." wins over any looser match above. */
#order-standard_cart #productConfigurableOptions label[data-opt*="windows" i]::before {
    content: "\f17a";
    display: inline-block;
}

#order-standard_cart #productConfigurableOptions label[data-opt]:has(input:checked)::before,
#order-standard_cart #productConfigurableOptions label[data-opt]:has(.checked)::before {
    color: var(--hac-accent-text);
}

/* ============================================ custom select for long option lists

   Built by js/configure-options.js. The original radio tiles stay in the DOM and are hidden here
   rather than removed, so the form still submits what WHMCS expects and iCheck keeps working --
   the dropdown only drives them. Groups under five options keep their tiles: at that size a list
   is faster to scan than a control you have to open. */

/* Needs the #productConfigurableOptions id: the tile rule above is (2,0,1) because it is written
   with both ids, so a (1,2,1) selector loses and the tiles stayed visible under the dropdown. */
#order-standard_cart #productConfigurableOptions .ha-select-active label[data-opt] {
    display: none;
}

/* The template prints a <br> before every option. Hiding the labels left those behind as a stack
   of blank lines, which pushed the trigger to the bottom of an otherwise empty card. */
#order-standard_cart #productConfigurableOptions .ha-select-active br {
    display: none;
}

#order-standard_cart .ha-select {
    position: relative;
}

#order-standard_cart .ha-select-trigger {
    align-items: center;
    background: var(--hac-surface);
    border: 1px solid var(--hac-line);
    border-radius: 12px;
    color: var(--hac-ink);
    cursor: pointer;
    display: flex;
    font-size: 13px;
    font-weight: 600;
    gap: 10px;
    min-height: var(--hac-control-h);
    padding: 9px 13px;
    text-align: left;
    transition: border-color var(--hac-base) var(--hac-ease), box-shadow var(--hac-base) var(--hac-ease);
    width: 100%;
}

#order-standard_cart .ha-select-trigger:hover {
    border-color: color-mix(in srgb, var(--hac-action) 38%, var(--hac-line));
}

#order-standard_cart .ha-select.is-open .ha-select-trigger {
    border-color: var(--hac-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hac-focus) 16%, transparent);
}

#order-standard_cart .ha-select-trigger:focus-visible {
    outline: 2px solid var(--hac-focus);
    outline-offset: 2px;
}

#order-standard_cart .ha-select-current {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#order-standard_cart .ha-select-price {
    color: var(--hac-accent-text);
    flex: 0 0 auto;
    font-weight: 650;
}

#order-standard_cart .ha-select-caret {
    color: var(--hac-muted);
    flex: 0 0 auto;
    font-size: 11px;
    transition: transform var(--hac-base) var(--hac-ease);
}

#order-standard_cart .ha-select.is-open .ha-select-caret {
    transform: rotate(180deg);
}

#order-standard_cart .ha-select-menu {
    background: var(--hac-surface);
    border: 1px solid var(--hac-line);
    border-radius: 14px;
    box-shadow: var(--hac-shadow-lg);
    display: none;
    left: 0;
    max-height: 320px;
    overflow-y: auto;
    padding: 6px;
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    z-index: 30;
}

#order-standard_cart .ha-select.is-open .ha-select-menu {
    display: block;
}

#order-standard_cart .ha-select-option {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 9px;
    color: var(--hac-copy);
    cursor: pointer;
    display: flex;
    font-size: 13px;
    gap: 12px;
    padding: 9px 11px;
    text-align: left;
    transition: background var(--hac-base) var(--hac-ease), color var(--hac-base) var(--hac-ease);
    width: 100%;
}

#order-standard_cart .ha-select-option:hover,
#order-standard_cart .ha-select-option:focus-visible {
    background: var(--hac-surface-soft);
    color: var(--hac-ink);
    outline: none;
}

#order-standard_cart .ha-select-option.is-selected {
    background: color-mix(in srgb, var(--hac-action) 10%, var(--hac-surface));
    color: var(--hac-ink);
    font-weight: 650;
}

#order-standard_cart .ha-select-option-name {
    flex: 1 1 auto;
    min-width: 0;
}

#order-standard_cart .ha-select-option-price {
    color: var(--hac-muted);
    flex: 0 0 auto;
    font-weight: 600;
}

#order-standard_cart .ha-select-option.is-selected .ha-select-option-price {
    color: var(--hac-accent-text);
}

/* A group that became a dropdown no longer needs the tall card padding. */
#order-standard_cart .ha-select-active {
    padding-bottom: 16px;
}

@media (prefers-reduced-motion: reduce) {
    #order-standard_cart .ha-select-trigger,
    #order-standard_cart .ha-select-caret,
    #order-standard_cart .ha-select-option {
        transition: none;
    }
}

/* ============================================== OS family tiles + deploy bar

   The DigitalOcean/Vultr shape: pick the OS as a logo tile, pick the version in a small dropdown
   beside it, and keep the running price and primary action pinned to the bottom of the screen.
   Built by js/configure-options.js; the original radios stay in the DOM and are hidden. */

#order-standard_cart .ha-os-tiles {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(122px, 1fr));
    margin-bottom: 14px;
}

#order-standard_cart .ha-os-tile {
    align-items: center;
    background: var(--hac-surface);
    border: 1px solid var(--hac-line);
    border-radius: var(--hac-radius);
    color: var(--hac-copy);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 10px 13px;
    transition: border-color var(--hac-base) var(--hac-ease), box-shadow var(--hac-base) var(--hac-ease), transform var(--hac-base) var(--hac-ease);
}

#order-standard_cart .ha-os-tile:hover {
    border-color: color-mix(in srgb, var(--hac-action) 38%, var(--hac-line));
    transform: translateY(var(--hac-lift));
}

#order-standard_cart .ha-os-tile.is-selected {
    background: color-mix(in srgb, var(--hac-action) 7%, var(--hac-surface));
    border-color: color-mix(in srgb, var(--hac-action) 50%, var(--hac-line));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--hac-action) 32%, transparent);
}

#order-standard_cart .ha-os-tile-icon {
    color: var(--hac-muted);
    font-size: 26px;
    line-height: 1;
    transition: color var(--hac-base) var(--hac-ease);
}

#order-standard_cart .ha-os-tile.is-selected .ha-os-tile-icon {
    color: var(--hac-accent-text);
}

#order-standard_cart .ha-os-tile-name {
    color: var(--hac-ink);
    font-size: 13px;
    font-weight: 650;
}

#order-standard_cart .ha-os-tile-count {
    color: var(--hac-muted);
    font-size: 11px;
}

#order-standard_cart .ha-os-versions.is-hidden {
    display: none;
}

/* ---------------------------------------------------------------- deploy bar */

.ha-deploybar {
    backdrop-filter: blur(10px);
    background: color-mix(in srgb, var(--ha3-surface-solid, #fff) 92%, transparent);
    border-top: 1px solid var(--ha3-line, rgba(106, 125, 156, .14));
    bottom: 0;
    box-shadow: 0 -12px 40px rgba(16, 31, 57, .12);
    left: 0;
    position: fixed;
    right: 0;
    z-index: 900;
}

html[data-ha-theme="dark"] .ha-deploybar {
    background: color-mix(in srgb, var(--ha3-surface-solid, #0f1c30) 92%, transparent);
    box-shadow: 0 -12px 40px rgba(0, 0, 0, .45);
}

.ha-deploybar-inner {
    align-items: center;
    display: flex;
    gap: 18px;
    margin: 0 auto;
    max-width: 1720px;
    padding: 12px 24px;
}

.ha-deploybar-meta {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.ha-deploybar-name {
    color: var(--ha3-ink, #101b2f);
    font-weight: 650;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ha-deploybar-note {
    color: var(--ha3-muted, #65718a);
    font-size: 12px;
}

.ha-deploybar-price {
    color: var(--ha3-ink, #101b2f);
    flex: 0 0 auto;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -.02em;
}



/* Keep the bar from covering the footer and the form's own Continue button. */
body.ha-has-deploybar {
    padding-bottom: 84px;
}

@media (max-width: 575px) {
    .ha-deploybar-inner {
        gap: 12px;
        padding: 10px 14px;
    }

    .ha-deploybar-price {
        font-size: 18px;
    }

}

@media (prefers-reduced-motion: reduce) {
    #order-standard_cart .ha-os-tile {
        transition: none;
    }

    #order-standard_cart .ha-os-tile:hover {
        transform: none;
    }
}

/* ================================= configure step: rhythm above the options

   Measured on the page: the blocks above Configurable Options are all 1338px wide and share an
   x-origin, so the scattered feel was not misalignment of the blocks themselves. It came from what
   is inside them -- a bare grey box for the spec list, a narrow select stranded at the left for the
   billing cycle -- and from the premium theme centring the hostname card at max-width 840px with a
   249px side margin, which visually broke the column. Plus uneven gaps: 20px, 30px, 30px, 34px. */

#order-standard_cart .secondary-cart-body > .product-info,
#order-standard_cart .secondary-cart-body > .field-container {
    margin-bottom: 20px;
}

#order-standard_cart .secondary-cart-body > .sub-heading {
    margin-top: 28px;
}

/* The spec list was an unstyled grey block; same card treatment as everything else. */
#order-standard_cart .product-info {
    background: var(--hac-surface);
    border: 1px solid var(--hac-line);
    border-radius: var(--hac-radius-lg);
    box-shadow: var(--hac-shadow-xs);
    padding: 20px 24px;
}

#order-standard_cart .product-info .product-title {
    color: var(--hac-ink);
    font-size: 19px;
    font-weight: 650;
    letter-spacing: -.01em;
    margin-bottom: 8px;
}

#order-standard_cart .product-info p:last-child {
    color: var(--hac-copy);
    margin-bottom: 0;
}

/* premium-v3.js builds this card and pins it to 840px centred, which is what pushed it out of the
   column. It is two elements, not one -- .ha-v3-server-identity-head carries the same max-width and
   249px side margin as the row, so fixing only the row left the header inset. Prefix match covers
   both. */
#order-standard_cart [class*="ha-v3-server-identity"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
}

#order-standard_cart .ha-v3-server-identity > [class*="col-"] {
    flex: 0 0 100%;
    max-width: 100%;
}

/* ------------------------------------------------------------- billing cycle */

#order-standard_cart .ha-cycle-active > label,
#order-standard_cart .secondary-cart-body .field-container > .form-group > label {
    color: var(--hac-muted);
    display: block;
    font-size: 12px;
    font-weight: 650;
    letter-spacing: .05em;
    margin-bottom: 12px;
    text-transform: uppercase;
}

/* The select is driven, not replaced: it carries the inline onchange WHMCS relies on. */
#order-standard_cart .ha-cycle-active select,
#order-standard_cart .ha-cycle-active br {
    display: none;
}

#order-standard_cart .ha-cycle-tiles {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    max-width: 840px;
}

#order-standard_cart .ha-cycle-tile {
    align-items: center;
    background: var(--hac-surface);
    border: 1px solid var(--hac-line);
    border-radius: var(--hac-radius);
    box-shadow: var(--hac-shadow-xs);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px 16px 18px;
    position: relative;
    transition: border-color var(--hac-base) var(--hac-ease), box-shadow var(--hac-base) var(--hac-ease), transform var(--hac-base) var(--hac-ease);
}

#order-standard_cart .ha-cycle-tile:hover {
    border-color: color-mix(in srgb, var(--hac-action) 38%, var(--hac-line));
    transform: translateY(var(--hac-lift));
}

#order-standard_cart .ha-cycle-tile.is-selected {
    background: color-mix(in srgb, var(--hac-action) 7%, var(--hac-surface));
    border-color: color-mix(in srgb, var(--hac-action) 50%, var(--hac-line));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--hac-action) 32%, transparent);
}

#order-standard_cart .ha-cycle-icon {
    color: var(--hac-muted);
    font-size: 22px;
    margin-bottom: 4px;
    transition: color var(--hac-base) var(--hac-ease);
}

#order-standard_cart .ha-cycle-tile.is-selected .ha-cycle-icon {
    color: var(--hac-accent-text);
}

#order-standard_cart .ha-cycle-price {
    color: var(--hac-ink);
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -.02em;
}

#order-standard_cart .ha-cycle-term {
    color: var(--hac-muted);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .06em;
    text-transform: uppercase;
}

#order-standard_cart .ha-cycle-saving {
    background: var(--hac-success);
    border-radius: 999px;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .03em;
    padding: 3px 9px;
    position: absolute;
    right: 10px;
    top: 10px;
}

@media (prefers-reduced-motion: reduce) {
    #order-standard_cart .ha-cycle-tile {
        transition: none;
    }

    #order-standard_cart .ha-cycle-tile:hover {
        transform: none;
    }
}

/* ============================================ colour polish, measured not eyeballed

   The same 135deg accent gradient was painted by seventeen rules -- card headers, buttons,
   tabs, badges, chips, the sidebar's active row, the spotlight price bar. Used that widely an
   accent stops reading as emphasis. It now lives in --hac-grad and is reserved for the moments
   that should carry it: the primary call to action, the card and summary headers, and the step
   markers. Everything below is demoted to the flat accent, which reads calmer and lets the
   gradient mean something.

   A contrast audit over the same surfaces found nothing to fix: every text pair measures between
   4.9:1 and 9.3:1 against its real background, so the palette already clears AA. */

#order-standard_cart .ha-group-tab.is-current,
#order-standard_cart .badge-secondary.badge-success,
#order-standard_cart .badge-success,
#order-standard_cart .panel-sidebar .list-group-item.active,
#order-standard_cart .list-group-item.active,
#order-standard_cart .list-group-item-action.active,
#order-standard_cart .btn-add-to-cart {
    background: var(--hac-action);
}

#order-standard_cart .btn-add-to-cart:hover,
#order-standard_cart .btn-add-to-cart:focus {
    background: var(--hac-action-hover);
}


/* One genuine miss, measured against the selected tile's own tint rather than the page: the cycle
   term is 11px uppercase at 4.44:1, just under AA. Everything else on these surfaces sits between
   4.66:1 and 9.3:1 and is left alone. */
#order-standard_cart .ha-cycle-term {
    color: var(--ha3-copy, #53627a);
}

/* ======================================================= domain choice cards

   Stock renders three flat white bars with a radio each, and hangs the search control off
   Bootstrap offsets so it sits indented with dead space to its right. The rows become proper
   selectable cards, and the search becomes one joined control.

   Icons are keyed off the radio's id with :has(), and their codepoints were read out of the loaded
   FontAwesome 5 rather than looked up. The icon trails the label rather than leading it: a ::before
   would land in front of the radio, and reordering cannot place it between the radio and a bare
   text node. */

#order-standard_cart .domain-selection-options .option {
    background: var(--hac-surface);
    border: 1px solid var(--hac-line);
    border-radius: var(--hac-radius);
    box-shadow: var(--hac-shadow-xs);
    margin-bottom: 12px;
    overflow: hidden;
    padding: 0;
    transition: border-color var(--hac-base) var(--hac-ease), box-shadow var(--hac-base) var(--hac-ease);
}

#order-standard_cart .domain-selection-options .option:hover {
    border-color: color-mix(in srgb, var(--hac-action) 34%, var(--hac-line));
}

/* Stock paints the selected row #efefef; this wins on weight and uses the accent tint instead. */
#order-standard_cart .domain-selection-options .option:has(input:checked),
#order-standard_cart .domain-selection-options .option:has(.checked),
#order-standard_cart .domain-selection-options .option.option-selected {
    background: color-mix(in srgb, var(--hac-action) 6%, var(--hac-surface));
    border-color: color-mix(in srgb, var(--hac-action) 46%, var(--hac-line));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--hac-action) 28%, transparent);
}

#order-standard_cart .domain-selection-options .option > label {
    align-items: center;
    color: var(--hac-ink);
    cursor: pointer;
    display: flex;
    font-weight: 600;
    gap: 12px;
    margin: 0;
    padding: 16px 18px;
    width: 100%;
}

#order-standard_cart .domain-selection-options .option.option-selected > label,
#order-standard_cart .domain-selection-options .option:has(input:checked) > label {
    font-weight: 650;
}

#order-standard_cart .domain-selection-options .option > label::after {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    color: var(--hac-muted);
    /* This install serves FontAwesome 5 *Pro* -- the loaded faces are Pro 300/400/900, Brands and
       Duotone, with no "Free" family at all, so naming Free rendered tofu boxes. Both names are
       listed so the icons survive a licence change either way. */
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free";
    font-size: 17px;
    font-style: normal;
    font-weight: 900;
    margin-left: auto;
}

#order-standard_cart .domain-selection-options .option:has(input:checked) > label::after {
    color: var(--hac-accent-text);
}

#order-standard_cart .domain-selection-options .option:has(#selregister) > label::after {
    content: "\f0ac";
}

#order-standard_cart .domain-selection-options .option:has(#seltransfer) > label::after {
    content: "\f362";
}

#order-standard_cart .domain-selection-options .option:has(#selowndomain) > label::after {
    content: "\f233";
}

#order-standard_cart .domain-selection-options .option:has(#selincart) > label::after {
    content: "\f07a";
}

#order-standard_cart .domain-selection-options .option:has(#selsubdomain) > label::after {
    content: "\f0e8";
}

/* ------------------------------------------------------- the search control */

#order-standard_cart .domain-input-group {
    border-top: 1px solid var(--hac-line);
    margin: 0;
    padding: 16px 18px;
}

#order-standard_cart .domain-input-group > .row {
    align-items: stretch;
    display: flex;
    gap: 10px;
    margin: 0;
}

/* Bootstrap offsets indented the control and left dead space beside it.

   width:auto is the load-bearing declaration here, not flex. Measured in the page: flex-basis was
   already auto and the columns still took the full row, because Bootstrap sets width:100% on them
   -- with an auto basis the width wins and every field wraps onto its own line. */
#order-standard_cart .domain-input-group > .row > [class*="col-"] {
    flex: 1 1 auto;
    margin-left: 0;
    max-width: none;
    padding: 0;
    width: auto;
}

#order-standard_cart .domain-input-group > .row > .col-sm-2 {
    flex: 0 0 auto;
    width: auto;
}

#order-standard_cart .domains-row {
    display: flex;
    gap: 0;
    margin: 0;
}

#order-standard_cart .domains-row > [class*="col-"] {
    flex: none;
    max-width: none;
    padding: 0;
    width: auto;
}

#order-standard_cart .domains-row > .col-xs-9 {
    flex: 1 1 auto;
    min-width: 0;
}

#order-standard_cart .domains-row > .col-xs-3 {
    flex: 0 0 138px;
    width: 138px;
}

/* www. | name | .com read as one field instead of three boxes. */
#order-standard_cart .domain-input-group .input-group {
    display: flex;
    width: 100%;
}

#order-standard_cart .domain-input-group .input-group-text {
    background: var(--hac-surface-soft);
    border: 1px solid var(--hac-line);
    border-radius: 12px 0 0 12px;
    border-right: 0;
    color: var(--hac-muted);
    display: flex;
    align-items: center;
    padding: 0 14px;
}

#order-standard_cart .domain-input-group .input-group .form-control {
    border-radius: 0;
    flex: 1 1 auto;
    min-width: 0;
}

#order-standard_cart .domains-row > .col-xs-3 select.form-control {
    border-left: 0;
    border-radius: 0 12px 12px 0;
}

#order-standard_cart .domain-input-group .btn {
    border-radius: 12px;
    padding: 0 30px;
    white-space: nowrap;
}

@media (max-width: 767px) {
    #order-standard_cart .domain-input-group > .row {
        flex-wrap: wrap;
    }

    #order-standard_cart .domain-input-group > .row > .col-sm-2 {
        flex: 1 1 100%;
    }

    #order-standard_cart .domain-input-group .btn {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    #order-standard_cart .domain-selection-options .option {
        transition: none;
    }
}

/* ================================================================ motion system

   The audit that prompted this: 36 hover rules, four different durations, three different lift
   distances -- and not a single :active rule anywhere. Hover alone reads as "this is a link";
   what makes a control feel physical is the press. That is the main thing added here.

   Everything is expressed through the tokens above, so the whole flow can be retimed from one
   place, and the whole system is switched off under prefers-reduced-motion at the end. */

/* ------------------------------------------------------------ press feedback */

#order-standard_cart .btn:active,
#order-standard_cart .ha-os-tile:active,
#order-standard_cart .ha-cycle-tile:active,
#order-standard_cart .ha-group-tab:active,
#order-standard_cart .ha-select-trigger:active,
#order-standard_cart .ha-select-option:active,
#order-standard_cart .ha-gateway:active,
#order-standard_cart .domain-selection-options .option > label:active,
#order-standard_cart #productConfigurableOptions label:not([for]):active,
#order-standard_cart .ha-select-option:active {
    transform: translateY(0) scale(.985);
    transition-duration: var(--hac-fast);
}

/* The big cards settle rather than shrink -- scaling a full-width row reads as a glitch. */
#order-standard_cart .products .product:active,
#order-standard_cart .featured-tld:active,
#order-standard_cart .spotlight-tld:active {
    transform: translateY(0);
    transition-duration: var(--hac-fast);
}

/* ------------------------------------------------------- consistent hover lift */

#order-standard_cart .ha-os-tile,
#order-standard_cart .ha-cycle-tile,
#order-standard_cart .ha-gateway,
#order-standard_cart .domain-selection-options .option,
#order-standard_cart .account,
#order-standard_cart .panel-addon {
    will-change: transform;
}

#order-standard_cart .ha-gateway:hover,
#order-standard_cart .domain-selection-options .option:hover {
    transform: translateY(var(--hac-lift));
}

/* ---------------------------------------------------------- dropdown entrance */

/* Animated on open rather than transitioned from a hidden state. Transitioning opacity out of
   visibility:hidden left the computed opacity stuck at 0 with the menu "open" -- measured in the
   page, rules all matching and visibility already visible. A keyframe on the display change is the
   dependable form. */
@keyframes ha-select-menu-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }
}

#order-standard_cart .ha-select.is-open .ha-select-menu {
    animation: ha-select-menu-in var(--hac-base) var(--hac-ease-entrance) both;
}

/* --------------------------------------------------------------- deploy bar */

.ha-deploybar {
    animation: ha-deploybar-in var(--ha-deploybar-in, 320ms) cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes ha-deploybar-in {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
}

/* -------------------------------------------------------------- focus rings */

#order-standard_cart .ha-os-tile:focus-visible,
#order-standard_cart .ha-cycle-tile:focus-visible,
#order-standard_cart .ha-group-tab:focus-visible,
#order-standard_cart .ha-select-trigger:focus-visible,
#order-standard_cart .ha-select-option:focus-visible,
#order-standard_cart .ha-gateway:focus-within,
#order-standard_cart .domain-selection-options .option:focus-within,
#order-standard_cart #productConfigurableOptions label:not([for]):focus-within{
    outline: 2px solid var(--hac-focus, #1f5fd0);
    outline-offset: 2px;
}

/* ------------------------------------------------------------ reduced motion

   One authoritative switch rather than the ten scattered blocks this file grew. */

@media (prefers-reduced-motion: reduce) {
    #order-standard_cart *,
    #order-standard_cart *::before,
    #order-standard_cart *::after,
    .ha-deploybar,
    .ha-deploybar * {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    #order-standard_cart *:hover,
    #order-standard_cart *:active {
        transform: none !important;
    }
}


/* ============================================ keep Continue with its summary

   The Continue button is a sibling *after* .summary-container, and only the summary was sticky --
   so once the summary pinned, the button carried on scrolling and ended up under the fixed price
   bar, cut in half. Measured: summary bottom 566, button top 586, bar top 559.

   The sticky element becomes the wrapper that holds both, capped so it can never reach under the
   bar (the bar publishes its own height, so the cap follows it). Inside that cap the itemised list
   scrolls and the button stays pinned to the bottom of the block -- the summary is the part you can
   afford to scroll, the call to action is not. */

@media (min-width: 992px) {
    #order-standard_cart .secondary-cart-sidebar > div:has(> .order-summary) {
        display: flex;
        flex-direction: column;
        max-height: calc(100vh - 24px - var(--ha-deploybar-space, 95px));
        position: sticky;
        top: 24px;
    }

    /* The wrapper is the sticky element now; two nested sticky boxes fight each other. */
    #order-standard_cart .secondary-cart-sidebar .summary-container {
        position: static;
    }

    #order-standard_cart .secondary-cart-sidebar > div:has(> .order-summary) > .order-summary {
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
    }

    #order-standard_cart .secondary-cart-sidebar .summary-container {
        min-height: 0;
        overflow-y: auto;
    }
}

/* ---------------------------------------------------------- the button itself */

#order-standard_cart #btnCompleteProductConfig {
    background: var(--hac-grad);
    border: 0;
    border-radius: 14px;
    box-shadow: 0 12px 30px color-mix(in srgb, var(--hac-action) 28%, transparent);
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -.01em;
    margin-top: 16px;
    padding: 15px 28px;
    width: 100%;
}

#order-standard_cart #btnCompleteProductConfig:hover,
#order-standard_cart #btnCompleteProductConfig:focus {
    background: var(--hac-grad-hover);
    box-shadow: 0 16px 38px color-mix(in srgb, var(--hac-action) 34%, transparent);
    color: #fff;
    transform: translateY(var(--hac-lift));
}

#order-standard_cart #btnCompleteProductConfig i {
    margin-left: 8px;
}

/* The price bar steps aside while the real Continue is on screen -- otherwise the two occupy the
   same corner and the bar wins, which is what cut the button in half. Kept in the layout so the
   page does not jump as it comes and goes. */
.ha-deploybar {
    transition: opacity var(--hac-base, 180ms) var(--hac-ease, ease),
                transform var(--hac-base, 180ms) var(--hac-ease, ease);
}

.ha-deploybar.is-yielded {
    opacity: 0;
    pointer-events: none;
    transform: translateY(100%);
}

/* ------------------------------------------------------------ summary folding

   Free options collapse behind a count. Measured on this product: 14 option lines, 11 of them
   $0.00, panel 530px and scrolling internally -- which put the prices a buyer wants to check
   behind a scrollbar. Folded, the priced lines and the total sit in view together. */

#order-standard_cart .summary-container .ha-summary-free {
    display: none;
}

#order-standard_cart .summary-container.ha-summary-expanded .ha-summary-free {
    display: block;
}

#order-standard_cart .ha-summary-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: var(--hac-muted);
    cursor: pointer;
    display: flex;
    font-size: 12px;
    font-weight: 600;
    gap: 7px;
    margin: 6px 0 2px;
    padding: 6px 0;
    transition: color var(--hac-base) var(--hac-ease);
    width: 100%;
}

#order-standard_cart .ha-summary-toggle:hover {
    color: var(--hac-accent-text);
}

#order-standard_cart .ha-summary-toggle i {
    font-size: 10px;
    transition: transform var(--hac-base) var(--hac-ease);
}

#order-standard_cart .summary-container.ha-summary-expanded .ha-summary-toggle i {
    transform: rotate(180deg);
}

/* ========================================================= checkout form

   Built by js/configure-options.js. Two things it addresses, both measured on the live page:
   every checkout field's label contains an icon and no text, so the field name existed only in the
   placeholder and vanished the moment the field was filled; and the whole form was one continuous
   run of inputs with only thin headings between the sections. */

#order-standard_cart .ha-fieldset {
    background: var(--hac-surface);
    border: 1px solid var(--hac-line);
    border-radius: var(--hac-radius-lg);
    box-shadow: var(--hac-shadow-xs);
    margin-bottom: 18px;
    padding: 4px 22px 20px;
}

#order-standard_cart .ha-fieldset > .sub-heading {
    margin-top: 20px;
}

#order-standard_cart .ha-field-label {
    color: var(--hac-muted);
    display: block;
    font-size: 11px;
    font-weight: 650;
    letter-spacing: .05em;
    margin-bottom: 6px;
    text-transform: uppercase;
}

/* With a label above it, the placeholder is duplicated text -- keep it as a quiet hint only. */
#order-standard_cart .ha-fieldset .form-control::placeholder {
    color: color-mix(in srgb, var(--hac-muted) 55%, transparent);
}

#order-standard_cart .ha-fieldset .form-group {
    margin-bottom: 18px;
}

#order-standard_cart .ha-fieldset .form-control:focus {
    border-color: var(--hac-focus);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hac-focus) 16%, transparent);
}

/* The icon sits against the input, so it must not shift when the label appears above. */
#order-standard_cart .ha-fieldset .prepend-icon .field-icon {
    pointer-events: none;
}

/* ------------------------------------------------- optional chips and errors */

#order-standard_cart .ha-field-label {
    align-items: center;
    display: flex;
    gap: 8px;
}

#order-standard_cart .ha-optional {
    background: var(--hac-surface-soft);
    border: 1px solid var(--hac-line);
    border-radius: 999px;
    color: var(--hac-muted);
    font-size: 9px;
    font-weight: 650;
    letter-spacing: .04em;
    padding: 2px 7px;
    text-transform: none;
}

/* The slots exist in stock markup but were never styled, so a validation message arrived as bare
   text with no relationship to the field it belongs to. */
#order-standard_cart .field-error-msg {
    align-items: center;
    color: var(--hac-danger-text);
    display: flex;
    font-size: 12px;
    font-weight: 600;
    gap: 6px;
    margin-top: 7px;
}

#order-standard_cart .field-error-msg::before {
    content: "\f06a";
    font-family: "Font Awesome 5 Pro", "Font Awesome 5 Free";
    font-size: 11px;
    font-weight: 900;
}

#order-standard_cart .form-group.has-error .form-control,
#order-standard_cart .form-group .form-control.is-invalid {
    border-color: color-mix(in srgb, var(--hac-danger) 55%, var(--hac-line));
}

#order-standard_cart .form-group.has-error .form-control:focus,
#order-standard_cart .form-group .form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--hac-danger) 16%, transparent);
}