:root {

    /* Professional metric palette */
    --hk-metric-blue: #547d9f;
    --hk-metric-green: #477565;
    --hk-metric-amber: #a98242;
    --hk-metric-coral: #b96f60;
    --hk-metric-slate: #62798b;
    --hk-metric-purple: #806d89;
    --hk-metric-neutral: #72808a;


    --hk-navy: #17324d;
    --hk-navy-2: #214663;
    --hk-eucalyptus: #2f7d6e;
    --hk-eucalyptus-soft: #e7f2ef;
    --hk-coral: #ef8c72;
    --hk-coral-soft: #fff0eb;
    --hk-gold: #d6a84b;
    --hk-blue: #4b82b7;

    --hk-bg: #f5f7f8;
    --hk-card: #ffffff;
    --hk-text: #20313f;
    --hk-muted: #73808c;
    --hk-border: #e1e7eb;

    --hk-green: #24845f;
    --hk-red: #c94f4f;
    --hk-orange: #d48635;

    --hk-radius: 18px;
    --hk-radius-sm: 11px;

    --hk-shadow:
        0 8px 28px rgba(22, 50, 76, .07);

    --hk-shadow-hover:
        0 14px 36px rgba(22, 50, 76, .12);
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    min-height: 100%;
}

body {
    color: var(--hk-text);
    background:
        radial-gradient(circle at 95% 0%,
            rgba(47, 125, 110, .08),
            transparent 30%),
        var(--hk-bg);

    font-family:
        Inter,
        "Segoe UI",
        Arial,
        sans-serif;

    -webkit-font-smoothing: antialiased;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
textarea,
select {
    font: inherit;
}

button {
    cursor: pointer;
}


/* ==================================================
   DASHBOARD SHELL
================================================== */

.hk-shell {
    min-height: 100vh;
}

.hk-topbar {
    position: fixed;
    left: 248px;
    right: 0;
    top: 0;
    height: 72px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    padding: 0 30px;

    background: rgba(255,255,255,.92);
    backdrop-filter: blur(14px);

    border-bottom: 1px solid rgba(225,231,235,.9);

    z-index: 80;
}

.hk-topbar-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.hk-mobile-menu {
    display: none;

    width: 42px;
    height: 42px;

    border: 1px solid var(--hk-border);
    background: #fff;

    border-radius: 12px;
}

.hk-page-context {
    font-size: 13px;
    color: var(--hk-muted);
}

.hk-topbar-user {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hk-avatar {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: #fff;
    background:
        linear-gradient(
            135deg,
            var(--hk-eucalyptus),
            var(--hk-blue)
        );

    font-size: 14px;
    font-weight: 800;
}

.hk-user-meta {
    line-height: 1.25;
}

.hk-user-name {
    font-size: 13px;
    font-weight: 700;
}

.hk-user-role {
    margin-top: 2px;
    font-size: 11px;
    color: var(--hk-muted);
}


/* ==================================================
   SIDEBAR
================================================== */

.hk-sidebar {
    position: fixed;
    inset: 0 auto 0 0;

    width: 248px;

    padding: 25px 17px;

    color: #eaf1f5;

    background:
        linear-gradient(
            180deg,
            #17324d 0%,
            #18394e 56%,
            #245848 125%
        );

    z-index: 100;
}

.hk-brand {
    height: 66px;

    display: flex;
    align-items: center;
    gap: 12px;

    padding: 0 9px;

    margin-bottom: 24px;
}

.hk-brand-mark {
    width: 43px;
    height: 43px;

    display: grid;
    place-items: center;

    background:
        linear-gradient(
            135deg,
            var(--hk-coral),
            #f4b06e
        );

    border-radius: 14px;

    font-weight: 900;
    color: white;

    box-shadow:
        0 8px 22px rgba(239,140,114,.3);
}

.hk-brand-text strong {
    display: block;
    font-size: 15px;
    letter-spacing: .1px;
}

.hk-brand-text span {
    display: block;
    margin-top: 3px;
    font-size: 10px;
    color: rgba(255,255,255,.6);
}

.hk-side-section {
    margin: 23px 10px 9px;

    color: rgba(255,255,255,.47);

    font-size: 10px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 1.4px;
}

.hk-nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.hk-nav-link {
    min-height: 44px;

    display: flex;
    align-items: center;
    gap: 11px;

    padding: 0 13px;

    color: rgba(255,255,255,.76);

    border-radius: 12px;

    font-size: 13px;

    transition:
        background .18s ease,
        color .18s ease,
        transform .18s ease;
}

.hk-nav-link:hover {
    color: #fff;
    background: rgba(255,255,255,.08);
    transform: translateX(2px);
}

.hk-nav-link.is-active {
    color: #fff;
    background: rgba(255,255,255,.13);
}

.hk-nav-icon {
    width: 25px;
    height: 25px;

    display: grid;
    place-items: center;

    border-radius: 8px;

    background: rgba(255,255,255,.07);

    font-size: 13px;
}

.hk-nav-link.is-active .hk-nav-icon {
    background: var(--hk-coral);
}

.hk-nav-disabled {
    opacity: .46;
    pointer-events: none;
}


/* ==================================================
   CONTENT
================================================== */

.hk-main {
    margin-left: 248px;
    padding-top: 72px;
}

.hk-content {
    max-width: 1620px;
    margin: 0 auto;
    padding: 31px;
}

.hk-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 18px;

    margin-bottom: 25px;
}

.hk-page-title {
    margin: 0;

    font-size: 28px;
    line-height: 1.2;
    font-weight: 800;

    color: var(--hk-navy);
}

.hk-page-subtitle {
    margin-top: 7px;

    color: var(--hk-muted);

    font-size: 13px;
    line-height: 1.55;
}


/* ==================================================
   BUTTONS
================================================== */

.hk-btn {
    min-height: 40px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    padding: 9px 15px;

    border: 0;
    border-radius: 11px;

    font-size: 13px;
    font-weight: 700;

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        background .15s ease;
}

.hk-btn:hover {
    transform: translateY(-1px);
}

.hk-btn-primary {
    color: #fff;
    background:
        linear-gradient(
            135deg,
            var(--hk-eucalyptus),
            #3a917f
        );

    box-shadow:
        0 7px 18px rgba(47,125,110,.18);
}

.hk-btn-primary:hover {
    box-shadow:
        0 10px 23px rgba(47,125,110,.25);
}

.hk-btn-secondary {
    color: var(--hk-navy);
    background: #edf2f5;
}

.hk-btn-danger {
    color: #fff;
    background: #c75a59;
}

.hk-btn-light {
    color: var(--hk-navy);
    background: #fff;
    border: 1px solid var(--hk-border);
}

.hk-btn-sm {
    min-height: 34px;
    padding: 6px 11px;
    font-size: 12px;
}


/* ==================================================
   CARDS
================================================== */

.hk-card {
    background: var(--hk-card);

    border: 1px solid var(--hk-border);
    border-radius: var(--hk-radius);

    box-shadow: var(--hk-shadow);
}

.hk-card-pad {
    padding: 22px;
}

.hk-card-title {
    margin: 0 0 5px;

    color: var(--hk-navy);

    font-size: 16px;
    font-weight: 800;
}

.hk-card-subtitle {
    color: var(--hk-muted);
    font-size: 12px;
}


/* ==================================================
   METRICS
================================================== */

.hk-metrics {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0,1fr));

    gap: 16px;
}

.hk-metric {
    position: relative;
    overflow: hidden;

    min-height: 136px;

    padding: 20px;

    background: #fff;

    border: 1px solid var(--hk-border);
    border-radius: 17px;

    box-shadow: var(--hk-shadow);
}

.hk-metric::after {
    content: "";

    position: absolute;
    width: 90px;
    height: 90px;

    right: -38px;
    top: -38px;

    background: var(--metric-color, #2f7d6e);

    border-radius: 50%;

    opacity: .08;
}

.hk-metric-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hk-metric-icon {
    width: 40px;
    height: 40px;

    display: grid;
    place-items: center;

    border-radius: 12px;

    color: var(--metric-color, #2f7d6e);

    background:
        color-mix(
            in srgb,
            var(--metric-color, #2f7d6e) 11%,
            white
        );

    font-size: 17px;
    font-weight: 900;
}

.hk-metric-label {
    margin-top: 14px;

    color: var(--hk-muted);

    font-size: 12px;
    font-weight: 600;
}

.hk-metric-value {
    margin-top: 5px;

    color: var(--hk-navy);

    font-size: 26px;
    line-height: 1.2;

    font-weight: 800;
}

.hk-metric-foot {
    margin-top: 7px;

    color: var(--hk-muted);

    font-size: 11px;
}

.hk-up {
    color: var(--hk-green);
    font-weight: 700;
}

.hk-down {
    color: var(--hk-red);
    font-weight: 700;
}


/* ==================================================
   GRID
================================================== */

.hk-grid-2 {
    display: grid;
    grid-template-columns:
        minmax(0, 2fr)
        minmax(300px, 1fr);

    gap: 18px;
}

.hk-grid-equal {
    display: grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap: 18px;
}

.hk-section-gap {
    margin-top: 18px;
}


/* ==================================================
   TABLES
================================================== */

.hk-table-wrap {
    overflow-x: auto;
}

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

.hk-table th {
    padding: 11px 12px;

    color: #7a8792;

    background: #f8fafb;

    border-bottom: 1px solid var(--hk-border);

    text-align: left;

    font-size: 10px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: .65px;

    white-space: nowrap;
}

.hk-table td {
    padding: 14px 12px;

    border-bottom: 1px solid #edf1f3;

    font-size: 13px;
    vertical-align: middle;
}

.hk-table tbody tr:last-child td {
    border-bottom: none;
}

.hk-table tbody tr:hover {
    background: #fbfcfc;
}


/* ==================================================
   BADGES
================================================== */

.hk-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    padding: 5px 9px;

    border-radius: 999px;

    font-size: 10px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: .4px;

    background: #edf1f3;
    color: #596875;
}

.hk-badge-active,
.hk-badge-paid,
.hk-badge-completed {
    color: #23775a;
    background: #e4f4ed;
}

.hk-badge-pending,
.hk-badge-processing,
.hk-badge-scheduled {
    color: #946221;
    background: #fff1d9;
}

.hk-badge-suspended,
.hk-badge-rejected,
.hk-badge-cancelled {
    color: #a44848;
    background: #fae7e7;
}

.hk-badge-auction {
    color: #795990;
    background: #f1e9f7;
}

.hk-badge-fixed {
    color: #426b8e;
    background: #e8f1f8;
}


/* ==================================================
   FORMS
================================================== */

.hk-form-section + .hk-form-section {
    margin-top: 18px;
}

.hk-form-card {
    padding: 24px;
}

.hk-form-title {
    display: flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 19px;

    color: var(--hk-navy);

    font-size: 16px;
    font-weight: 800;
}

.hk-form-grid {
    display: grid;
    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap: 15px;
}

.hk-field-group {
    margin-bottom: 15px;
}

.hk-label {
    display: block;

    margin-bottom: 7px;

    color: #445562;

    font-size: 12px;
    font-weight: 700;
}

.hk-field {
    width: 100%;
    min-height: 43px;

    padding: 10px 12px;

    color: var(--hk-text);
    background: #fff;

    border: 1px solid #d9e0e4;
    border-radius: 10px;

    outline: none;

    transition:
        border .15s ease,
        box-shadow .15s ease;
}

textarea.hk-field {
    resize: vertical;
}

.hk-field:focus {
    border-color: #62a493;

    box-shadow:
        0 0 0 4px rgba(47,125,110,.10);
}

.hk-check {
    display: flex;
    align-items: flex-start;
    gap: 9px;

    margin: 10px 0;

    color: #52606b;

    font-size: 12px;
}

.hk-check input {
    margin-top: 2px;
}

.hk-help {
    margin-top: 6px;

    color: var(--hk-muted);

    font-size: 11px;
    line-height: 1.5;
}


/* ==================================================
   ALERTS
================================================== */

.hk-alert {
    margin-bottom: 18px;

    padding: 13px 15px;

    border-radius: 12px;

    font-size: 12px;
}

.hk-alert-success {
    color: #26674f;
    background: #e7f5ef;
    border: 1px solid #bde1d2;
}

.hk-alert-danger {
    color: #923f3f;
    background: #fdecec;
    border: 1px solid #f4c1c1;
}


/* ==================================================
   CHARTS
================================================== */

.hk-chart-box {
    height: 300px;
    margin-top: 18px;
}

.hk-chart-box canvas {
    width: 100%;
    height: 100%;
}

.hk-chart-legend {
    display: flex;
    align-items: center;
    gap: 14px;

    margin-top: 10px;

    font-size: 11px;
    color: var(--hk-muted);
}

.hk-dot {
    display: inline-block;

    width: 8px;
    height: 8px;

    margin-right: 5px;

    border-radius: 50%;
}


/* ==================================================
   PRODUCT
================================================== */

.hk-product-thumb {
    width: 58px;
    height: 58px;

    overflow: hidden;

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            #eef3f4,
            #f8fafb
        );

    border: 1px solid var(--hk-border);
}

.hk-product-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hk-product-name {
    color: var(--hk-navy);
    font-weight: 750;
}

.hk-product-sub {
    margin-top: 3px;
    color: var(--hk-muted);
    font-size: 11px;
}


/* ==================================================
   AUTH
================================================== */

.hk-auth-page {
    min-height: 100vh;

    display: grid;
    grid-template-columns:
        minmax(330px, 42%)
        minmax(0, 58%);

    background: #fff;
}

.hk-auth-visual {
    position: relative;
    overflow: hidden;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    padding: 48px;

    color: white;

    background:
        linear-gradient(
            145deg,
            #17324d,
            #225c59 72%,
            #2f7d6e
        );
}

.hk-auth-visual::before,
.hk-auth-visual::after {
    content: "";

    position: absolute;

    border-radius: 50%;
}

.hk-auth-visual::before {
    width: 360px;
    height: 360px;

    right: -130px;
    top: -100px;

    background: rgba(239,140,114,.15);
}

.hk-auth-visual::after {
    width: 230px;
    height: 230px;

    left: -70px;
    bottom: -70px;

    background: rgba(255,255,255,.07);
}

.hk-auth-logo {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    gap: 12px;
}

.hk-auth-logo-mark {
    width: 46px;
    height: 46px;

    display: grid;
    place-items: center;

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            var(--hk-coral),
            #f0b169
        );

    font-size: 17px;
    font-weight: 900;
}

