.roamoz-hikacart {
    --ro-hikacart-size: 28px;
    --ro-hikacart-colour: #000;
    --ro-hikacart-hover: #f58220;
    --ro-hikacart-badge: #e60000;
    --ro-hikacart-badge-text: #fff;
    --ro-hikacart-checkout: #f58220;
    --ro-hikacart-checkout-hover: #d9680d;
    --ro-hikacart-checkout-text: #fff;

    display: inline-flex;
    align-items: center;
    gap: 12px;
    line-height: 1;
    vertical-align: middle;
}

.roamoz-hikacart__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(var(--ro-hikacart-size) * 1.19);
    height: var(--ro-hikacart-size);
    --ro-hikacart-current-colour: var(--ro-hikacart-colour);
    color: var(--ro-hikacart-current-colour) !important;
    text-decoration: none;
    transition: color 160ms ease, transform 160ms ease;
}

.roamoz-hikacart__link:hover,
.roamoz-hikacart__link:focus-visible {
    --ro-hikacart-current-colour: var(--ro-hikacart-hover);
    color: var(--ro-hikacart-current-colour) !important;
    text-decoration: none;
}

.roamoz-hikacart__link:hover {
    transform: translateY(-1px);
}

.roamoz-hikacart__link:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 4px;
    border-radius: 3px;
}

.roamoz-hikacart__icon {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
    color: var(--ro-hikacart-current-colour) !important;
    fill: var(--ro-hikacart-current-colour) !important;
}

.roamoz-hikacart__badge {
    position: absolute;
    top: -0.34em;
    right: -0.48em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.48em;
    height: 1.48em;
    padding: 0 0.3em;
    border: 2px solid currentColor;
    border-radius: 999px;
    background: var(--ro-hikacart-badge);
    color: var(--ro-hikacart-badge-text);
    font-family: Arial, Helvetica, sans-serif;
    font-size: max(10px, calc(var(--ro-hikacart-size) * 0.38));
    font-weight: 700;
    line-height: 1;
    box-sizing: border-box;
    transform: translate(15%, -8%);
}

.roamoz-hikacart__checkout {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 7px 14px;
    border: 1px solid transparent !important;
    border-radius: 4px;
    background: var(--ro-hikacart-checkout) !important;
    color: var(--ro-hikacart-checkout-text) !important;
    box-shadow: none;
    box-sizing: border-box;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.roamoz-hikacart__checkout:hover,
.roamoz-hikacart__checkout:focus-visible {
    background: var(--ro-hikacart-checkout-hover) !important;
    color: var(--ro-hikacart-checkout-text) !important;
    text-decoration: none !important;
    transform: translateY(-1px);
}

.roamoz-hikacart__checkout:hover {
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.roamoz-hikacart__checkout:focus-visible {
    outline: 2px solid var(--ro-hikacart-checkout-hover);
    outline-offset: 3px;
}

.roamoz-hikacart__checkout[hidden],
.roamoz-hikacart__badge[hidden] {
    display: none !important;
}

/* Keep the configured colour even when the template applies SVG/link colours. */
.roamoz-hikacart__icon path,
.roamoz-hikacart__icon circle {
    fill: var(--ro-hikacart-current-colour) !important;
}

/* IndustrxT4 topbar compatibility: keep left and right positions at opposite edges. */
@media (min-width: 576px) {
    #t4-topbar .topbar-left .mod-finder {
        float: left !important;
    }

    #t4-topbar .topbar-right .roamoz-hikacart {
        float: right !important;
    }
}

/* Centre the Smart Search and cart modules when the T4 topbar stacks on mobile. */
@media (max-width: 575.98px) {
    #t4-topbar .topbar-left,
    #t4-topbar .topbar-right {
        width: 100%;
        text-align: center;
    }

    #t4-topbar .topbar-left .mod-finder {
        float: none !important;
        display: inline-flex !important;
        width: auto !important;
        max-width: 100%;
        margin-right: auto !important;
        margin-left: auto !important;
        text-align: left;
    }

    #t4-topbar .topbar-right .roamoz-hikacart {
        float: none !important;
        margin-right: auto !important;
        margin-left: auto !important;
        padding-top: 15px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .roamoz-hikacart__link,
    .roamoz-hikacart__checkout {
        transition: none;
    }
}