.hk-auth-message {
    position: relative;
    z-index: 2;

    max-width: 450px;
}

.hk-auth-message h2 {
    margin: 0 0 14px;

    font-size: clamp(27px, 3.3vw, 45px);
    line-height: 1.08;
}

.hk-auth-message p {
    margin: 0;

    color: rgba(255,255,255,.72);

    font-size: 14px;
    line-height: 1.75;
}

.hk-auth-content {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 45px 24px;

    background:
        radial-gradient(
            circle at 100% 0,
            #f3f9f7,
            transparent 34%
        ),
        #fff;
}

.hk-auth-box {
    width: min(450px, 100%);
}

.hk-auth-box-wide {
    width: min(520px, 100%);
}

.hk-auth-title {
    margin: 0;

    color: var(--hk-navy);

    font-size: 30px;
    font-weight: 850;
}

.hk-auth-sub {
    margin: 8px 0 25px;

    color: var(--hk-muted);

    font-size: 13px;
    line-height: 1.6;
}

.hk-auth-switch {
    margin-top: 22px;

    color: var(--hk-muted);

    font-size: 12px;
    text-align: center;
}

.hk-auth-switch a {
    color: var(--hk-eucalyptus);
    font-weight: 800;
}


/* ==================================================
   EMPTY STATE
================================================== */

.hk-empty {
    padding: 55px 20px;

    color: var(--hk-muted);

    text-align: center;
}

.hk-empty-icon {
    width: 62px;
    height: 62px;

    display: grid;
    place-items: center;

    margin: 0 auto 13px;

    color: var(--hk-eucalyptus);

    background: var(--hk-eucalyptus-soft);

    border-radius: 20px;

    font-size: 23px;
}


/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width: 1180px) {
    .hk-metrics {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }
}

@media (max-width: 960px) {
    .hk-sidebar {
        transform: translateX(-100%);
        transition: transform .2s ease;
    }

    body.hk-menu-open .hk-sidebar {
        transform: translateX(0);
    }

    .hk-topbar {
        left: 0;
    }

    .hk-main {
        margin-left: 0;
    }

    .hk-mobile-menu {
        display: inline-grid;
        place-items: center;
    }

    .hk-grid-2,
    .hk-grid-equal {
        grid-template-columns: 1fr;
    }

    .hk-auth-page {
        grid-template-columns: 1fr;
    }

    .hk-auth-visual {
        display: none;
    }
}

@media (max-width: 650px) {
    .hk-content {
        padding: 20px 14px;
    }

    .hk-topbar {
        padding: 0 15px;
    }

    .hk-user-meta {
        display: none;
    }

    .hk-page-header {
        flex-direction: column;
    }

    .hk-metrics {
        grid-template-columns: 1fr;
    }

    .hk-form-grid {
        grid-template-columns: 1fr;
    }
}


/* ==================================================
   HOJU LANGUAGE SYSTEM
================================================== */

.hk-global-header {
    position: relative;
    z-index: 900;

    width: 100%;
    min-height: 68px;

    display: flex;
    align-items: center;

    color: #fff;

    background:
        linear-gradient(
            115deg,
            #17324d,
            #214663
        );

    border-bottom:
        1px solid rgba(255,255,255,.08);
}

.hk-global-header-inner {
    width: 100%;
    max-width: 1600px;

    margin: 0 auto;
    padding: 0 30px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 24px;
}

.hk-global-brand-area {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hk-global-brand {
    color: #fff;

    font-size: 18px;
    font-weight: 850;

    letter-spacing: -.25px;

    white-space: nowrap;
}

.hk-global-nav {
    display: flex;
    align-items: center;
    gap: 20px;

    color: rgba(255,255,255,.78);

    font-size: 12px;
    font-weight: 700;
}

.hk-global-nav a:hover {
    color: #fff;
}


/* language */

.hk-language {
    position: relative;

    display: inline-flex;
    align-items: center;

    z-index: 1200;
}

.hk-language-button {
    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: rgba(255,255,255,.09);

    color: #50a6ff;

    transition:
        color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}

.hk-language-button:hover {
    background: rgba(255,255,255,.15);

    box-shadow:
        0 0 0 4px rgba(255,255,255,.05);
}

.hk-language-button.is-translated {
    color: #ef5350;
}

.hk-language-globe {
    width: 23px;
    height: 23px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.65;
    stroke-linecap: round;
    stroke-linejoin: round;

    animation:
        hkGlobeSpin 6s linear infinite;

    transform-origin: center;
}

@keyframes hkGlobeSpin {

    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}


.hk-language-menu {
    position: absolute;

    top: 1px;
    left: calc(100% + 11px);

    width: 138px;

    display: none;

    overflow: hidden;

    padding: 6px;

    background: #fff;

    border:
        1px solid rgba(23,50,77,.12);

    border-radius: 14px;

    box-shadow:
        0 15px 40px rgba(17,38,58,.18);
}

.hk-language-menu.is-open {
    display: block;
}

.hk-language-menu button {
    width: 100%;

    display: flex;
    align-items: center;
    gap: 9px;

    padding: 10px 11px;

    color: #263b4b;

    background: transparent;

    border: 0;
    border-radius: 9px;

    text-align: left;

    font-size: 12px;
    font-weight: 750;
}

.hk-language-menu button:hover {
    background: #edf5f3;
}

.hk-language-flag {
    width: 23px;

    font-size: 17px;
    line-height: 1;
}

.hk-google-translate-engine {
    position: fixed;

    left: -99999px;
    top: -99999px;

    width: 1px;
    height: 1px;

    overflow: hidden;
}


/* hide native Google toolbar */

.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
.skiptranslate iframe {
    display: none !important;
}

body {
    top: 0 !important;
}

#goog-gt-tt,
.goog-te-balloon-frame {
    display: none !important;
}

.goog-text-highlight {
    background: none !important;
    box-shadow: none !important;
}


/* dashboard title + globe */

.hk-top-title-area {
    display: flex;
    align-items: center;
    gap: 11px;
}

.hk-top-title {
    color: var(--hk-navy);

    font-size: 16px;
    font-weight: 850;

    white-space: nowrap;
}

.hk-topbar .hk-language-button {
    background: #edf3f6;
}


/* mobile language menu */

@media(max-width:700px) {

    .hk-global-header-inner {
        padding: 0 15px;
    }

    .hk-global-brand {
        font-size: 15px;
    }

    .hk-global-nav {
        display: none;
    }

    .hk-language-menu {
        left: auto;
        right: 0;
        top: calc(100% + 8px);
    }

    .hk-top-title {
        font-size: 14px;
    }
}



/* ==================================================
   ROUND LANGUAGE FLAG MENU
================================================== */

.hk-language-menu {
    width: 156px;

    padding: 7px;

    border-radius: 18px;
}


.hk-language-option {
    min-height: 48px;

    display: flex !important;
    align-items: center;
    gap: 10px;

    padding: 5px 8px !important;
}


.hk-language-flag-circle {
    position: relative;

    flex: 0 0 38px;

    width: 38px;
    height: 38px;

    display: grid;
    place-items: center;

    overflow: hidden;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f3f6f8
        );

    border: 1px solid #dce4e9;

    box-shadow:
        0 2px 8px rgba(23,50,77,.08);

    transition:
        border-color .18s ease,
        background .18s ease,
        transform .18s ease,
        box-shadow .18s ease;
}


.hk-language-flag {
    display: block;

    font-size: 22px;
    line-height: 1;

    transform: translateY(.5px);
}


.hk-language-name {
    color: #314554;

    font-size: 12px;
    font-weight: 800;
}


.hk-language-option:hover
.hk-language-flag-circle {

    transform: scale(1.04);

    border-color: #91b9ae;

    box-shadow:
        0 4px 12px rgba(23,50,77,.12);
}


.hk-language-option.is-selected
.hk-language-flag-circle {

    border: 2px solid #2f7d6e;

    background: #edf7f4;

    box-shadow:
        0 0 0 3px rgba(47,125,110,.09);
}


.hk-language-option.is-selected
.hk-language-name {

    color: #236b5d;
}


.hk-language-button.is-translated
+
.hk-language-menu
.hk-language-option.is-selected
.hk-language-flag-circle {

    border-color: #df6260;

    box-shadow:
        0 0 0 3px rgba(223,98,96,.09);
}


@media(max-width:700px) {

    .hk-language-menu {
        width: 150px;
    }

}



/* ==================================================
   HOME TOP LEFT LANGUAGE GLOBE
================================================== */

.hk-home-title-language {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    min-height: 34px;

    position: relative;

    z-index: 1500;
}


.hk-home-title {
    display: inline-flex;
    align-items: center;

    color: inherit !important;

    font-size: 14px;
    font-weight: 800;

    line-height: 1;

    white-space: nowrap;
}


.hk-home-title-language
.hk-language-button {

    width: 31px;
    height: 31px;

    background:
        rgba(255,255,255,.10);
}


.hk-home-title-language
.hk-language-globe {

    width: 20px;
    height: 20px;
}


/*
 * Home top navigation has limited vertical space.
 * Language menu therefore opens directly to
 * the RIGHT of the globe.
 */

.hk-home-title-language
.hk-language-menu {

    top: 50%;
    left: calc(100% + 8px);
    right: auto;

    transform: translateY(-50%);

    width: 150px;

    z-index: 9999;
}


.hk-home-title-language
.hk-language-menu.is-open {

    display: block;
}


/*
 * Each language is one vertical row:
 *
 * ○ 🇰🇷 한국어
 * ○ 🇬🇧 영어
 * ○ 🇨🇳 중국어
 */

.hk-home-title-language
.hk-language-option {

    width: 100%;

    min-height: 47px;

    display: flex !important;
    align-items: center;

    gap: 10px;
}


/*
 * Do not allow the original Hoju Korean Shop top-nav
 * CSS to shrink the round flag buttons.
 */

.hk-home-title-language
.hk-language-menu button {

    float: none !important;

    width: 100% !important;

    margin: 0 !important;
}


.hk-home-title-language
.hk-language-flag-circle {

    flex: 0 0 36px;

    width: 36px;
    height: 36px;
}


.hk-home-title-language
.hk-language-flag {

    font-size: 21px;
}


@media(max-width:767px) {

    .hk-home-title {
        font-size: 12px;
    }

    .hk-home-title-language {
        gap: 6px;
    }

    .hk-home-title-language
    .hk-language-button {

        width: 29px;
        height: 29px;
    }

    .hk-home-title-language
    .hk-language-menu {

        top: calc(100% + 7px);
        left: 0;

        transform: none;
    }
}



/* ==================================================
   FINAL LANGUAGE GLOBE / REAL FLAGS
================================================== */


/* ---------- globe colours ---------- */

.hk-language-button {

    color: #3b82f6 !important;
}


.hk-language-button.is-translated {

    color: #ef4444 !important;
}


/*
 * Make translated state impossible for
 * old theme CSS to override.
 */

.hk-topbar
.hk-language-button.is-translated,

.hk-main-logo-language
.hk-language-button.is-translated,

.hk-global-header
.hk-language-button.is-translated {

    color: #ef4444 !important;
}


.hk-topbar
.hk-language-button:not(.is-translated),

.hk-main-logo-language
.hk-language-button:not(.is-translated),

.hk-global-header
.hk-language-button:not(.is-translated) {

    color: #3b82f6 !important;
}


/* ---------- existing home logo + globe ---------- */

.hk-main-logo-language {

    display: inline-flex !important;

    align-items: center;

    gap: 9px;

    position: relative;

    z-index: 1800;

    white-space: nowrap;
}


.hk-main-logo-language
.header-logo {

    margin: 0 !important;

    flex: 0 0 auto;
}


.hk-main-logo-globe {

    display: inline-flex;

    align-items: center;

    flex: 0 0 auto;

    position: relative;

    z-index: 1900;
}


.hk-main-logo-globe
.hk-language-button {

    width: 36px;
    height: 36px;

    padding: 0;

    background:
        rgba(23,50,77,.06) !important;

    border:
        1px solid rgba(23,50,77,.09);

    border-radius: 50%;
}


.hk-main-logo-globe
.hk-language-globe {

    width: 22px;
    height: 22px;
}


/* ---------- flag-only popup ---------- */

.hk-language-menu-flags {

    position: absolute;

    top: 50% !important;

    left: calc(100% + 10px) !important;

    right: auto !important;

    transform:
        translateY(-50%) !important;

    width: 58px !important;

    padding: 6px !important;

    display: none;

    flex-direction: column;

    gap: 5px;

    overflow: visible;

    background:
        rgba(255,255,255,.98);

    border:
        1px solid #dde5e9;

    border-radius: 29px;

    box-shadow:
        0 10px 30px rgba(23,50,77,.17);

    z-index: 99999 !important;
}


.hk-language-menu-flags.is-open {

    display: flex !important;
}


.hk-language-menu-flags
.hk-language-option {

    width: 46px !important;
    height: 46px !important;

    min-height: 46px !important;

    margin: 0 !important;
    padding: 3px !important;

    display: grid !important;
    place-items: center !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 50% !important;

    overflow: visible;

    font-size: 0 !important;

    color: transparent !important;
}


.hk-language-menu-flags
.hk-language-option:hover {

    background:
        #edf5f3 !important;
}


/* ---------- real circular flags ---------- */

.hk-real-flag {

    width: 38px;
    height: 38px;

    display: block;

    overflow: hidden;

    border-radius: 50%;

    background: #fff;

    border:
        2px solid #fff;

    box-shadow:
        0 1px 7px rgba(22,43,61,.18);

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        border-color .16s ease;
}


.hk-real-flag svg {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


.hk-language-option:hover
.hk-real-flag {

    transform: scale(1.07);

    box-shadow:
        0 4px 12px rgba(22,43,61,.22);
}


.hk-language-option.is-selected
.hk-real-flag {

    border-color:
        #2f7d6e;

    box-shadow:
        0 0 0 3px
        rgba(47,125,110,.13);
}


.hk-language-button.is-translated
+
.hk-language-menu-flags
.hk-language-option.is-selected
.hk-real-flag {

    border-color:
        #ef4444;

    box-shadow:
        0 0 0 3px
        rgba(239,68,68,.12);
}


/* ==================================================
   HIDE GOOGLE TRANSLATE NATIVE UI
================================================== */

.goog-te-banner-frame,

.goog-te-banner-frame.skiptranslate,

iframe.goog-te-banner-frame,

iframe.skiptranslate,

.VIpgJd-ZVi9od-ORHb-OEVmcd,

.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,

.VIpgJd-suEOdc,

#goog-gt-tt,

.goog-te-balloon-frame,

.goog-te-spinner-pos,

.goog-tooltip,

.goog-tooltip:hover {

    display: none !important;

    visibility: hidden !important;

    opacity: 0 !important;
}


/*
 * Google sometimes inserts a direct
 * skiptranslate element as the first body child.
 */

body > .skiptranslate {

    display: none !important;
}


body {

    top: 0 !important;
}


html {

    margin-top: 0 !important;
}


.goog-text-highlight {

    background: none !important;

    box-shadow: none !important;
}


/*
 * Keep our own hidden Google engine hidden.
 */

.hk-google-translate-engine,

#google_translate_element {

    position: fixed !important;

    left: -99999px !important;
    top: -99999px !important;

    width: 1px !important;
    height: 1px !important;

    overflow: hidden !important;

    opacity: 0 !important;
}


/* mobile */

@media(max-width:767px) {

    .hk-main-logo-language {

        gap: 5px;
    }


    .hk-main-logo-globe
    .hk-language-button {

        width: 32px;
        height: 32px;
    }


    .hk-main-logo-globe
    .hk-language-globe {

        width: 19px;
        height: 19px;
    }


    .hk-main-logo-language
    .hk-language-menu-flags {

        top: calc(100% + 7px) !important;

        left: auto !important;
        right: 0 !important;

        transform: none !important;
    }
}


/*
 * Previous temporary top-left title
 * is no longer used.
 */

.hk-home-title-language,
.hk-home-title {

    display: none !important;
}



/* ==================================================
   MINIMAL GLOBE + SMALL FLAGS FINAL OVERRIDE
================================================== */


/* globe: no circle container */

.hk-main-logo-globe
.hk-language-button,

.hk-topbar
.hk-language-button,

.hk-global-header
.hk-language-button {

    width: auto !important;
    height: auto !important;

    min-width: 0 !important;
    min-height: 0 !important;

    padding: 0 !important;
    margin: 0 !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}


/* slightly larger globe */

.hk-main-logo-globe
.hk-language-globe {

    width: 28px !important;
    height: 28px !important;
}


.hk-topbar
.hk-language-globe,

.hk-global-header
.hk-language-globe {

    width: 25px !important;
    height: 25px !important;
}


/* keep blue / red behaviour */

.hk-language-button {

    color: #3b82f6 !important;
}


.hk-language-button.is-translated {

    color: #ef4444 !important;
}


/* popup has NO outer container look */

.hk-language-menu-flags {

    top: 50% !important;

    left: calc(100% + 5px) !important;
    right: auto !important;

    transform: translateY(-50%) !important;

    width: auto !important;

    padding: 0 !important;
    margin: 0 !important;

    display: none;

    flex-direction: column !important;

    gap: 2px !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    overflow: visible !important;

    z-index: 99999 !important;
}


.hk-language-menu-flags.is-open {

    display: flex !important;
}


/* no button container */

.hk-language-menu-flags
.hk-language-option {

    width: 22px !important;
    height: 22px !important;

    min-width: 22px !important;
    min-height: 22px !important;

    padding: 0 !important;
    margin: 0 !important;

    display: grid !important;
    place-items: center !important;

    background: transparent !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;
}


/* small circular flags */

.hk-language-menu-flags
.hk-real-flag {

    width: 20px !important;
    height: 20px !important;

    border-radius: 50% !important;

    border: 1px solid rgba(255,255,255,.9) !important;

    box-shadow:
        0 1px 4px rgba(23,50,77,.16) !important;

    overflow: hidden !important;

    background: transparent !important;
}


/* tighter hover */

.hk-language-menu-flags
.hk-language-option:hover {

    background: transparent !important;
}


.hk-language-menu-flags
.hk-language-option:hover
.hk-real-flag {

    transform: scale(1.08);

    box-shadow:
        0 2px 5px rgba(23,50,77,.20) !important;
}


/* selected flag - subtle only */

.hk-language-menu-flags
.hk-language-option.is-selected
.hk-real-flag {

    border-color: #2f7d6e !important;

    box-shadow:
        0 0 0 1px rgba(47,125,110,.20) !important;
}


.hk-language-button.is-translated
+
.hk-language-menu-flags
.hk-language-option.is-selected
.hk-real-flag {

    border-color: #ef4444 !important;

    box-shadow:
        0 0 0 1px rgba(239,68,68,.20) !important;
}


/* logo/globe gap slightly reduced */

.hk-main-logo-language {

    gap: 6px !important;
}


/* mobile */

@media(max-width:767px) {

    .hk-main-logo-globe
    .hk-language-globe {

        width: 24px !important;
        height: 24px !important;
    }


    .hk-main-logo-language
    .hk-language-menu-flags {

        top: 50% !important;

        left: calc(100% + 4px) !important;
        right: auto !important;

        transform: translateY(-50%) !important;
    }
}



/* ==================================================
   LANGUAGE GLOBE FIRST-USE HINT
================================================== */

.hk-language {
    position: relative;
}


.hk-language-hint {

    position: absolute;

    top: calc(100% + 3px);
    left: 50%;

    transform: translateX(-50%);

    display: block;

    color: #6f7e89;

    font-size: 9px;
    font-weight: 700;

    line-height: 1;

    letter-spacing: .2px;

    white-space: nowrap;

    pointer-events: none;

    opacity: .9;

    transition:
        opacity .18s ease,
        transform .18s ease;
}


.hk-language-hint.is-hidden {

    opacity: 0;

    transform:
        translateX(-50%)
        translateY(-3px);

    visibility: hidden;
}


/*
 * On dark headers make the hint lighter.
 */

.hk-global-header
.hk-language-hint {

    color: rgba(255,255,255,.72);
}


/*
 * Home logo area.
 */

.hk-main-logo-language
.hk-language-hint {

    color: #6d7982;
}


/*
 * Dashboard header.
 */

.hk-topbar
.hk-language-hint {

    color: #71808c;
}


@media(max-width:767px) {

    .hk-language-hint {

        font-size: 8px;

        top: calc(100% + 2px);
    }
}



/* ==================================================
   LANGUAGE HINT SPEECH BUBBLE - FINAL OVERRIDE
================================================== */

.hk-language-hint {

    position: absolute !important;

    /*
     * Bubble sits ABOVE the globe.
     */

    top: auto !important;
    bottom: calc(100% + 8px) !important;

    left: 50% !important;

    transform:
        translateX(-50%) !important;

    display: block;

    padding:
        5px 8px !important;

    color:
        #32495a !important;

    background:
        #ffffff !important;

    border:
        1px solid rgba(23,50,77,.16) !important;

    border-radius:
        7px !important;

    box-shadow:
        0 4px 12px
        rgba(23,50,77,.13) !important;

    font-size:
        9px !important;

    font-weight:
        800 !important;

    line-height:
        1 !important;

    letter-spacing:
        .15px !important;

    white-space:
        nowrap !important;

    pointer-events:
        none !important;

    opacity:
        1 !important;

    visibility:
        visible !important;

    z-index:
        99999 !important;
}


/*
 * Speech bubble triangle.
 * The arrow points DOWN toward the globe.
 */

.hk-language-hint::before {

    content: "";

    position: absolute;

    left: 50%;
    bottom: -6px;

    transform:
        translateX(-50%);

    width: 0;
    height: 0;

    border-left:
        6px solid transparent;

    border-right:
        6px solid transparent;

    border-top:
        6px solid rgba(23,50,77,.16);
}


.hk-language-hint::after {

    content: "";

    position: absolute;

    left: 50%;
    bottom: -5px;

    transform:
        translateX(-50%);

    width: 0;
    height: 0;

    border-left:
        5px solid transparent;

    border-right:
        5px solid transparent;

    border-top:
        5px solid #ffffff;
}


/*
 * Hide permanently after the first click.
 */

.hk-language-hint.is-hidden {

    opacity:
        0 !important;

    visibility:
        hidden !important;

    transform:
        translateX(-50%)
        translateY(3px) !important;

    transition:
        opacity .18s ease,
        transform .18s ease,
        visibility .18s ease;
}


/*
 * Home logo area:
 * keep bubble directly above globe.
 */

.hk-main-logo-globe
.hk-language {

    position: relative !important;
}


.hk-main-logo-globe
.hk-language-hint {

    bottom:
        calc(100% + 7px) !important;
}


/*
 * Dashboard / dark header variants.
 */

.hk-global-header
.hk-language-hint,

.hk-topbar
.hk-language-hint {

    color:
        #32495a !important;

    background:
        #ffffff !important;
}


/*
 * Mobile slightly smaller.
 */

@media(max-width:767px) {

    .hk-language-hint {

        padding:
            4px 7px !important;

        font-size:
            8px !important;

        bottom:
            calc(100% + 6px) !important;
    }
}



/* ==================================================
   PRODUCT SELLER TRUST
================================================== */

.hk-product-seller-trust {
    flex-wrap: wrap;
}


.hk-trust-badge {

    transition:
        opacity .16s ease,
        transform .16s ease;
}


.hk-trust-badge:hover {

    opacity: .82;

    transform:
        translateY(-1px);
}


.hk-detail-shop
.hk-trust-badge {

    color:
        var(--hk-navy);
}


.hk-detail-shop
.hk-badge {

    vertical-align: middle;
}


/*
|--------------------------------------------------------------------------
| Hoju Korean Shop - language globe tooltip
|--------------------------------------------------------------------------
| Keep the Language tooltip below the globe rather than above it.
*/

.hk-language-wrap,
.hk-language-globe-wrap,
.hk-language-globe,
.language-globe-wrap {
    position: relative;
}

.hk-language-tooltip,
.language-tooltip,
.hk-globe-tooltip {
    top: calc(100% + 8px) !important;
    bottom: auto !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    white-space: nowrap;
    z-index: 10050;
}

.hk-language-tooltip::before,
.language-tooltip::before,
.hk-globe-tooltip::before {
    top: -6px !important;
    bottom: auto !important;
    left: 50% !important;
    transform:
        translateX(-50%)
        rotate(45deg) !important;
}



/*
|--------------------------------------------------------------------------
| Hoju Korean Shop - Language hint below globe
|--------------------------------------------------------------------------
*/

.hk-language {
    position: relative;
}


/*
 * The actual tooltip class is hk-language-hint.
 * Place it directly BELOW the globe.
 */
.hk-language .hk-language-hint {
    top: calc(100% + 9px) !important;
    bottom: auto !important;

    left: 50% !important;
    right: auto !important;

    transform: translateX(-50%) !important;

    margin: 0 !important;

    white-space: nowrap;

    z-index: 10050;
}


/*
 * Triangle now points UP toward the globe.
 */
.hk-language .hk-language-hint::before {
    top: -7px !important;
    bottom: auto !important;

    left: 50% !important;
    right: auto !important;

    transform:
        translateX(-50%)
        rotate(45deg) !important;
}


/*
 * Keep any second arrow/shadow layer
 * on the upper edge as well.
 */
.hk-language .hk-language-hint::after {
    top: -6px !important;
    bottom: auto !important;

    left: 50% !important;
    right: auto !important;

    transform:
        translateX(-50%)
        rotate(45deg) !important;
}


/*
 * Home logo globe: keep bubble centred
 * under the globe itself.
 */
.hk-main-logo-globe .hk-language {
    position: relative;
}


.hk-main-logo-globe
.hk-language-hint {
    top: calc(100% + 9px) !important;
    bottom: auto !important;

    left: 50% !important;
    right: auto !important;

    transform:
        translateX(-50%) !important;
}


@media (max-width: 767px) {

    .hk-language .hk-language-hint,
    .hk-main-logo-globe .hk-language-hint {
        top: calc(100% + 7px) !important;
        bottom: auto !important;
    }
}

/* =========================================================
   HOJU SHOP PROFESSIONAL UI V1 START

   Shared visual system for:
   - Admin
   - Seller
   - Authentication
   - Order management
   - Returns / refunds / disputes
   - Seller application
   ========================================================= */

:root {
    --hk-ui-primary:
        var(--hk-primary, #244f73);

    --hk-ui-primary-hover:
        var(--hk-primary-dark, #183d5b);

    --hk-ui-primary-soft:
        #edf3f7;

    --hk-ui-page:
        #f5f7f9;

    --hk-ui-surface:
        #ffffff;

    --hk-ui-surface-soft:
        #f8fafb;

    --hk-ui-border:
        #dfe5e9;

    --hk-ui-border-strong:
        #cfd8de;

    --hk-ui-text:
        #1d2935;

    --hk-ui-text-soft:
        #667582;

    --hk-ui-success:
        #287451;

    --hk-ui-success-bg:
        #eaf6ef;

    --hk-ui-warning:
        #8a6418;

    --hk-ui-warning-bg:


    --hk-ui-warning-border:
        #ecdfa9;
        #fbf4df;

    --hk-ui-danger:
        #a54343;

    --hk-ui-danger-bg:


    --hk-ui-danger-border:
        #ebcaca;
        #faeeee;

    --hk-ui-info:
        #315f84;

    --hk-ui-info-bg:
        #edf4f9;

    --hk-ui-radius:
        11px;

    --hk-ui-radius-small:
        8px;

    --hk-ui-shadow:
        0 2px 10px rgba(24, 39, 53, .055);

    --hk-ui-shadow-hover:
        0 5px 18px rgba(24, 39, 53, .075);
}


/* ---------- PAGE ---------- */

body {
    color:
        var(--hk-ui-text);
}

.hk-dashboard-body,
.hk-dashboard-main,
.hk-page {
    background:
        var(--hk-ui-page);
}


.hk-page-header {
    display:
        flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    gap:
        20px;

    margin-bottom:
        22px;
}


.hk-page-title {
    margin:
        0;

    color:
        var(--hk-ui-text);

    font-size:
        26px;

    line-height:
        1.25;

    font-weight:
        700;

    letter-spacing:
        -.025em;
}


.hk-page-subtitle {
    margin-top:
        7px;

    color:
        var(--hk-ui-text-soft);

    font-size:
        14px;

    line-height:
        1.65;
}


/* ---------- CARD ---------- */

.hk-card {
    background:
        var(--hk-ui-surface);

    border:
        1px solid var(--hk-ui-border);

    border-radius:
        var(--hk-ui-radius);

    box-shadow:
        var(--hk-ui-shadow);
}


.hk-card-pad {
    padding:
        20px;
}


.hk-card-title {
    color:
        var(--hk-ui-text);

    font-size:
        17px;

    line-height:
        1.35;

    font-weight:
        700;

    letter-spacing:
        -.015em;
}


/* ---------- FORM ---------- */

.hk-label {
    display:
        block;

    margin-bottom:
        7px;

    color:
        #43515d;

    font-size:
        13px;

    font-weight:
        650;
}


.hk-field,
.hk-input,
.hk-select,
.hk-textarea {
    width:
        100%;

    min-height:
        42px;

    padding:
        9px 12px;

    color:
        var(--hk-ui-text);

    background:
        var(--hk-ui-surface);

    border:
        1px solid var(--hk-ui-border-strong);

    border-radius:
        var(--hk-ui-radius-small);

    font-size:
        14px;

    line-height:
        1.45;

    outline:
        none;

    transition:
        border-color .16s ease,
        box-shadow .16s ease,
        background .16s ease;
}


textarea.hk-field,
.hk-textarea {
    min-height:
        105px;

    resize:
        vertical;
}


.hk-field:hover,
.hk-input:hover,
.hk-select:hover,
.hk-textarea:hover {
    border-color:
        #b9c6ce;
}


.hk-field:focus,
.hk-input:focus,
.hk-select:focus,
.hk-textarea:focus {
    border-color:
        var(--hk-ui-primary);

    box-shadow:
        0 0 0 3px rgba(36, 79, 115, .11);
}


/* ---------- BUTTON ---------- */

.hk-btn {
    min-height:
        40px;

    padding:
        8px 15px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        7px;

    border:
        1px solid transparent;

    border-radius:
        var(--hk-ui-radius-small);

    font-size:
        13px;

    font-weight:
        650;

    line-height:
        1.3;

    text-decoration:
        none;

    cursor:
        pointer;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease,
        box-shadow .15s ease,
        transform .15s ease;
}


.hk-btn:hover {
    transform:
        translateY(-1px);
}


.hk-btn-primary {
    color:
        #fff;

    background:
        var(--hk-ui-primary);

    border-color:
        var(--hk-ui-primary);
}


.hk-btn-primary:hover {
    color:
        #fff;

    background:
        var(--hk-ui-primary-hover);

    border-color:
        var(--hk-ui-primary-hover);

    box-shadow:
        0 4px 12px rgba(36, 79, 115, .16);
}


.hk-btn-light,
.hk-btn-secondary {
    color:
        #364653;

    background:
        #fff;

    border-color:
        var(--hk-ui-border-strong);
}


.hk-btn-light:hover,
.hk-btn-secondary:hover {
    color:
        var(--hk-ui-text);

    background:
        #f5f7f9;

    border-color:
        #bac7ce;
}


.hk-btn-danger {
    color:
        var(--hk-ui-danger);

    background:
        var(--hk-ui-danger-bg);

    border-color:
        #ebcaca;
}


/* ---------- TABLE ---------- */

.hk-table-wrap {
    width:
        100%;

    overflow-x:
        auto;
}


.hk-table {
    width:
        100%;

    border-collapse:
        collapse;

    background:
        #fff;
}


.hk-table thead th {
    padding:
        12px 14px;

    color:
        #586773;

    background:
        #f7f9fa;

    border-top:
        1px solid var(--hk-ui-border);

    border-bottom:
        1px solid var(--hk-ui-border);

    font-size:
        12px;

    font-weight:
        700;

    line-height:
        1.35;

    text-align:
        left;

    white-space:
        nowrap;
}


.hk-table tbody td {
    padding:
        14px;

    color:
        var(--hk-ui-text);

    border-bottom:
        1px solid #e8ecef;

    font-size:
        13px;

    line-height:
        1.55;

    vertical-align:
        middle;
}


.hk-table tbody tr {
    transition:
        background .14s ease;
}


.hk-table tbody tr:hover {
    background:
        #fafbfc;
}


.hk-table tbody tr:last-child td {
    border-bottom:
        0;
}


.hk-table a {
    color:
        var(--hk-ui-primary);
}


.hk-table a:hover {
    color:
        var(--hk-ui-primary-hover);
}


/* ---------- BADGES ---------- */

.hk-badge {
    display:
        inline-flex;

    align-items:
        center;

    min-height:
        25px;

    padding:
        4px 9px;

    border:
        1px solid transparent;

    border-radius:
        999px;

    font-size:
        11px;

    font-weight:
        700;

    line-height:
        1.2;

    white-space:
        nowrap;
}


.hk-badge-success,
.hk-badge-active,
.hk-badge-completed,
.hk-badge-paid,
.hk-badge-approved,
.hk-badge-confirmed,
.hk-badge-verified {
    color:
        var(--hk-ui-success);

    background:
        var(--hk-ui-success-bg);

    border-color:
        #cce8d8;
}


.hk-badge-warning,
.hk-badge-pending,
.hk-badge-processing,
.hk-badge-waiting {
    color:
        var(--hk-ui-warning);

    background:
        var(--hk-ui-warning-bg);

    border-color:
        #ecdfa9;
}


.hk-badge-danger,
.hk-badge-failed,
.hk-badge-rejected,
.hk-badge-cancelled,
.hk-badge-suspended,
.hk-badge-issue_reported {
    color:
        var(--hk-ui-danger);

    background:
        var(--hk-ui-danger-bg);

    border-color:
        #ebcaca;
}


.hk-badge-info,
.hk-badge-shipped,
.hk-badge-partially_shipped,
.hk-badge-refunded,
.hk-badge-partially_refunded {
    color:
        var(--hk-ui-info);

    background:
        var(--hk-ui-info-bg);

    border-color:
        #cedfea;
}


/* ---------- HELP / EMPTY ---------- */

.hk-help {
    margin-top:
        3px;

    color:
        var(--hk-ui-text-soft);

    font-size:
        12px;

    line-height:
        1.5;
}


.hk-empty {
    padding:
        36px 20px;

    color:
        var(--hk-ui-text-soft);

    font-size:
        14px;

    text-align:
        center;
}


/* ---------- SIDEBAR ---------- */

.hk-sidebar {
    border-right:
        1px solid var(--hk-ui-border);
}


.hk-side-section {
    color:
        #8a969f;

    font-size:
        11px;

    font-weight:
        700;

    letter-spacing:
        .06em;
}


.hk-nav-link,
.hk-nav-item {
    border-radius:
        8px;

    transition:
        background .14s ease,
        color .14s ease;
}


.hk-nav-link:hover,
.hk-nav-item:hover {
    background:
        rgba(36, 79, 115, .065);
}


.hk-nav-link.is-active,
.hk-nav-item.is-active {
    color:
        var(--hk-ui-primary);

    background:
        var(--hk-ui-primary-soft);

    font-weight:
        700;
}


/* ---------- AUTH ---------- */

.hk-auth-card,
.hk-login-card,
.hk-register-card {
    border:
        1px solid var(--hk-ui-border);

    border-radius:
        14px;

    box-shadow:
        0 8px 28px rgba(25, 40, 53, .07);
}


.hk-auth-title {
    color:
        var(--hk-ui-text);

    letter-spacing:
        -.025em;
}


.hk-auth-switch {
    color:
        var(--hk-ui-text-soft);
}


.hk-auth-switch a {
    color:
        var(--hk-ui-primary);

    font-weight:
        650;
}


/* ---------- ALERTS ---------- */

.hk-alert {
    padding:
        12px 14px;

    border:
        1px solid var(--hk-ui-border);

    border-radius:
        var(--hk-ui-radius-small);

    font-size:
        13px;

    line-height:
        1.55;
}


.hk-alert-success {
    color:
        var(--hk-ui-success);

    background:
        var(--hk-ui-success-bg);

    border-color:
        #cce8d8;
}


.hk-alert-danger,
.hk-alert-error {
    color:
        var(--hk-ui-danger);

    background:
        var(--hk-ui-danger-bg);

    border-color:
        #ebcaca;
}


/* ---------- PAGINATION ---------- */

.pagination {
    gap:
        5px;
}


.pagination .page-link {
    min-width:
        36px;

    height:
        36px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        #53626e;

    background:
        #fff;

    border:
        1px solid var(--hk-ui-border);

    border-radius:
        7px;
}


.pagination .active .page-link {
    color:
        #fff;

    background:
        var(--hk-ui-primary);

    border-color:
        var(--hk-ui-primary);
}


/* ---------- RESPONSIVE ---------- */

@media (max-width: 900px) {

    .hk-page-header {
        flex-direction:
            column;
    }

    .hk-page-title {
        font-size:
            23px;
    }

    .hk-card-pad {
        padding:
            17px;
    }

}


@media (max-width: 640px) {

    .hk-page-title {
        font-size:
            21px;
    }

    .hk-card {
        border-radius:
            9px;
    }

    .hk-card-pad {
        padding:
            14px;
    }

    .hk-table tbody td,
    .hk-table thead th {
        padding:
            11px 10px;
    }

}


/* =========================================================
   HOJU SHOP PROFESSIONAL UI V1 END
   ========================================================= */

/* =========================================================
   HOJU UI CONSOLIDATION V2 START
   Professional marketplace admin / seller visual system
   ========================================================= */


/* ---------- METRIC CARDS ---------- */

.hk-metrics {
    gap: 14px;
}


.hk-metric {
    position: relative;
    overflow: hidden;

    min-height: 118px;

    padding: 18px;

    background: var(--hk-ui-surface);

    border:
        1px solid
        var(--hk-ui-border);

    border-radius:
        var(--hk-ui-radius);

    box-shadow:
        var(--hk-ui-shadow);

    transition:
        border-color .16s ease,
        box-shadow .16s ease,
        transform .16s ease;
}


.hk-metric:hover {
    transform:
        translateY(-1px);

    border-color:
        var(--hk-ui-border-strong);

    box-shadow:
        var(--hk-ui-shadow-hover);
}


.hk-metric::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 3px;

    background:
        color-mix(
            in srgb,
            var(
                --metric-color,
                var(--hk-ui-primary)
            ) 72%,
            #ffffff
        );
}


.hk-metric-top {
    display: flex;

    justify-content:
        space-between;

    align-items:
        flex-start;

    gap: 12px;
}


.hk-metric-icon {
    width: 36px;
    height: 36px;

    display: flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 36px;

    color:
        color-mix(
            in srgb,
            var(
                --metric-color,
                var(--hk-ui-primary)
            ) 72%,
            #263746
        );

    background:
        color-mix(
            in srgb,
            var(
                --metric-color,
                var(--hk-ui-primary)
            ) 9%,
            #ffffff
        );

    border:
        1px solid
        color-mix(
            in srgb,
            var(
                --metric-color,
                var(--hk-ui-primary)
            ) 15%,
            #e4e9ec
        );

    border-radius: 9px;
}


.hk-metric-label {
    color:
        var(--hk-ui-text-soft);

    font-size: 12px;
    font-weight: 650;

    line-height: 1.4;
}


.hk-metric-value {
    margin-top: 8px;

    color:
        var(--hk-ui-text);

    font-size: 25px;
    font-weight: 750;

    line-height: 1.15;

    letter-spacing:
        -.025em;
}


.hk-metric-foot {
    margin-top: 8px;

    color: #7a8791;

    font-size: 11px;

    line-height: 1.4;
}


/* ---------- SECTION SPACING ---------- */

.hk-section-gap {
    margin-top: 18px;
}


.hk-card-subtitle {
    margin-top: 5px;

    color:
        var(--hk-ui-text-soft);

    font-size: 12px;

    line-height: 1.55;
}


/* ---------- FORM CARDS ---------- */

.hk-form-card {
    padding: 20px;

    background:
        var(--hk-ui-surface);

    border:
        1px solid
        var(--hk-ui-border);

    border-radius:
        var(--hk-ui-radius);

    box-shadow:
        var(--hk-ui-shadow);
}


.hk-form-title {
    margin:
        0 0 16px;

    color:
        var(--hk-ui-text);

    font-size: 17px;

    font-weight: 700;

    letter-spacing:
        -.015em;
}


/* ---------- CHECKBOX / OPTION ---------- */

.hk-check {
    color: #43515d;

    font-size: 13px;

    line-height: 1.5;
}


.hk-check input {
    accent-color:
        var(--hk-ui-primary);
}


/* ---------- INFORMATION BOX ---------- */

.hk-info-box {
    padding:
        14px 16px;

    color: #40505c;

    background:
        var(--hk-ui-surface-soft);

    border:
        1px solid
        var(--hk-ui-border);

    border-radius:
        var(--hk-ui-radius-small);

    font-size: 13px;

    line-height: 1.6;
}


/* ---------- STATUS SURFACES ---------- */

.hk-status-info {
    color:
        var(--hk-ui-info);

    background:
        var(--hk-ui-info-bg);

    border:
        1px solid #cedfea;

    border-radius:
        var(--hk-ui-radius-small);
}


.hk-status-success {
    color:
        var(--hk-ui-success);

    background:
        var(--hk-ui-success-bg);

    border:
        1px solid #cce8d8;

    border-radius:
        var(--hk-ui-radius-small);
}


.hk-status-warning {
    color:
        var(--hk-ui-warning);

    background:
        var(--hk-ui-warning-bg);

    border:
        1px solid #ecdfa9;

    border-radius:
        var(--hk-ui-radius-small);
}


.hk-status-danger {
    color:
        var(--hk-ui-danger);

    background:
        var(--hk-ui-danger-bg);

    border:
        1px solid #ebcaca;

    border-radius:
        var(--hk-ui-radius-small);
}


/* ---------- PRODUCT LIST ---------- */

.hk-product-name {
    color:
        var(--hk-ui-text);

    font-weight: 700;

    line-height: 1.4;
}


.hk-product-sub {
    margin-top: 3px;

    color:
        var(--hk-ui-text-soft);

    font-size: 12px;

    line-height: 1.45;
}


.hk-product-thumb {
    border:
        1px solid
        var(--hk-ui-border);

    border-radius: 8px;

    background: #f7f9fa;
}


/* ---------- SMALL BUTTON ---------- */

.hk-btn-sm {
    min-height: 32px;

    padding:
        6px 10px;

    font-size: 12px;
}


/* ---------- EMPTY STATE ---------- */

.hk-empty-icon {
    margin-bottom: 8px;

    color: #a3adb5;

    font-size: 25px;
}


/* ---------- CHART ---------- */

.hk-chart-box {
    border:
        1px solid
        var(--hk-ui-border);

    border-radius:
        var(--hk-ui-radius-small);

    background:
        var(--hk-ui-surface-soft);
}


.hk-chart-legend {
    color:
        var(--hk-ui-text-soft);

    font-size: 12px;
}


.hk-dot {
    border-radius: 50%;
}


/* ---------- GRID ---------- */

.hk-grid-2 {
    gap: 18px;
}


/* ---------- TABLE ---------- */

.hk-table th {
    color: #566570;
}


.hk-table td strong {
    color:
        var(--hk-ui-text);
}


/* ---------- LINKS ---------- */

.hk-card a:not(.hk-btn),
.hk-table a:not(.hk-btn) {
    text-decoration: none;
}


.hk-card a:not(.hk-btn):hover,
.hk-table a:not(.hk-btn):hover {
    text-decoration: underline;

    text-underline-offset: 2px;
}


/* ---------- RESPONSIVE ---------- */

@media (max-width: 900px) {

    .hk-metric {
        min-height: 108px;
    }

    .hk-metric-value {
        font-size: 23px;
    }

}


@media (max-width: 640px) {

    .hk-metrics {
        gap: 10px;
    }

    .hk-metric {
        padding: 15px;
    }

    .hk-form-card {
        padding: 16px;
    }

}


/* =========================================================
   HOJU UI CONSOLIDATION V2 END
   ========================================================= */


/* =========================================================
   HOJU UI CONSOLIDATION V3 START
   Shared operational surfaces
   ========================================================= */

.hk-panel-soft {
    background:
        var(--hk-ui-surface-soft);

    border:
        1px solid
        var(--hk-ui-border);

    border-radius:
        var(--hk-ui-radius-small);
}


.hk-panel-success {
    color:
        var(--hk-ui-success);

    background:
        var(--hk-ui-success-bg);

    border:
        1px solid
        #cce8d8;

    border-radius:
        var(--hk-ui-radius-small);
}


.hk-panel-warning {
    color:
        var(--hk-ui-warning);

    background:
        var(--hk-ui-warning-bg);

    border:
        1px solid
        #ecdfa9;

    border-radius:
        var(--hk-ui-radius-small);
}


.hk-panel-danger {
    color:
        var(--hk-ui-danger);

    background:
        var(--hk-ui-danger-bg);

    border:
        1px solid
        #ebcaca;

    border-radius:
        var(--hk-ui-radius-small);
}


.hk-panel-info {
    color:
        var(--hk-ui-info);

    background:
        var(--hk-ui-info-bg);

    border:
        1px solid
        #cedfea;

    border-radius:
        var(--hk-ui-radius-small);
}


/* operational cards */

.hk-operation-box {
    padding:
        15px 16px;

    background:
        var(--hk-ui-surface-soft);

    border:
        1px solid
        var(--hk-ui-border);

    border-radius:
        var(--hk-ui-radius-small);
}


.hk-operation-title {
    margin-bottom:
        7px;

    color:
        var(--hk-ui-text);

    font-size:
        13px;

    font-weight:
        700;
}


.hk-operation-text {
    color:
        var(--hk-ui-text-soft);

    font-size:
        12px;

    line-height:
        1.6;
}


/* =========================================================
   HOJU UI CONSOLIDATION V3 END
   ========================================================= */

/* =========================================================
   HOJU SELLER APPLICATION V4 START
   ========================================================= */

.seller-type-card {
    display: block;

    padding: 17px;

    background:
        var(--hk-ui-surface);

    border:
        1px solid
        var(--hk-ui-border);

    border-radius:
        var(--hk-ui-radius);

    cursor: pointer;

    transition:
        border-color .16s ease,
        background .16s ease,
        box-shadow .16s ease,
        transform .16s ease;
}


.seller-type-card:hover {
    transform:
        translateY(-1px);

    border-color:
        var(--hk-ui-border-strong);

    box-shadow:
        var(--hk-ui-shadow);
}


.seller-type-card:has(
    input:checked
) {
    background:
        var(--hk-ui-primary-soft);

    border-color:
        var(--hk-ui-primary);

    box-shadow:
        0 0 0 2px
        rgba(36, 79, 115, .07);
}


.seller-type-card input[type="radio"] {
    accent-color:
        var(--hk-ui-primary);
}


.seller-type-card strong {
    color:
        var(--hk-ui-text);

    font-weight:
        700;
}


.seller-type-card small {
    color:
        var(--hk-ui-text-soft);

    line-height:
        1.5;
}


.hk-seller-section {
    padding:
        18px;

    background:
        var(--hk-ui-surface-soft);

    border:
        1px solid
        var(--hk-ui-border);

    border-radius:
        var(--hk-ui-radius-small);
}


.hk-seller-section-title {
    margin-bottom:
        10px;

    color:
        var(--hk-ui-text);

    font-size:
        14px;

    font-weight:
        700;
}


.hk-seller-note {
    padding:
        12px 14px;

    color:
        var(--hk-ui-text-soft);

    background:
        var(--hk-ui-surface-soft);

    border:
        1px solid
        var(--hk-ui-border);

    border-radius:
        var(--hk-ui-radius-small);

    font-size:
        12px;

    line-height:
        1.6;
}


/* =========================================================
   HOJU SELLER APPLICATION V4 END
   ========================================================= */

/* =========================================================
   HOJU PRODUCT FORM V5 START
   ========================================================= */

.hk-form-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 16px;
}


.hk-field-group {
    min-width: 0;
}


.hk-field-group + .hk-field-group {
    margin-top: 0;
}


.hk-form-card + .hk-form-card {
    margin-top: 18px;
}


.hk-form-card .hk-label,
.hk-form-card > label {
    color:
        #43515d;

    font-size:
        13px;

    font-weight:
        650;

    line-height:
        1.4;
}


.hk-form-card .hk-field {
    background:
        var(--hk-ui-surface);
}


.hk-form-card input[type="file"] {
    padding: 8px;

    background:
        var(--hk-ui-surface-soft);

    border:
        1px dashed
        var(--hk-ui-border-strong);

    border-radius:
        var(--hk-ui-radius-small);
}


.hk-form-card input[type="file"]::file-selector-button {
    margin-right: 10px;

    padding: 7px 11px;

    color:
        #364653;

    background:
        #fff;

    border:
        1px solid
        var(--hk-ui-border-strong);

    border-radius:
        7px;

    cursor: pointer;
}


.hk-form-card input[type="file"]::file-selector-button:hover {
    background:
        var(--hk-ui-surface-soft);
}


.hk-product-form-danger {
    padding:
        12px 14px;

    color:
        var(--hk-ui-danger);

    background:
        var(--hk-ui-danger-bg);

    border:
        1px solid #ebcaca;

    border-radius:
        var(--hk-ui-radius-small);

    font-size:
        12px;

    line-height:
        1.55;
}


.hk-product-form-note {
    padding:
        12px 14px;

    color:
        var(--hk-ui-text-soft);

    background:
        var(--hk-ui-surface-soft);

    border:
        1px solid
        var(--hk-ui-border);

    border-radius:
        var(--hk-ui-radius-small);

    font-size:
        12px;

    line-height:
        1.6;
}


.hk-form-card select.hk-field {
    cursor: pointer;
}


.hk-form-card textarea.hk-field {
    min-height: 110px;
}


@media (max-width: 760px) {

    .hk-form-grid {
        grid-template-columns:
            1fr;
    }

}


/* =========================================================
   HOJU PRODUCT FORM V5 END
   ========================================================= */

/* =========================================================
   HOJU CENTRAL RESPONSIVE V6 START
   Final local-style centralisation
   ========================================================= */


/* ---------- SELLER APPLICATION ---------- */

.seller-type-grid {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        12px;
}


.seller-type-title {
    color:
        var(--hk-ui-text);

    font-weight:
        750;
}


.seller-type-desc {
    margin-top:
        6px;

    color:
        var(--hk-ui-text-soft);

    font-size:
        12px;

    line-height:
        1.6;
}


.verification-box {
    margin-top:
        16px;

    padding:
        14px;

    color:
        var(--hk-ui-text);

    background:
        var(--hk-ui-primary-soft);

    border:
        1px solid
        var(--hk-ui-border);

    border-radius:
        var(--hk-ui-radius-small);

    font-size:
        12px;

    line-height:
        1.7;
}


/* ---------- ADMIN ORDER PAGES ---------- */

.hk-order-page-grid {
    display:
        grid;

    grid-template-columns:
        minmax(0, 2fr)
        minmax(300px, 1fr);

    gap:
        18px;

    align-items:
        start;
}


.hk-order-summary-grid {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        16px;
}


/* Existing order pages still use inline grid declarations.
   These selectors preserve their current responsive behaviour. */

@media (max-width: 980px) {

    .hk-page-header + div[
        style*="grid-template-columns"
    ] {
        grid-template-columns:
            1fr !important;
    }

}


@media (max-width: 650px) {

    .seller-type-grid {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 640px) {

    .hk-card-pad > div[
        style*="grid-template-columns:repeat(2"
    ] {
        grid-template-columns:
            1fr !important;
    }

}


/* =========================================================
   HOJU CENTRAL RESPONSIVE V6 END
   ========================================================= */


/* =========================================================
   HOJU SELLER MESSAGE UI V7 START
   ========================================================= */

.hk-seller-account-strip {
    padding: 0 12px 16px;
}

.hk-msg-widget {
    position: relative;
}

.hk-msg-summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    list-style: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
}

.hk-msg-summary::-webkit-details-marker {
    display: none;
}

.hk-msg-user {
    max-width: 150px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.hk-msg-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--hk-ui-danger, #b94f4f);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.hk-msg-dropdown {
    position: absolute;
    top: calc(100% + 9px);
    left: 0;
    z-index: 5000;
    width: 360px;
    max-width: calc(100vw - 36px);
    max-height: 520px;
    overflow-y: auto;
    padding: 14px;
    background: var(--hk-ui-surface, #fff);
    border: 1px solid var(--hk-ui-border, #dfe5e9);
    border-radius: var(--hk-radius-lg, 14px);
    box-shadow: 0 18px 46px rgba(0,0,0,.14);
}

.hk-msg-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--hk-ui-border, #e2e7eb);
}

.hk-msg-unread-text {
    font-size: 12px;
    font-weight: 700;
}

.hk-msg-item {
    padding: 13px 0;
    border-bottom: 1px solid var(--hk-ui-border, #e2e7eb);
}

.hk-msg-item.is-unread {
    font-weight: 600;
}

.hk-msg-item-head {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.hk-msg-item-head time {
    flex: none;
    font-size: 11px;
    opacity: .6;
}

.hk-msg-body {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.55;
    font-weight: 400;
}

.hk-msg-small-btn {
    margin-top: 8px;
    padding: 5px 9px;
    border: 1px solid var(--hk-ui-border, #dce3e8);
    border-radius: var(--hk-radius-sm, 8px);
    background: var(--hk-ui-surface, #fff);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
}

.hk-msg-reply-box {
    margin-top: 9px;
}

.hk-msg-reply-box summary {
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
}

.hk-msg-reply-box textarea {
    width: 100%;
    margin: 8px 0;
}

.hk-msg-empty {
    padding: 24px 5px;
    text-align: center;
    opacity: .65;
}

.hk-message-admin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.hk-seller-account-conversion {
    margin-top: 24px;
}

@media (max-width: 850px) {

    .hk-message-admin-grid {
        grid-template-columns: 1fr;
    }

    .hk-msg-dropdown {
        width: 320px;
    }
}

/* =========================================================
   HOJU SELLER MESSAGE UI V7 END
   ========================================================= */


/* =========================================================
   HOJU BUSINESS CONVERSION UI V8 START
   ========================================================= */

.hk-conversion-panel {
    margin-bottom: 20px;
    border-left: 4px solid var(--hk-metric-amber);
}

.hk-conversion-title {
    margin-bottom: 8px;
    font-size: 18px;
    font-weight: 800;
}

.hk-conversion-reason {
    margin: 14px 0;
    padding: 12px;
    background: var(--hk-ui-soft);
    border-radius: var(--hk-radius-md);
}

.hk-conversion-reason strong {
    display: block;
    margin-bottom: 5px;
}

.hk-conversion-status {
    margin: 12px 0;
}

.hk-conversion-verification {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin: 14px 0;
}

.hk-business-conversion-action {
    position: relative;
}

.hk-business-conversion-action summary {
    cursor: pointer;
    list-style: none;
}

.hk-business-conversion-action summary::-webkit-details-marker {
    display: none;
}

/* =========================================================
   HOJU BUSINESS CONVERSION UI V8 END
   ========================================================= */


/* ==================================================
   HOJU LANGUAGE GLOBE FINAL OVERRIDE
   ================================================== */

.hk-main-logo-language,
.hk-main-logo-globe,
.hk-language {
    position: relative !important;
    overflow: visible !important;
}

/* 기본 상태 */
#hk-language-menu.hk-language-menu-flags {
    position: absolute !important;
    z-index: 999999 !important;
    pointer-events: none !important;
}

/* 지구본 클릭 후 열린 상태 */
#hk-language-menu.hk-language-menu-flags.is-open {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 999999 !important;
}

/* 국기 버튼이 다른 요소 뒤로 들어가지 않게 */
#hk-language-menu .hk-language-option,
#hk-language-menu .hk-real-flag {
    visibility: visible !important;
    pointer-events: auto !important;
}

/* ==================================================
   END LANGUAGE GLOBE FINAL OVERRIDE
   ================================================== */


/* =========================================================
   HOJU SHOP STRUCTURE THEME V1
   Commerce orange remains unchanged
   ========================================================= */

:root {
    --hk-structure-blue: #075b9b;
    --hk-structure-blue-dark: #043f6f;
    --hk-footer-blue: #033b68;
    --hk-tooltip-blue: #033b68;
}


/* ---------------------------------------------------------
   LANGUAGE HINT
   지구본 아래 위치 유지 + 메뉴바와 겹치지 않게 위로 조금 이동
   --------------------------------------------------------- */

.hk-language-hint {
    transform: translateY(-5px) !important;
    z-index: 999999 !important;
}


/* ---------------------------------------------------------
   TOP STRUCTURE / MAIN MENU BAR
   상품가격, 구매버튼 등의 primary 색상은 건드리지 않음
   --------------------------------------------------------- */

.main-menu,
.main-menu-wrapper,
.header-bottom,
.header-bottom-area,
.header-menu-area,
.navbar-main,
.menu-area {
    background-color: var(--hk-structure-blue) !important;
}


/* 메뉴 링크 */
.main-menu a,
.main-menu-wrapper a,
.header-bottom a,
.header-bottom-area a,
.header-menu-area a {
    color: #fff !important;
}


/* ---------------------------------------------------------
   SEARCH BUTTON ONLY
   --------------------------------------------------------- */

.global-search button[type="submit"],
.global-search .search-btn,
.global-search .btn-search,
.header-search button[type="submit"] {
    background-color: var(--hk-structure-blue) !important;
    border-color: var(--hk-structure-blue) !important;
    color: #fff !important;
}

.global-search button[type="submit"]:hover,
.global-search .search-btn:hover,
.global-search .btn-search:hover,
.header-search button[type="submit"]:hover {
    background-color: var(--hk-structure-blue-dark) !important;
    border-color: var(--hk-structure-blue-dark) !important;
}


/* ---------------------------------------------------------
   FOOTER
   메뉴바보다 더 진한 블루
   --------------------------------------------------------- */

footer,
.footer,
.footer-area,
.main-footer,
.footer-wrapper {
    background-color: var(--hk-footer-blue) !important;
}

footer,
footer a,
footer p,
footer span,
footer li,
.footer,
.footer a,
.footer p,
.footer span,
.footer li {
    color: #fff;
}


/* ---------------------------------------------------------
   BOOTSTRAP / ZCART TOOLTIP
   검정 말풍선 -> 푸터 색상
   --------------------------------------------------------- */

.tooltip-inner {
    background-color: var(--hk-tooltip-blue) !important;
    color: #fff !important;
    white-space: nowrap !important;
    max-width: none !important;
}

/* Tooltip arrow */
.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[x-placement^="top"] .arrow::before {
    border-top-color: var(--hk-tooltip-blue) !important;
}

.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
    border-bottom-color: var(--hk-tooltip-blue) !important;
}

.bs-tooltip-left .arrow::before,
.bs-tooltip-auto[x-placement^="left"] .arrow::before {
    border-left-color: var(--hk-tooltip-blue) !important;
}

.bs-tooltip-right .arrow::before,
.bs-tooltip-auto[x-placement^="right"] .arrow::before {
    border-right-color: var(--hk-tooltip-blue) !important;
}


/* Bootstrap 5 arrow */
.tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: var(--hk-tooltip-blue) !important;
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: var(--hk-tooltip-blue) !important;
}

.tooltip.bs-tooltip-start .tooltip-arrow::before {
    border-left-color: var(--hk-tooltip-blue) !important;
}

.tooltip.bs-tooltip-end .tooltip-arrow::before {
    border-right-color: var(--hk-tooltip-blue) !important;
}


/* =========================================================
   END HOJU SHOP STRUCTURE THEME V1
   ========================================================= */


/* =========================================================
   HOJU SHOP STRUCTURE THEME V2
   ========================================================= */

:root {
    --hk-nav-blue: #075b9b;
    --hk-nav-blue-hover: #064d84;
    --hk-footer-blue: #033b68;
}


/* ===== MAIN DESKTOP NAVIGATION ===== */

.primary-nav {
    background: #075b9b !important;
    background-color: #075b9b !important;
}

.primary-nav .header-nav-items,
.primary-nav .header-nav-items > li {
    background: transparent !important;
}

.primary-nav .menu-link,
.primary-nav .header-nav-items a,
.primary-nav .shale-text,
.primary-nav .shale-text p {
    color: #ffffff !important;
}

.primary-nav .menu-link:hover {
    color: #ffffff !important;
}


/* ===== LANGUAGE HINT =====
   지구본 아래에 유지하면서 6px 위로 이동
*/

.hk-language-hint {
    margin-top: -6px !important;
    z-index: 999999 !important;
}


/* ===== SEARCH BUTTON ===== */

.global-search button[type="submit"],
.global-search .search-btn,
.global-search .btn-search {
    background: #075b9b !important;
    border-color: #075b9b !important;
    color: #ffffff !important;
}


/* ===== FOOTER ===== */

footer,
.footer,
.footer-area,
.footer-content,
.footer-wrapper {
    background-color: #033b68 !important;
}


/* ===== HEADER ICON TOOLTIPS ===== */

.tooltip-inner {
    background-color: #033b68 !important;
    color: #ffffff !important;

    white-space: nowrap !important;
    min-width: max-content !important;
    max-width: none !important;

    padding: 6px 10px !important;
}


/* Bootstrap tooltip arrows */

.bs-tooltip-top .arrow::before,
.tooltip.bs-tooltip-top .tooltip-arrow::before {
    border-top-color: #033b68 !important;
}

.bs-tooltip-bottom .arrow::before,
.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
    border-bottom-color: #033b68 !important;
}

.bs-tooltip-left .arrow::before {
    border-left-color: #033b68 !important;
}

.bs-tooltip-right .arrow::before {
    border-right-color: #033b68 !important;
}


/* =========================================================
   END HOJU SHOP STRUCTURE THEME V2
   ========================================================= */


/* =========================================================
   HOJU SEARCH + FOOTER LOGO FIX
   ========================================================= */

/* ===== SEARCH AREA =====
   검색창 구조색만 메뉴바 블루로 통일
*/

.global-search input,
.global-search input.form-control,
.global-search select,
.global-search .form-control,
.global-search .input-group,
.global-search .input-group-prepend,
.global-search .input-group-append {
    border-color: #075b9b !important;
}

/* 검색창 전체 외곽에 주황색 border가 있는 경우 */
.global-search form,
.global-search .search-box,
.global-search .search-form,
.global-search .search-input-group {
    border-color: #075b9b !important;
}

/* 입력창 focus 시에도 주황색 방지 */
.global-search input:focus,
.global-search select:focus,
.global-search .form-control:focus {
    border-color: #075b9b !important;
    box-shadow: 0 0 0 1px rgba(7,91,155,.12) !important;
}

/* 돋보기 버튼 */
.global-search button[type="submit"],
.global-search .search-btn,
.global-search .btn-search {
    background: #075b9b !important;
    border-color: #075b9b !important;
    color: #fff !important;
}


/* ===== FOOTER LOGO =====
   짙은 푸터에서도 원본 로고가 선명하게 보이도록
   로고 뒤에 작은 밝은 패널만 배치
*/

.footer-brand-info .footer-logo {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    background: rgba(255,255,255,.96) !important;

    padding: 7px 11px !important;
    border-radius: 7px !important;

    margin-bottom: 8px !important;

    box-shadow:
        0 1px 4px rgba(0,0,0,.10) !important;
}

.footer-brand-info .footer-logo img {
    display: block !important;
    width: auto !important;
    height: auto !important;
    max-width: 220px !important;
}


/* =========================================================
   END HOJU SEARCH + FOOTER LOGO FIX
   ========================================================= */


/* =========================================================
   HOJU FOOTER LOGO SPACING FIX
   ========================================================= */

.footer-brand-info .footer-logo {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    background: rgba(255,255,255,.97) !important;

    /* 박스를 로고에 더 밀착 */
    padding: 8px 14px !important;

    border-radius: 8px !important;

    /* 아래 문구와 간격 */
    margin: 0 0 10px 0 !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;

    box-shadow:
        0 1px 4px rgba(0,0,0,.08) !important;
}

.footer-brand-info .footer-logo a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.footer-brand-info .footer-logo img {
    display: block !important;

    width: auto !important;
    height: auto !important;

    max-width: 215px !important;
    max-height: 58px !important;

    margin: 0 !important;
    padding: 0 !important;

    object-fit: contain !important;
}

/* 로고 바로 아래 슬로건 간격 */
.footer-brand-info .footer-slogan {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
}

/* =========================================================
   END HOJU FOOTER LOGO SPACING FIX
   ========================================================= */

/* =========================================================
   PRODUCT DETAIL GALLERY + PROMOTION PRICE
   ========================================================= */

.hk-product-gallery {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

.hk-product-thumbs {
    display: flex;
    flex-direction: column;
    gap: 9px;
    max-height: 620px;
    overflow-y: auto;
    scrollbar-width: thin;
}

.hk-product-thumb-button {
    width: 76px;
    height: 76px;
    padding: 3px;
    border: 1px solid #d6dee6;
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.hk-product-thumb-button img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.hk-product-thumb-button:hover,
.hk-product-thumb-button.is-active {
    border-color: #075b9b;
    box-shadow: 0 0 0 2px rgba(7,91,155,.12);
}

.hk-detail-main-image {
    min-height: 440px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
}

.hk-detail-main-image img {
    width: 100%;
    max-height: 620px;
    display: block;
    object-fit: contain;
}

.hk-detail-main-image.hk-no-image {
    color: #fff;
    font-weight: 800;
    font-size: 28px;
    background: #075b9b;
}

.hk-price-regular {
    color: #222;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    margin-bottom: 5px;
    font-size: 18px;
}

.hk-price-discount-row {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.hk-price-discount-rate {
    font-weight: 800;
    color: #e56a16;
    font-size: 18px;
}

.hk-price-sale {
    color: #e56a16;
    font-size: 30px;
    font-weight: 800;
}

.hk-event-price-note {
    display: inline-block;
    margin-top: 7px;
    padding: 5px 10px;
    border-radius: 20px;
    background: #fff1e5;
    color: #d7600a;
    font-weight: 700;
    font-size: 13px;
}

@media (max-width: 760px) {

    .hk-product-gallery {
        grid-template-columns: 1fr;
    }

    .hk-product-thumbs {
        order: 2;
        flex-direction: row;
        max-height: none;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 4px;
    }

    .hk-product-thumb-button {
        flex: 0 0 70px;
        width: 70px;
        height: 70px;
    }

    .hk-detail-main-image {
        order: 1;
        min-height: 300px;
    }
}

/* =========================================================
   END PRODUCT DETAIL GALLERY + PROMOTION PRICE
   ========================================================= */


/* =========================================================
   HOJU HOME AUTO PRODUCT SECTIONS
   ========================================================= */

.hk-home-auto-products {
    padding: 18px 0 28px;
}

.hk-home-product-section {
    margin: 34px 0;
}

.hk-home-product-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 15px;
}

.hk-home-product-head h2 {
    margin: 0;
    font-size: 24px;
    font-weight: 800;
    color: #17324a;
}

.hk-home-product-subtitle {
    margin-top: 4px;
    color: #6b7a88;
    font-size: 13px;
}

.hk-home-product-slider-shell {
    position: relative;
}

.hk-home-product-slider {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 2px 1px 8px;
}

.hk-home-product-slider::-webkit-scrollbar {
    display: none;
}

.hk-home-product-card {
    flex: 0 0 220px;
    scroll-snap-align: start;
    display: block;
    background: #fff;
    border: 1px solid #e1e7ec;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition:
        transform .16s ease,
        box-shadow .16s ease,
        border-color .16s ease;
}

.hk-home-product-card:hover {
    transform: translateY(-2px);
    border-color: #c5d3de;
    box-shadow: 0 8px 22px rgba(21,52,76,.10);
}

.hk-home-product-image-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    background: #f5f7f9;
    overflow: hidden;
}

.hk-home-product-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}

.hk-home-product-badge {
    position: absolute;
    top: 9px;
    left: 9px;
    padding: 5px 9px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 800;
}

.hk-home-product-badge.hk-event {
    background: #fff0e5;
    color: #d7600a;
}

.hk-home-product-badge.hk-discount {
    background: #e85f14;
    color: #fff;
}

.hk-home-product-body {
    padding: 12px 13px 14px;
}

.hk-home-product-shop {
    color: #748391;
    font-size: 11px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hk-home-product-name {
    margin-top: 4px;
    min-height: 42px;
    line-height: 1.45;
    font-weight: 700;
    color: #21384b;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hk-home-product-old-price {
    margin-top: 8px;
    color: #333;
    font-size: 13px;
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
}

.hk-home-product-price {
    margin-top: 7px;
    color: #e56a16;
    font-size: 20px;
    font-weight: 800;
}

.hk-home-product-old-price + .hk-home-product-price {
    margin-top: 1px;
}

.hk-home-product-sold {
    margin-top: 5px;
    color: #788794;
    font-size: 11px;
}

.hk-home-product-arrow {
    position: absolute;
    z-index: 5;
    top: 42%;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: #075b9b;
    color: #fff;
    font-size: 24px;
    line-height: 32px;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0,0,0,.16);
}

.hk-home-product-arrow.prev {
    left: -13px;
}

.hk-home-product-arrow.next {
    right: -13px;
}

@media (max-width: 767px) {

    .hk-home-product-section {
        margin: 26px 0;
    }

    .hk-home-product-head h2 {
        font-size: 20px;
    }

    .hk-home-product-card {
        flex-basis: 168px;
    }

    .hk-home-product-arrow {
        display: none;
    }
}

/* =========================================================
   END HOJU HOME AUTO PRODUCT SECTIONS
   ========================================================= */


/* =========================================================
   REAL PRODUCTS INSIDE ORIGINAL HOME SLIDERS
   ========================================================= */

.hk-real-product,
.hk-real-featured-product {
    position: relative;
}

.hk-real-product-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    padding: 4px 8px;
    border-radius: 16px;
    background: #e56a16;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.hk-real-product-shop {
    margin-top: 4px;
    color: #778591;
    font-size: 11px;
}

.hk-old-price {
    text-decoration: line-through;
    text-decoration-thickness: 1.5px;
    margin-right: 6px;
}

.hk-real-featured-product figure img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* =========================================================
   END REAL PRODUCTS INSIDE ORIGINAL HOME SLIDERS
   ========================================================= */


/* =========================================================
   ADMIN / HOME RECOMMENDED PRODUCT
   ========================================================= */

.hk-real-recommended-product img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.hk-real-recommended-summary {
    padding: 10px 0;
    border-bottom: 1px solid #e6ebef;
}

/* =========================================================
   END ADMIN / HOME RECOMMENDED PRODUCT
   ========================================================= */

/* =========================================================
   FEATURED SHOP
   ========================================================= */

.hk-real-featured-shop a {
    display: block;
    text-decoration: none;
    color: inherit;
    text-align: center;
}

.hk-real-featured-shop img {
    width: 100%;
    height: 110px;
    object-fit: contain;
    background: #fff;
}

.hk-featured-shop-name {
    margin-top: 7px;
    font-size: 12px;
    font-weight: 700;
    color: #334a5d;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hk-real-featured-shop:hover .hk-featured-shop-name {
    color: #075b9b;
}

/* =========================================================
   END FEATURED SHOP
   ========================================================= */


/* =========================================================
   HOJU FEATURED SHOP UI V2
   Uses existing Hoju structural blue + commerce orange
   ========================================================= */

/* ---------- Admin ---------- */

.hk-featured-shop-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;

    background: rgba(7, 91, 155, .10);
    color: #075b9b;

    border: 1px solid rgba(7, 91, 155, .22);

    padding: 5px 9px;
    border-radius: 999px;

    font-size: 12px;
    font-weight: 700;
}

.hk-featured-shop-badge i {
    color: #e56a16;
}

.hk-featured-shop-normal {
    display: inline-flex;
    align-items: center;

    background: #f3f6f8;
    color: #657582;

    border: 1px solid #dbe3e9;

    padding: 5px 9px;
    border-radius: 999px;

    font-size: 12px;
    font-weight: 600;
}


/* ---------- Home ---------- */

.hk-real-featured-shop {
    position: relative;
}

.hk-real-featured-shop .hk-featured-shop-link {
    display: block;

    padding: 8px;

    background: #fff;

    border: 1px solid #e0e7ec;
    border-radius: 10px;

    text-decoration: none;
    color: inherit;

    transition:
        transform .16s ease,
        box-shadow .16s ease,
        border-color .16s ease;
}

.hk-real-featured-shop .hk-featured-shop-link:hover {
    transform: translateY(-2px);

    border-color: rgba(7, 91, 155, .35);

    box-shadow:
        0 7px 18px
        rgba(4, 63, 111, .10);
}

.hk-featured-shop-logo-box {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 105px;

    padding: 10px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7fafc 100%
        );

    border-radius: 7px;
    overflow: hidden;
}

.hk-featured-shop-logo-box img {
    width: 100%;
    height: 100%;

    object-fit: contain;
}

.hk-featured-shop-crown {
    position: absolute;
    top: 7px;
    right: 7px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 25px;
    height: 25px;

    border-radius: 50%;

    background: #075b9b;
    color: #fff;

    box-shadow:
        0 2px 6px
        rgba(4, 63, 111, .20);

    font-size: 12px;
}

.hk-featured-shop-crown i {
    color: #fff;
}

.hk-featured-shop-name {
    margin-top: 8px;

    color: #173b57;

    font-size: 13px;
    font-weight: 700;

    text-align: center;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hk-featured-shop-label {
    margin-top: 3px;

    color: #e56a16;

    font-size: 11px;
    font-weight: 700;

    text-align: center;
}

.hk-real-featured-shop:hover
.hk-featured-shop-name {
    color: #075b9b;
}


/* ---------- Mobile ---------- */

@media (max-width: 767px) {

    .hk-featured-shop-logo-box {
        height: 90px;
    }

    .hk-featured-shop-name {
        font-size: 12px;
    }

}


/* =========================================================
   END HOJU FEATURED SHOP UI V2
   ========================================================= */


/* =========================================================
   SELLER SAFETY / BUYER DELIVERY NOTICE
   ========================================================= */

#hk-fraud-prevention-terms,
#hk-seller-shipping-rules,
.hk-buyer-delivery-notice {
    border: 1px solid rgba(7,91,155,.15);
}

#hk-fraud-prevention-terms .hk-form-title,
#hk-seller-shipping-rules .hk-form-title {
    color: #075b9b;
}

#hk-fraud-prevention-terms strong,
#hk-seller-shipping-rules strong {
    color: #173b57;
}

.hk-buyer-delivery-notice {
    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f7fafc 100%
        );
}

/* =========================================================
   END SELLER SAFETY / BUYER DELIVERY NOTICE
   ========================================================= */