: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
   ========================================================= */


/* =========================================================
   BUSINESS CONTRACT LANGUAGE
   ========================================================= */

.hk-contract-lang-option {
    display:inline-flex;
    align-items:center;
    gap:6px;

    padding:7px 13px;

    border:1px solid #d6e0e7;
    border-radius:20px;

    background:#fff;
    color:#50606c;

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

    cursor:pointer;
}

.hk-contract-lang-option:has(input:checked) {
    border-color:#075b9b;
    background:#075b9b;
    color:#fff;
}

.hk-contract-lang-option input {
    margin:0;
}

/* =========================================================
   END BUSINESS CONTRACT LANGUAGE
   ========================================================= */


/* =========================================================
   REGISTER CONSENT UI
   ========================================================= */

.hk-register-consent-row {
    display:flex;
    align-items:flex-start;
    gap:8px;

    margin:8px 0;

    color:#50606c;
    font-size:12px;
    line-height:1.6;

    cursor:pointer;
}

.hk-register-consent-row input {
    flex:0 0 auto;
    margin-top:3px;
}

.hk-register-consent-row a {
    color:#075b9b;
    font-weight:700;
}

.hk-register-consent-row strong {
    color:#173b57;
}

/* =========================================================
   END REGISTER CONSENT UI
   ========================================================= */



/* =========================================================
   SELLER APPLICATION LEGAL + VERIFICATION V2
   ========================================================= */

.hk-apply-section {
    margin-top: 22px;
    padding: 20px;
    border: 1px solid rgba(35, 95, 140, .16);
    border-radius: 12px;
    background: #fff;
}

.hk-apply-section-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.hk-apply-section-number {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eef6fc;
    color: #1d68a0;
    font-size: 18px;
    font-weight: 800;
}

.hk-apply-section-head h3 {
    margin: 1px 0 4px;
    color: #143b59;
    font-size: 18px;
    font-weight: 800;
}

.hk-apply-section-head p {
    margin: 0;
    color: #71818d;
    font-size: 12px;
    line-height: 1.65;
}

.hk-required {
    color: #dc3545;
    font-size: .88em;
    font-weight: 700;
}


/* Business contract */

.hk-business-contract-panel {
    background: linear-gradient(
        180deg,
        #fbfdff 0%,
        #f7fbfe 100%
    );
}

.hk-business-contract-card {
    padding: 18px;
    border: 1px solid rgba(29, 104, 160, .15);
    border-radius: 10px;
    background: #fff;
}

.hk-contract-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e7edf1;
}

.hk-contract-title {
    color: #113a59;
    font-size: 17px;
    font-weight: 800;
}

.hk-contract-version {
    margin-top: 4px;
    color: #768791;
    font-size: 11px;
}

.hk-contract-links {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
}

.hk-contract-commission {
    margin-top: 15px;
    padding: 15px 17px;
    border-radius: 9px;
    background: #eef6fc;
}

.hk-contract-commission-label {
    color: #5d7382;
    font-size: 12px;
    font-weight: 700;
}

.hk-contract-commission-value {
    margin-top: 2px;
    color: #185f91;
    font-size: 27px;
    line-height: 1.2;
    font-weight: 900;
}

.hk-contract-commission-text {
    margin-top: 6px;
    color: #607482;
    font-size: 11px;
    line-height: 1.65;
}

.hk-contract-language {
    margin-top: 17px;
}

.hk-contract-language-options {
    display: flex;
    gap: 20px;
    margin-top: 8px;
}

.hk-contract-language-options label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    cursor: pointer;
}

.hk-contract-signer {
    margin-top: 18px;
}

.hk-field-label {
    display: block;
    margin-bottom: 7px;
    color: #263e50;
    font-size: 13px;
    font-weight: 700;
}

.hk-contract-legal-notice {
    margin-top: 11px;
    padding: 13px 15px;
    border-left: 3px solid #2878b1;
    border-radius: 6px;
    background: #f6f9fb;
    color: #5e7180;
    font-size: 11px;
    line-height: 1.7;
}

.hk-contract-legal-notice strong {
    display: block;
    margin-bottom: 4px;
    color: #24465e;
}

.hk-contract-legal-notice p {
    margin: 4px 0;
}

.hk-contract-accept {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 16px;
    padding: 14px;
    border: 1px solid rgba(29, 104, 160, .16);
    border-radius: 8px;
    background: #fbfdff;
    cursor: pointer;
}

.hk-contract-accept input {
    margin-top: 3px;
}


/* Final verification */

.hk-final-verification {
    background: #f9fcfe;
}

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

.hk-verification-card {
    padding: 17px;
    border: 1px solid rgba(28, 93, 140, .14);
    border-radius: 10px;
    background: #fff;
}

.hk-verification-card-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #143a58;
    font-size: 15px;
}

.hk-verification-icon {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #edf6fc;
    color: #2472aa;
    font-size: 16px;
}

.hk-verification-help {
    margin-top: 7px;
    color: #758590;
    font-size: 11px;
    line-height: 1.55;
}

.hk-current-email {
    margin-top: 8px;
    color: #324c5e;
    font-size: 12px;
    font-weight: 700;
}

.hk-verification-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 13px;
}

.hk-verification-code {
    width: 165px;
    min-width: 140px;
}

.hk-verification-note {
    margin-top: 9px;
    color: #81909a;
    font-size: 10px;
}

.hk-verification-success {
    margin-top: 12px;
    color: #17834c;
    font-size: 13px;
    font-weight: 800;
}


/* Responsive */

@media (max-width: 760px) {

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

    .hk-contract-title-row {
        align-items: flex-start;
        flex-direction: column;
    }

    .hk-contract-links {
        width: 100%;
    }

    .hk-verification-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .hk-verification-code {
        width: 100%;
    }

    .hk-verification-actions .hk-btn {
        width: 100%;
    }
}



/* =========================================================
   SELLER APPLY CONTRACT / VERIFICATION FIX V3
   ========================================================= */

#hk-electronic-contract-effect-notice {
    box-sizing: border-box;
}

#hk-final-seller-verification {
    clear: both;
    width: 100%;
    box-sizing: border-box;
    margin-top: 22px;
    margin-bottom: 18px;
}

#hk-final-seller-verification .hk-card-pad,
#hk-final-seller-verification .verification-box {
    box-sizing: border-box;
}

@media (max-width: 767px) {

    #hk-final-seller-verification {
        margin-top: 16px;
    }

    #hk-electronic-contract-effect-notice {
        font-size: 11px;
    }
}



/* =========================================================
   SELLER HEADER MESSAGE DROPDOWN V2
   ========================================================= */

.hk-header-message-wrap {
    position:relative;
    display:inline-flex;
    align-items:center;
    vertical-align:middle;
    margin-left:5px;
}

.hk-header-message-details {
    position:relative;
    display:inline-flex;
}

.hk-header-message-details > summary {
    list-style:none;
}

.hk-header-message-details > summary::-webkit-details-marker {
    display:none;
}

.hk-header-message-badge {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:21px;
    height:21px;
    box-sizing:border-box;
    padding:0 6px;
    border-radius:999px;
    background:#d93025;
    color:#fff;
    font-size:11px;
    line-height:1;
    font-weight:900;
    cursor:pointer;
    box-shadow:
        0 2px 6px
        rgba(120,15,15,.25);
}

.hk-header-message-badge:hover {
    filter:brightness(.95);
}

.hk-header-message-dropdown {
    position:absolute;
    top:calc(100% + 10px);
    right:0;
    z-index:99999;
    width:370px;
    max-width:
        min(
            370px,
            calc(100vw - 24px)
        );
    max-height:500px;
    overflow-y:auto;
    box-sizing:border-box;
    padding:10px;
    border:1px solid #d7e2e8;
    border-radius:12px;
    background:#fff;
    box-shadow:
        0 14px 38px
        rgba(22,48,65,.19);
    text-align:left;
}

.hk-header-message-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:7px 8px 11px;
    border-bottom:1px solid #e6ecef;
    color:#193b53;
}

.hk-header-message-head strong {
    font-size:14px;
}

.hk-header-message-head span {
    font-size:11px;
    color:#d93025;
    font-weight:850;
}

.hk-header-message-list {
    padding-top:4px;
}

.hk-header-message-item {
    margin-top:7px;
    padding:12px;
    border:1px solid #e2e9ed;
    border-radius:9px;
    background:#fafcfd;
}

.hk-header-message-item.is-unread {
    border-color:#bfd9e8;
    background:#f0f8fc;
}

.hk-header-message-item-head {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
}

.hk-header-message-item-head strong {
    display:block;
    min-width:0;
    font-size:12px;
    line-height:1.45;
    color:#203f54;
    overflow-wrap:anywhere;
}

.hk-header-message-item-head time {
    flex:0 0 auto;
    font-size:10px;
    color:#8a98a1;
    white-space:nowrap;
}

.hk-header-message-body {
    margin-top:8px;
    font-size:12px;
    line-height:1.6;
    color:#526773;
    overflow-wrap:anywhere;
}

.hk-header-message-actions {
    display:flex;
    align-items:flex-start;
    gap:7px;
    margin-top:10px;
}

.hk-header-message-actions form {
    margin:0;
}

.hk-header-message-actions button,
.hk-header-message-reply > summary {
    display:inline-flex;
    justify-content:center;
    align-items:center;
    min-height:29px;
    box-sizing:border-box;
    padding:0 10px;
    border:1px solid #c8d6de;
    border-radius:7px;
    background:#fff;
    color:#315268;
    font-size:11px;
    line-height:1;
    font-weight:800;
    cursor:pointer;
}

.hk-header-message-reply {
    flex:1;
}

.hk-header-message-reply > summary {
    width:max-content;
    list-style:none;
}

.hk-header-message-reply >
summary::-webkit-details-marker {
    display:none;
}

.hk-header-message-reply form {
    margin-top:8px;
}

.hk-header-message-reply textarea {
    display:block;
    width:100%;
    min-height:72px;
    box-sizing:border-box;
    padding:8px;
    border:1px solid #ccd8df;
    border-radius:7px;
    background:#fff;
    color:#314957;
    font:inherit;
    font-size:12px;
    resize:vertical;
}

.hk-header-message-reply form button {
    margin-top:6px;
    background:#075b9b;
    border-color:#075b9b;
    color:#fff;
}

.hk-header-message-empty {
    padding:20px 10px;
    text-align:center;
    color:#84939c;
    font-size:12px;
}

@media(max-width:650px) {

    .hk-header-message-dropdown {
        position:fixed;
        top:60px;
        right:10px;
        left:10px;
        width:auto;
        max-width:none;
        max-height:
            calc(100vh - 80px);
    }
}



/* =========================================================
   HOME SELLER ACCOUNT MESSAGE ALIGN V1
   ========================================================= */

.hk-home-seller-account {
    display:inline-flex;
    align-items:center;
    gap:5px;
}

.hk-home-seller-account > a {
    display:inline-flex;
    align-items:center;
    gap:5px;
}



/* =========================================================
   HOJU UNIFIED HEADER V1
   ========================================================= */

.hk-unified-header {
    position:relative;
    z-index:900;
    width:100%;
    background:#fff;
    border-bottom:1px solid #dde5e9;
}

.hk-unified-header-main {
    width:100%;
    background:#fff;
}

.hk-unified-header-inner {
    width:min(1480px,calc(100% - 40px));
    min-height:88px;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
}

.hk-unified-brand-area {
    display:flex;
    align-items:center;
    gap:24px;
    min-width:0;
}

.hk-unified-logo {
    display:flex;
    align-items:center;
    flex:0 0 auto;
    text-decoration:none;
}

.hk-unified-logo img {
    display:block;
    width:auto;
    height:52px;
    max-width:230px;
    object-fit:contain;
}

.hk-unified-language {
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
}

.hk-unified-account-area {
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:9px;
    margin-left:auto;
}

.hk-header-member-name {
    display:inline-flex;
    align-items:center;
    min-height:40px;
    max-width:190px;
    padding:0 6px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:#314957;
    font-size:13px;
    font-weight:850;
    text-decoration:none;
}

.hk-header-member-name:hover {
    color:#075b9b;
}

.hk-header-icon {
    position:relative;
    width:40px;
    height:40px;
    box-sizing:border-box;
    padding:0;
    border:0;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background:transparent;
    color:#304c5e;
    font-size:18px;
    line-height:1;
    cursor:pointer;
    text-decoration:none;
    transition:
        background .16s ease,
        color .16s ease,
        transform .16s ease;
}

.hk-header-icon:hover,
.hk-header-icon:focus {
    background:#eef5f8;
    color:#075b9b;
    transform:translateY(-1px);
}

.hk-header-icon i {
    pointer-events:none;
}

.hk-header-logout-form {
    display:inline-flex;
    align-items:center;
    margin:0;
    padding:0;
}

.hk-header-tooltip {
    position:absolute;
    left:50%;
    top:calc(100% + 8px);
    z-index:1200;
    transform:
        translateX(-50%)
        translateY(-3px);
    padding:6px 9px;
    border-radius:6px;
    background:#263945;
    color:#fff;
    font-size:11px;
    line-height:1;
    font-weight:750;
    white-space:nowrap;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:
        opacity .15s ease,
        visibility .15s ease,
        transform .15s ease;
}

.hk-header-tooltip::before {
    content:"";
    position:absolute;
    left:50%;
    bottom:100%;
    transform:translateX(-50%);
    border:5px solid transparent;
    border-bottom-color:#263945;
}

.hk-header-icon:hover .hk-header-tooltip,
.hk-header-icon:focus .hk-header-tooltip {
    opacity:1;
    visibility:visible;
    transform:
        translateX(-50%)
        translateY(0);
}

.hk-header-count {
    position:absolute;
    top:1px;
    right:-1px;
    min-width:17px;
    height:17px;
    padding:0 4px;
    box-sizing:border-box;
    border-radius:999px;
    background:#d74343;
    color:#fff;
    font-size:10px;
    line-height:17px;
    font-weight:850;
    text-align:center;
}

.hk-unified-nav {
    width:100%;
    background:#17324d;
    box-shadow:
        0 2px 7px
        rgba(15,45,65,.08);
}

.hk-unified-nav-inner {
    width:min(1480px,calc(100% - 40px));
    min-height:62px;
    margin:0 auto;
    display:flex;
    align-items:stretch;
}

.hk-unified-nav-item {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:62px;
    box-sizing:border-box;
    padding:0 15px;
    color:#fff;
    font-size:13px;
    line-height:1;
    font-weight:760;
    white-space:nowrap;
    text-decoration:none;
    transition:
        background .16s ease,
        color .16s ease;
}

.hk-unified-nav-item:hover,
.hk-unified-nav-item:focus {
    color:#fff;
    background:rgba(255,255,255,.10);
}

.hk-nav-category {
    padding-left:18px;
    padding-right:22px;
    font-weight:850;
}

.hk-unified-nav-spacer {
    flex:1 1 auto;
}

.hk-nav-seller {
    color:#dff3e9;
    font-weight:800;
}

.hk-nav-recommended {
    color:#ffe59b;
    font-weight:850;
}

.hk-nav-recommended i,
.hk-nav-seller i {
    font-size:15px;
}


/* Existing language widget:
   layout adjustment only.
   Logic is untouched. */

.hk-unified-language .hk-language {
    display:flex;
    align-items:center;
    margin:0;
}

.hk-unified-language .hk-language-button {
    display:flex;
    align-items:center;
    justify-content:center;
}


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

@media(max-width:1100px) {

    .hk-unified-nav-inner {
        overflow-x:auto;
        scrollbar-width:none;
    }

    .hk-unified-nav-inner::-webkit-scrollbar {
        display:none;
    }

    .hk-unified-nav-spacer {
        display:none;
    }

    .hk-unified-nav-item {
        flex:0 0 auto;
    }
}


@media(max-width:760px) {

    .hk-unified-header-inner {
        width:calc(100% - 22px);
        min-height:72px;
        gap:10px;
    }

    .hk-unified-brand-area {
        gap:12px;
    }

    .hk-unified-logo img {
        height:40px;
        max-width:165px;
    }

    .hk-unified-account-area {
        gap:2px;
    }

    .hk-header-icon {
        width:34px;
        height:34px;
        font-size:16px;
    }

    .hk-header-member-name {
        display:none;
    }

    .hk-unified-nav-inner {
        width:100%;
        min-height:54px;
    }

    .hk-unified-nav-item {
        min-height:54px;
        padding:0 12px;
        font-size:12px;
    }
}


@media(max-width:480px) {

    .hk-unified-logo img {
        height:36px;
        max-width:145px;
    }

    .hk-unified-language {
        transform:scale(.92);
        transform-origin:left center;
    }

    .hk-header-icon {
        width:32px;
        height:32px;
    }
}



/* =========================================================
   HOME SLIDER SEARCH V1
   ========================================================= */

.hk-home-slider-search-host {
    position:relative;
}

.hk-home-slider-search {
    position:absolute;
    left:50%;
    bottom:34px;
    z-index:80;
    width:min(620px,calc(100% - 60px));
    transform:translateX(-50%);
}

.hk-home-slider-search-form {
    width:100%;
    margin:0;
}

.hk-home-slider-search-input-wrap {
    position:relative;
    width:100%;
    min-height:48px;
    display:flex;
    align-items:center;
    padding:5px;
    box-sizing:border-box;
    border:1px solid rgba(255,255,255,.85);
    border-radius:10px;
    background:rgba(255,255,255,.96);
    box-shadow:
        0 7px 24px
        rgba(15,40,60,.20);
    backdrop-filter:blur(5px);
}

.hk-home-search-leading-icon {
    flex:0 0 auto;
    margin-left:12px;
    margin-right:4px;
    color:#6f818c;
    font-size:15px;
}

.hk-home-slider-search-input {
    min-width:0;
    flex:1 1 auto;
    height:38px;
    padding:0 10px;
    border:0;
    outline:0;
    background:transparent;
    color:#263c49;
    font-size:14px;
}

.hk-home-slider-search-input::placeholder {
    color:#8b9aa3;
}

.hk-home-slider-search-button {
    flex:0 0 auto;
    height:38px;
    min-width:82px;
    padding:0 15px;
    border:0;
    border-radius:7px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    background:#17324d;
    color:#fff;
    font-size:13px;
    font-weight:800;
    cursor:pointer;
    transition:
        background .16s ease,
        transform .16s ease;
}

.hk-home-slider-search-button:hover,
.hk-home-slider-search-button:focus {
    background:#244c6d;
    transform:translateY(-1px);
}

@media(max-width:760px) {

    .hk-home-slider-search {
        bottom:22px;
        width:calc(100% - 30px);
    }

    .hk-home-slider-search-input-wrap {
        min-height:44px;
        padding:4px;
        border-radius:8px;
    }

    .hk-home-slider-search-input {
        height:36px;
        font-size:13px;
    }

    .hk-home-slider-search-button {
        height:36px;
        min-width:46px;
        padding:0 12px;
    }

    .hk-home-slider-search-button span {
        display:none;
    }
}

@media(max-width:480px) {

    .hk-home-slider-search {
        bottom:14px;
        width:calc(100% - 20px);
    }

    .hk-home-search-leading-icon {
        display:none;
    }

    .hk-home-slider-search-input {
        padding-left:10px;
    }
}



/* =========================================================
   HEADER MENU VISUAL FIX V1
   ========================================================= */


/* Globe:
   position only.
   Translation/flag logic untouched. */

.hk-unified-language {
    position:relative;
    left:-50px;
}


/* Category must use the same background as the nav bar. */

.hk-unified-nav .hk-nav-category {
    appearance:none;
    -webkit-appearance:none;
    border:0 !important;
    outline:0;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#fff !important;
    font-family:inherit;
    cursor:pointer;
}

.hk-unified-nav .hk-nav-category:hover,
.hk-unified-nav .hk-nav-category:focus {
    background:rgba(255,255,255,.10) !important;
    color:#fff !important;
}


/* Restored original ZCart menu icons */

.hk-unified-nav-item .menu-icon {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    margin-right:1px;
    color:inherit;
    font-size:14px;
}


/* No visual gap where duplicate seller menu existed */

.hk-unified-nav-spacer {
    flex:1 1 auto;
}


/* Recommended item */

.hk-nav-recommended {
    color:#fff !important;
    font-weight:850;
}

.hk-nav-recommended:hover,
.hk-nav-recommended:focus {
    color:#fff !important;
}


/* Globe mobile adjustment:
   don't force a full -50px shift on very narrow screens. */

@media(max-width:760px) {

    .hk-unified-language {
        left:-20px;
    }
}



/* =========================================================
   HEADER MENU FINAL VISUAL V2
   ========================================================= */


/* ---------------------------------------------------------
   LANGUAGE GLOBE
   Position only.
   Globe / flags / translation logic remains untouched.
   --------------------------------------------------------- */

.hk-unified-language {
    position:relative !important;
    left:auto !important;
    margin:0 !important;
    transform:translateX(-30px) !important;
}


/* ---------------------------------------------------------
   ENTIRE MENU BAR: WHITE TEXT / ICONS
   --------------------------------------------------------- */

.hk-unified-nav,
.hk-unified-nav a,
.hk-unified-nav button,
.hk-unified-nav span,
.hk-unified-nav i,
.hk-unified-nav-item,
.hk-unified-nav-item:link,
.hk-unified-nav-item:visited,
.hk-unified-nav-item:hover,
.hk-unified-nav-item:focus {
    color:#ffffff !important;
}


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

.hk-unified-nav {
    position:relative;
}

.hk-unified-nav-inner {
    position:relative;
}

.hk-nav-category {
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#fff !important;
}

.hk-nav-category:hover,
.hk-nav-category:focus,
.hk-nav-category[aria-expanded="true"] {
    background:rgba(255,255,255,.10) !important;
}


/* ---------------------------------------------------------
   CATEGORY DROPDOWN
   --------------------------------------------------------- */

.hk-category-dropdown {
    position:absolute;
    top:100%;
    left:0;
    z-index:1500;

    width:min(760px,calc(100vw - 40px));

    padding:16px;

    box-sizing:border-box;

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

    gap:5px 8px;

    border:
        1px solid
        rgba(20,60,90,.13);

    border-radius:
        0 0 10px 10px;

    background:#ffffff;

    box-shadow:
        0 14px 30px
        rgba(12,40,60,.18);
}

.hk-category-dropdown[hidden] {
    display:none !important;
}

.hk-category-dropdown a {
    display:flex;

    align-items:center;

    min-height:40px;

    padding:8px 12px;

    border-radius:6px;

    color:#263f50 !important;

    font-size:13px;

    font-weight:650;

    line-height:1.3;

    text-decoration:none;
}

.hk-category-dropdown a:hover,
.hk-category-dropdown a:focus {
    color:#075b9b !important;

    background:#eef5f8;
}


/* ---------------------------------------------------------
   ZCART MENU ICONS
   --------------------------------------------------------- */

.hk-unified-nav-item .menu-icon {
    color:#ffffff !important;
    font-size:14px;
}


/* ---------------------------------------------------------
   RECOMMENDED PRODUCT
   --------------------------------------------------------- */

.hk-nav-recommended {
    display:flex;

    align-items:center;

    gap:10px;

    padding-left:8px;
    padding-right:8px;

    color:#ffffff !important;

    font-weight:850;
}

.hk-nav-recommended .hk-recommend-text {
    color:#ffffff !important;
}


.hk-recommend-decor {
    height:62px;

    display:inline-flex;

    align-items:center;

    gap:7px;

    color:#fff !important;
}


.hk-recommend-decor i {
    width:22px;
    height:22px;

    display:inline-flex;

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

    border:1px solid
        rgba(255,255,255,.78);

    border-radius:50%;

    color:#fff !important;

    font-size:11px;
}


.hk-recommend-line {
    width:1px;
    height:34px;

    display:block;

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


/* Make the right-hand item visually separated,
   similar to the original ZCart flash-sale zone. */

.hk-nav-recommended {
    border-left:
        1px solid
        rgba(255,255,255,.25);

    border-right:
        1px solid
        rgba(255,255,255,.25);
}


/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media(max-width:1100px) {

    .hk-category-dropdown {
        position:fixed;

        top:auto;
        left:20px;

        width:calc(100vw - 40px);

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


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:760px) {

    .hk-unified-language {
        transform:
            translateX(-10px) !important;
    }

    .hk-category-dropdown {
        left:10px;

        width:calc(100vw - 20px);

        grid-template-columns:
            1fr;
    }

    .hk-recommend-decor {
        height:54px;
    }

    .hk-recommend-line {
        height:28px;
    }
}







/* =========================================================
   LANGUAGE TOOLTIP LIVE CSS V2
   ========================================================= */

.hk-language-live-tooltip {
    margin-top:-10px !important;
}


/*
 * In case the actual language partial contains
 * its own tooltip inside the globe wrapper.
 */

.hk-unified-language [class*="tooltip"] {
    margin-top:-10px !important;
}


/*
 * Bootstrap tooltip arrow should move together
 * with the tooltip container.
 */

.hk-language-live-tooltip .tooltip-arrow,
.hk-language-live-tooltip .arrow {
    margin-top:0 !important;
}



/* =========================================================
   HEADER TOOLTIP + FIXED NAV FINAL V4
   ========================================================= */


/* ---------------------------------------------------------
   LANGUAGE AREA
   --------------------------------------------------------- */

.hk-unified-language {
    position:relative !important;
    overflow:visible !important;

    /*
     * 현재 확정한 지구본 위치
     */
    transform:
        translateX(-30px)
        !important;

    z-index:99990 !important;
}


/*
 * 기존 span tooltip이 있다면
 * 이것을 우리가 직접 표시합니다.
 */

.hk-unified-language
.hk-custom-language-tooltip {

    position:absolute !important;

    left:50% !important;

    /*
     * 지구본보다 위에 배치
     */
    bottom:
        calc(100% + 2px)
        !important;

    transform:
        translateX(-50%)
        !important;

    z-index:9999999 !important;

    padding:6px 10px !important;

    border-radius:6px !important;

    background:#263945 !important;

    color:#ffffff !important;

    font-size:11px !important;

    font-weight:750 !important;

    line-height:1 !important;

    white-space:nowrap !important;

    opacity:0 !important;

    visibility:hidden !important;

    pointer-events:none !important;

    box-shadow:
        0 4px 12px
        rgba(0,0,0,.28)
        !important;
}


/*
 * 꼬리를 아래쪽으로 길게 내려
 * 지구본과 약간 겹치게 합니다.
 */

.hk-unified-language
.hk-custom-language-tooltip::after {

    content:"" !important;

    position:absolute !important;

    left:50% !important;

    top:100% !important;

    transform:
        translateX(-50%)
        !important;

    width:0 !important;
    height:0 !important;

    border-left:
        7px solid transparent
        !important;

    border-right:
        7px solid transparent
        !important;

    border-top:
        10px solid #263945
        !important;

    z-index:10000000 !important;
}


.hk-unified-language:hover
.hk-custom-language-tooltip,

.hk-unified-language:focus-within
.hk-custom-language-tooltip {

    opacity:1 !important;

    visibility:visible !important;
}


/* ---------------------------------------------------------
   TRUE FIXED MENU BAR
   --------------------------------------------------------- */

.hk-unified-nav-placeholder {
    width:100%;
    height:0;
}


.hk-unified-nav.hk-nav-is-fixed {

    position:fixed !important;

    top:0 !important;
    left:0 !important;
    right:0 !important;

    width:100% !important;

    z-index:99980 !important;

    margin:0 !important;

    background:#17324d !important;

    box-shadow:
        0 4px 14px
        rgba(12,34,55,.24)
        !important;
}


/*
 * fixed 상태에서도 내부 폭은
 * 기존 사이트 폭 그대로 유지
 */

.hk-unified-nav.hk-nav-is-fixed
.hk-unified-nav-inner {

    position:relative !important;

    z-index:99981 !important;
}


/*
 * 카테고리 dropdown은
 * 고정 메뉴보다 더 위
 */

.hk-unified-nav.hk-nav-is-fixed
.hk-category-dropdown {

    z-index:99990 !important;
}


/* ---------------------------------------------------------
   MENU COLOURS
   --------------------------------------------------------- */

.hk-unified-nav
.hk-unified-nav-item,

.hk-unified-nav
.hk-unified-nav-item span,

.hk-unified-nav
.hk-unified-nav-item i,

.hk-unified-nav
.hk-nav-category,

.hk-unified-nav
.hk-nav-category span,

.hk-unified-nav
.hk-nav-category i {

    color:#ffffff !important;
}


/*
 * 카테고리 버튼 배경도
 * 메뉴바와 동일하게 유지
 */

.hk-unified-nav
.hk-nav-category {

    background:transparent !important;

    border:0 !important;

    box-shadow:none !important;
}


.hk-unified-nav
.hk-nav-category:hover,

.hk-unified-nav
.hk-nav-category:focus,

.hk-unified-nav
.hk-nav-category[aria-expanded="true"] {

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


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:760px) {

    .hk-unified-language {

        transform:
            translateX(-10px)
            !important;
    }

}



/* =========================================================
   TOP WHITE HEADER HEIGHT FIX V1
   ========================================================= */

.hk-unified-header-inner {
    min-height:72px !important;
    height:72px !important;
}


/*
 * 로고도 헤더 높이에 맞춰 아주 조금만 축소
 */
.hk-unified-logo img {
    height:46px !important;
    width:auto !important;
}


/*
 * 계정 아이콘은 기존 크기 유지하면서
 * 세로 중앙 정렬
 */
.hk-unified-account-area {
    height:72px !important;
    align-items:center !important;
}


/*
 * 지구본 wrapper 역시 같은 높이 중앙 정렬.
 * 위치/번역/국기 로직은 변경하지 않음.
 */
.hk-unified-language {
    align-self:center !important;
}


/* MOBILE */

@media(max-width:760px) {

    .hk-unified-header-inner {
        min-height:64px !important;
        height:64px !important;
    }

    .hk-unified-logo img {
        height:40px !important;
    }

    .hk-unified-account-area {
        height:64px !important;
    }
}



/* =========================================================
   LANGUAGE TOOLTIP UP 15PX FINAL
   Globe position / translation logic untouched.
   ========================================================= */

.hk-unified-language
.hk-custom-language-tooltip {
    transform:
        translateX(-50%)
        translateY(-15px)
        !important;
}



/* =========================================================
   HEADER TOOLTIP Z-INDEX + LANGUAGE POSITION FINAL V5
   ========================================================= */


/* ---------------------------------------------------------
   HEADER ACCOUNT AREA ABOVE FIXED NAV
   --------------------------------------------------------- */

.hk-unified-header-main,
.hk-unified-header-inner,
.hk-unified-account-area {
    position:relative !important;
    z-index:200100 !important;
    overflow:visible !important;
}


/* Account icons themselves */

.hk-header-icon {
    position:relative !important;
    z-index:200110 !important;
    overflow:visible !important;
}


/* Account tooltips */

.hk-header-tooltip {
    z-index:300000 !important;
}


/*
 * Prevent header containers from clipping tooltips.
 */

.hk-unified-header,
.hk-unified-header-main,
.hk-unified-header-inner,
.hk-unified-account-area,
.hk-header-icon {
    overflow:visible !important;
}


/* ---------------------------------------------------------
   FIXED MENU LOWER THAN ACCOUNT TOOLTIPS
   --------------------------------------------------------- */

.hk-unified-nav,
.hk-unified-nav.hk-nav-is-fixed {
    z-index:100000 !important;
}

.hk-unified-nav-inner {
    z-index:100010 !important;
}

.hk-category-dropdown {
    z-index:100020 !important;
}


/* ---------------------------------------------------------
   LANGUAGE AREA ABOVE MENU
   --------------------------------------------------------- */

.hk-unified-language {
    position:relative !important;
    z-index:200120 !important;
    overflow:visible !important;
}


/* ---------------------------------------------------------
   LANGUAGE TOOLTIP
   Move much further upward.
   --------------------------------------------------------- */

.hk-unified-language
.hk-custom-language-tooltip {
    left:50% !important;

    /*
     * Strong upward shift:
     * significantly higher than before.
     */
    bottom:calc(100% + 4px) !important;

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

    z-index:350000 !important;

    opacity:0 !important;
    visibility:hidden !important;
}


/* Show on hover/focus */

.hk-unified-language:hover
.hk-custom-language-tooltip,
.hk-unified-language:focus-within
.hk-custom-language-tooltip {
    opacity:1 !important;
    visibility:visible !important;
}


/* Tail stays connected toward globe */

.hk-unified-language
.hk-custom-language-tooltip::after {
    z-index:350001 !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:760px) {

    .hk-unified-language
    .hk-custom-language-tooltip {
        transform:
            translateX(-50%)
            translateY(-18px)
            !important;
    }
}



/* =========================================================
   LANGUAGE TOOLTIP CLICK HIDE V1
   ========================================================= */

.hk-unified-language.hk-language-tooltip-hidden
.hk-custom-language-tooltip,

.hk-unified-language.hk-language-tooltip-hidden:hover
.hk-custom-language-tooltip,

.hk-unified-language.hk-language-tooltip-hidden:focus-within
.hk-custom-language-tooltip {

    opacity:0 !important;
    visibility:hidden !important;
    display:none !important;
}



/* =========================================================
   LANGUAGE TOOLTIP CLICK HIDE V1
   ========================================================= */

.hk-unified-language.hk-language-tooltip-hidden
.hk-custom-language-tooltip,

.hk-unified-language.hk-language-tooltip-hidden:hover
.hk-custom-language-tooltip,

.hk-unified-language.hk-language-tooltip-hidden:focus-within
.hk-custom-language-tooltip {

    opacity:0 !important;
    visibility:hidden !important;
    display:none !important;
}



/* =========================================================
   LANGUAGE TOOLTIP SAME AS HEADER ICONS FINAL V6
   ========================================================= */


/*
 * 지구본 wrapper.
 * 번역/국기 기능에는 관여하지 않음.
 */

.hk-unified-language {
    position:relative !important;
    overflow:visible !important;
    z-index:400000 !important;
}


/*
 * 우측 로그인 아이콘과 동일한
 * hk-header-tooltip 디자인을 그대로 사용.
 *
 * 지구본의 아래쪽에 붙이되
 * 기존보다 충분히 위로 배치.
 */

.hk-unified-language
.hk-language-header-tooltip {

    left:50% !important;

    top:calc(100% - 10px) !important;

    bottom:auto !important;

    transform:
        translateX(-50%)
        !important;

    z-index:500000 !important;

    opacity:0 !important;
    visibility:hidden !important;

    display:block !important;

    pointer-events:none !important;
}


/*
 * 지구본 위에 마우스를 올렸을 때만 표시.
 */

.hk-unified-language:hover
.hk-language-header-tooltip,

.hk-unified-language:focus-within
.hk-language-header-tooltip {

    opacity:1 !important;
    visibility:visible !important;
}


/*
 * 클릭 후에는 hover 상태가 남아 있어도
 * 강제로 숨김.
 */

.hk-unified-language.hk-language-tooltip-clicked
.hk-language-header-tooltip,

.hk-unified-language.hk-language-tooltip-clicked:hover
.hk-language-header-tooltip,

.hk-unified-language.hk-language-tooltip-clicked:focus-within
.hk-language-header-tooltip {

    opacity:0 !important;
    visibility:hidden !important;
}


/*
 * 메뉴바보다 훨씬 위.
 */

.hk-unified-header-main,
.hk-unified-header-inner,
.hk-unified-brand-area,
.hk-unified-language {

    overflow:visible !important;
}


/* 모바일 */

@media(max-width:760px) {

    .hk-unified-language
    .hk-language-header-tooltip {

        top:calc(100% - 8px) !important;
    }
}



/* =========================================================
   REAL LANGUAGE HINT FINAL V7

   Uses the original .hk-language-hint only.
   Same behaviour as account icon tooltips.
   ========================================================= */


/*
 * Real original hint.
 * Hidden normally.
 */

.hk-unified-language
.hk-language
.hk-language-hint {

    position:absolute !important;

    left:50% !important;

    /*
     * Place below the globe but high enough
     * to overlap the globe tail slightly.
     */
    top:calc(100% - 12px) !important;

    bottom:auto !important;

    transform:
        translateX(-50%)
        !important;

    z-index:900000 !important;

    display:block !important;

    padding:6px 9px !important;

    border-radius:6px !important;

    background:#263945 !important;

    color:#ffffff !important;

    font-size:11px !important;

    line-height:1 !important;

    font-weight:700 !important;

    white-space:nowrap !important;

    opacity:0 !important;

    visibility:hidden !important;

    pointer-events:none !important;

    box-shadow:
        0 4px 12px
        rgba(0,0,0,.20)
        !important;

    transition:
        opacity .15s ease,
        visibility .15s ease
        !important;
}


/*
 * Speech-bubble tail.
 */

.hk-unified-language
.hk-language
.hk-language-hint::before {

    content:"" !important;

    position:absolute !important;

    left:50% !important;

    bottom:100% !important;

    top:auto !important;

    transform:
        translateX(-50%)
        !important;

    width:0 !important;
    height:0 !important;

    border-left:
        5px solid transparent
        !important;

    border-right:
        5px solid transparent
        !important;

    border-bottom:
        6px solid #263945
        !important;

    border-top:0 !important;
}


/*
 * Remove any old second decorative tail.
 */

.hk-unified-language
.hk-language
.hk-language-hint::after {

    display:none !important;
    content:none !important;
}


/*
 * Exactly like account tooltip:
 * show only while hovering the globe area.
 */

.hk-unified-language
.hk-language:hover
.hk-language-hint {

    opacity:1 !important;
    visibility:visible !important;
}


/*
 * Once the globe is clicked and flags are open,
 * hide the hint even though mouse is still over it.
 */

.hk-unified-language
.hk-language:has(
    .hk-language-menu.is-open
)
.hk-language-hint {

    opacity:0 !important;
    visibility:hidden !important;
}


/*
 * Existing JS may add is-hidden.
 * Respect that state as well.
 */

.hk-unified-language
.hk-language
.hk-language-hint.is-hidden {

    opacity:0 !important;
    visibility:hidden !important;
}


/*
 * Ensure hint is above menu bar.
 */

.hk-unified-language,
.hk-unified-language .hk-language {

    position:relative !important;
    overflow:visible !important;
    z-index:800000 !important;
}


/* Mobile */

@media(max-width:760px) {

    .hk-unified-language
    .hk-language
    .hk-language-hint {

        top:calc(100% - 9px) !important;
    }
}



/* =========================================================
   HK CATEGORY DROPDOWN FINAL V2
   ========================================================= */

.hk-unified-nav-inner {
    position:relative !important;
}


/*
 * 기본 상태는 닫힘
 */

#hk-category-dropdown {
    display:none !important;

    position:absolute !important;

    top:100% !important;
    left:0 !important;

    width:min(
        760px,
        calc(100vw - 40px)
    ) !important;

    padding:16px !important;

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

    gap:6px 8px;

    background:#ffffff !important;

    border:
        1px solid
        rgba(20,60,90,.15)
        !important;

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

    box-shadow:
        0 14px 30px
        rgba(12,40,60,.18)
        !important;

    z-index:999999 !important;
}


/*
 * 열린 상태
 */

#hk-category-dropdown.is-open {
    display:grid !important;
}


/*
 * dropdown 내부는 흰 배경이므로
 * 메뉴바의 강제 white color 영향을 차단
 */

#hk-category-dropdown a,
#hk-category-dropdown a span,
#hk-category-dropdown i {
    color:#263f50 !important;
}


#hk-category-dropdown a {
    display:flex;

    align-items:center;

    min-height:40px;

    padding:8px 12px;

    border-radius:6px;

    font-size:13px;

    font-weight:650;

    line-height:1.3;

    text-decoration:none !important;
}


#hk-category-dropdown a:hover,
#hk-category-dropdown a:focus {
    color:#075b9b !important;
    background:#eef5f8 !important;
}


/*
 * 카테고리 버튼은 메뉴바와 같은 배경
 */

#hk-category-menu-button {
    background:transparent !important;
    color:#ffffff !important;
    border:0 !important;
    box-shadow:none !important;
}


#hk-category-menu-button:hover,
#hk-category-menu-button:focus,
#hk-category-menu-button[
aria-expanded="true"
] {
    background:
        rgba(255,255,255,.10)
        !important;
}


/* Tablet */

@media(max-width:1100px) {

    #hk-category-dropdown {
        left:0 !important;

        width:min(
            640px,
            calc(100vw - 30px)
        ) !important;

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


/* Mobile */

@media(max-width:760px) {

    #hk-category-dropdown {
        left:10px !important;

        width:
            calc(100vw - 20px)
            !important;

        grid-template-columns:
            1fr;
    }
}



/* =========================================================
   HOJU FAQ PAGE V1
   ========================================================= */

.hk-faq-page {
    min-height:600px;
    background:#f7f9fb;
    color:#253c4a;
}

.hk-faq-container {
    width:min(1100px,calc(100% - 40px));
    margin:0 auto;
}

.hk-faq-hero {
    padding:58px 0 52px;
    background:#eef6fb;
    border-bottom:1px solid #dfe9ef;
}

.hk-faq-eyebrow {
    display:block;
    margin-bottom:10px;
    color:#1676ad;
    font-size:12px;
    font-weight:800;
    letter-spacing:.12em;
}

.hk-faq-hero h1 {
    margin:0 0 12px;
    color:#17324d;
    font-size:42px;
    font-weight:850;
}

.hk-faq-hero p {
    max-width:680px;
    margin:0;
    color:#60727d;
    font-size:16px;
    line-height:1.8;
}

.hk-faq-section {
    padding:50px 0 70px;
}

.hk-faq-category {
    margin-bottom:38px;
}

.hk-faq-category h2 {
    margin:0 0 14px;
    color:#17324d;
    font-size:21px;
    font-weight:850;
}

.hk-faq-category details {
    margin-bottom:9px;
    overflow:hidden;
    border:1px solid #dde7ed;
    border-radius:8px;
    background:#fff;
}

.hk-faq-category summary {
    position:relative;
    padding:17px 50px 17px 19px;
    cursor:pointer;
    color:#263f50;
    font-size:14px;
    font-weight:750;
    list-style:none;
}

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

.hk-faq-category summary::after {
    content:"+";
    position:absolute;
    right:19px;
    top:50%;
    transform:translateY(-50%);
    color:#1676ad;
    font-size:23px;
    font-weight:500;
}

.hk-faq-category details[open] summary::after {
    content:"−";
}

.hk-faq-answer {
    padding:0 19px 19px;
    border-top:1px solid #edf1f4;
    padding-top:16px;
    color:#63747e;
    font-size:14px;
    line-height:1.8;
}

.hk-faq-help {
    margin-top:48px;
    padding:30px;
    border-radius:10px;
    background:#17324d;
    color:#fff;
}

.hk-faq-help h2 {
    margin:0 0 8px;
    color:#fff;
    font-size:22px;
}

.hk-faq-help p {
    margin:0;
    color:#d7e4ec;
}

.hk-faq-actions {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:20px;
}

.hk-faq-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    padding:0 18px;
    border-radius:6px;
    background:#fff;
    color:#17324d !important;
    font-size:13px;
    font-weight:800;
    text-decoration:none !important;
}

.hk-faq-button-light {
    border:1px solid rgba(255,255,255,.55);
    background:transparent;
    color:#fff !important;
}

@media(max-width:760px) {

    .hk-faq-container {
        width:calc(100% - 24px);
    }

    .hk-faq-hero {
        padding:38px 0;
    }

    .hk-faq-hero h1 {
        font-size:34px;
    }

    .hk-faq-section {
        padding:35px 0 50px;
    }
}





/* =========================================================
   HOJU PARTNERSHIP PAGE V1
   ========================================================= */

.hk-partnership-page {
    min-height:600px;
    background:#fff;
    color:#263f50;
}

.hk-partnership-container {
    width:min(1120px,calc(100% - 40px));
    margin:0 auto;
}


/* HERO */

.hk-partnership-hero {
    padding:72px 0 68px;
    background:
        linear-gradient(
            135deg,
            #eef7fb 0%,
            #f8fbfd 58%,
            #edf5fa 100%
        );
    border-bottom:1px solid #dfeaf0;
}

.hk-partnership-eyebrow {
    display:block;
    margin-bottom:12px;
    color:#1783b8;
    font-size:12px;
    font-weight:850;
    letter-spacing:.14em;
}

.hk-partnership-hero h1 {
    max-width:760px;
    margin:0 0 20px;
    color:#17324d;
    font-size:44px;
    line-height:1.25;
    font-weight:900;
}

.hk-partnership-hero p {
    max-width:760px;
    margin:0;
    color:#60747f;
    font-size:16px;
    line-height:1.9;
}

.hk-partnership-hero-actions {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:28px;
}


/* BUTTONS */

.hk-partnership-primary-button,
.hk-partnership-secondary-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:0 20px;
    border-radius:7px;
    font-size:13px;
    font-weight:850;
    text-decoration:none !important;
}

.hk-partnership-primary-button {
    background:#17324d;
    color:#fff !important;
}

.hk-partnership-primary-button:hover {
    background:#244d6e;
    color:#fff !important;
}

.hk-partnership-secondary-button {
    border:1px solid #b9ccd8;
    background:#fff;
    color:#314d5e !important;
}


/* SECTIONS */

.hk-partnership-section {
    padding:64px 0;
}

.hk-partnership-soft {
    background:#f7f9fb;
}

.hk-partnership-heading {
    max-width:760px;
    margin-bottom:32px;
}

.hk-partnership-heading > span {
    display:block;
    margin-bottom:8px;
    color:#1783b8;
    font-size:11px;
    font-weight:850;
    letter-spacing:.12em;
}

.hk-partnership-heading h2 {
    margin:0 0 12px;
    color:#17324d;
    font-size:30px;
    font-weight:900;
}

.hk-partnership-heading p {
    margin:0;
    color:#667984;
    font-size:15px;
    line-height:1.9;
}


/* CARDS */

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

.hk-partnership-card {
    padding:25px;
    border:1px solid #dce7ed;
    border-radius:10px;
    background:#fff;
    box-shadow:
        0 5px 18px
        rgba(23,50,77,.05);
}

.hk-partnership-icon {
    width:42px;
    height:42px;
    margin-bottom:17px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:9px;
    background:#eef6fa;
    color:#177eac;
    font-size:19px;
}

.hk-partnership-card h3 {
    margin:0 0 10px;
    color:#203a4b;
    font-size:17px;
    font-weight:850;
}

.hk-partnership-card p {
    margin:0;
    color:#687a84;
    font-size:13px;
    line-height:1.8;
}


/* FEATURE */

.hk-partnership-feature {
    display:grid;
    grid-template-columns:
        minmax(0,1.35fr)
        minmax(300px,.65fr);
    gap:50px;
    align-items:center;
}

.hk-partnership-feature-copy h2 {
    margin:0 0 16px;
    color:#17324d;
    font-size:30px;
    font-weight:900;
}

.hk-partnership-feature-copy p {
    margin:0 0 14px;
    color:#667984;
    font-size:14px;
    line-height:1.9;
}

.hk-partnership-feature-list {
    padding:24px;
    border-radius:10px;
    background:#17324d;
}

.hk-partnership-feature-list div {
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:12px 0;
    color:#e8f1f6;
    font-size:13px;
    line-height:1.5;
}

.hk-partnership-feature-list div +
div {
    border-top:
        1px solid
        rgba(255,255,255,.12);
}

.hk-partnership-feature-list i {
    margin-top:2px;
    color:#71c4f4;
}


/* PROCESS */

.hk-partnership-steps {
    display:grid;
    grid-template-columns:
        repeat(4,minmax(0,1fr));
    gap:14px;
}

.hk-partnership-steps article {
    padding:22px;
    border-radius:9px;
    background:#fff;
    border:1px solid #dce7ed;
}

.hk-partnership-steps strong {
    display:block;
    margin-bottom:13px;
    color:#2491bf;
    font-size:24px;
    font-weight:900;
}

.hk-partnership-steps h3 {
    margin:0 0 8px;
    color:#203a4b;
    font-size:16px;
    font-weight:850;
}

.hk-partnership-steps p {
    margin:0;
    color:#6b7d87;
    font-size:13px;
    line-height:1.75;
}


/* PRINCIPLES */

.hk-partnership-principles {
    display:grid;
    grid-template-columns:
        repeat(3,minmax(0,1fr));
    gap:20px;
}

.hk-partnership-principles > div {
    padding:25px;
    border-top:3px solid #1c8bbc;
    background:#f7f9fb;
}

.hk-partnership-principles i {
    margin-bottom:15px;
    color:#1880af;
    font-size:24px;
}

.hk-partnership-principles h3 {
    margin:0 0 9px;
    color:#203a4b;
    font-size:17px;
}

.hk-partnership-principles p {
    margin:0;
    color:#687a84;
    font-size:13px;
    line-height:1.8;
}


/* CTA */

.hk-partnership-cta {
    padding:55px 0;
    text-align:center;
    background:#edf6fa;
}

.hk-partnership-cta h2 {
    margin:0 0 9px;
    color:#17324d;
    font-size:27px;
    font-weight:900;
}

.hk-partnership-cta p {
    margin:0 0 22px;
    color:#657984;
    line-height:1.8;
}


/* RESPONSIVE */

@media(max-width:900px) {

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

    .hk-partnership-steps {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .hk-partnership-feature {
        grid-template-columns:1fr;
        gap:28px;
    }
}


@media(max-width:650px) {

    .hk-partnership-container {
        width:calc(100% - 24px);
    }

    .hk-partnership-hero {
        padding:45px 0;
    }

    .hk-partnership-hero h1 {
        font-size:32px;
    }

    .hk-partnership-section {
        padding:44px 0;
    }

    .hk-partnership-grid,
    .hk-partnership-steps,
    .hk-partnership-principles {
        grid-template-columns:1fr;
    }

    .hk-partnership-heading h2,
    .hk-partnership-feature-copy h2 {
        font-size:25px;
    }
}



/* =========================================================
   HOME LANGUAGE FLAGS LEFT 6PX V1
   Globe itself does not move.
   ========================================================= */

.hk-unified-language
#hk-language-menu {

    margin-left:-6px !important;
}


/* =========================================================
   HOME FIXED MENU FINAL V1
   ========================================================= */

.hk-unified-nav.hk-nav-is-fixed {

    position:fixed !important;

    top:0 !important;
    left:0 !important;
    right:0 !important;

    width:100% !important;

    margin:0 !important;

    z-index:700000 !important;

    background:#17324d !important;

    box-shadow:
        0 3px 12px
        rgba(20,40,60,.22)
        !important;
}


#hk-home-nav-placeholder {

    width:100% !important;

    height:0;
}



/* =========================================================
   ADMIN SIDEBAR CSS ONLY FINAL V1

   CSS ONLY.
   NO ROUTES.
   NO BLADE LOGIC.
   NO HREF CHANGES.
   NO PERMISSION CHANGES.
   ========================================================= */


/* ---------------------------------------------------------
   ADMIN SIDEBAR DETECTION

   Apply this design only when the sidebar contains
   the administrator dashboard link.
   Seller sidebar is not changed by this block.
   --------------------------------------------------------- */

.hk-sidebar:has(a[href$="/admin/dashboard"]) {

    padding-left:14px !important;
    padding-right:14px !important;

}


/* ---------------------------------------------------------
   SECTION LABELS
   --------------------------------------------------------- */

.hk-sidebar:has(a[href$="/admin/dashboard"])
.hk-side-section {

    margin:
        22px 10px 10px
        !important;

    padding:
        0
        !important;

    color:
        rgba(205,221,230,.62)
        !important;

    font-size:
        11px
        !important;

    font-weight:
        800
        !important;

    line-height:
        1
        !important;

    letter-spacing:
        .08em
        !important;

    text-transform:
        uppercase
        !important;

}


/* First "마켓" label */

.hk-sidebar:has(a[href$="/admin/dashboard"])
.hk-side-section:first-of-type {

    margin-top:
        5px
        !important;

}


/* ---------------------------------------------------------
   NAV STACK
   --------------------------------------------------------- */

.hk-sidebar:has(a[href$="/admin/dashboard"])
.hk-nav {

    display:flex !important;

    flex-direction:
        column
        !important;

    gap:
        7px
        !important;

}


/* ---------------------------------------------------------
   ALL ADMIN MENU ITEMS

   Works for both:
   .hk-nav-link
   .hk-nav-item
   --------------------------------------------------------- */

.hk-sidebar:has(a[href$="/admin/dashboard"])
.hk-nav > a {

    box-sizing:
        border-box
        !important;

    width:
        100%
        !important;

    min-height:
        46px
        !important;

    margin:
        0
        !important;

    padding:
        6px 10px
        !important;

    display:
        flex
        !important;

    align-items:
        center
        !important;

    gap:
        12px
        !important;

    border:
        0
        !important;

    border-radius:
        9px
        !important;

    background:
        transparent
        !important;

    color:
        #e7f0f4
        !important;

    font-size:
        14px
        !important;

    font-weight:
        600
        !important;

    line-height:
        1.2
        !important;

    text-decoration:
        none
        !important;

    white-space:
        nowrap
        !important;

    transition:
        background .15s ease,
        color .15s ease
        !important;

}


/* ---------------------------------------------------------
   REMOVE OLD GLYPH ICONS

   Existing HTML icon characters remain in Blade,
   but are visually suppressed only by CSS.
   --------------------------------------------------------- */

.hk-sidebar:has(a[href$="/admin/dashboard"])
.hk-nav > a
.hk-nav-icon {

    display:
        none
        !important;

}


/* ---------------------------------------------------------
   NEW COMMON ICON TILE

   Every item receives the same 32x32 icon tile.
   --------------------------------------------------------- */

.hk-sidebar:has(a[href$="/admin/dashboard"])
.hk-nav > a::before {

    content:
        ""
        !important;

    width:
        32px
        !important;

    height:
        32px
        !important;

    min-width:
        32px
        !important;

    flex:
        0 0 32px
        !important;

    display:
        block
        !important;

    border-radius:
        9px
        !important;

    background-color:
        rgba(255,255,255,.07)
        !important;

    background-position:
        center
        !important;

    background-repeat:
        no-repeat
        !important;

    background-size:
        17px 17px
        !important;

}


/* ---------------------------------------------------------
   DASHBOARD
   --------------------------------------------------------- */

.hk-sidebar
a[href$="/admin/dashboard"]::before {

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e6f0f4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5L12 4l9 7.5'/%3E%3Cpath d='M5.5 10.5V20h13v-9.5'/%3E%3Cpath d='M9.5 20v-6h5v6'/%3E%3C/svg%3E")
        !important;

}


/* ---------------------------------------------------------
   SELLERS
   --------------------------------------------------------- */

.hk-sidebar
a[href$="/admin/sellers"]::before {

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e6f0f4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Ccircle cx='17' cy='9' r='2.4'/%3E%3Cpath d='M3.5 19c0-3.3 2.4-5.5 5.5-5.5s5.5 2.2 5.5 5.5'/%3E%3Cpath d='M14 15c.8-.8 1.8-1.2 3-1.2 2.4 0 4 1.7 4 4.2'/%3E%3C/svg%3E")
        !important;

}


/* ---------------------------------------------------------
   SELLER MESSAGES
   --------------------------------------------------------- */

.hk-sidebar
a[href$="/admin/seller-messages"]::before {

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e6f0f4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M4 7l8 6 8-6'/%3E%3C/svg%3E")
        !important;

}


/* ---------------------------------------------------------
   ORDERS
   --------------------------------------------------------- */

.hk-sidebar
a[href$="/admin/orders"]::before {

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e6f0f4' stroke-width='1.8' stroke-linecap='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='1.5'/%3E%3Cpath d='M8 8h8M8 12h8M8 16h5'/%3E%3C/svg%3E")
        !important;

}


/* ---------------------------------------------------------
   PRODUCTS
   --------------------------------------------------------- */

.hk-sidebar
a[href$="/admin/products"]::before {

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e6f0f4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7.5L12 3l8 4.5v9L12 21l-8-4.5z'/%3E%3Cpath d='M4 7.5l8 4.5 8-4.5M12 12v9'/%3E%3C/svg%3E")
        !important;

}


/* ---------------------------------------------------------
   NOTICE
   --------------------------------------------------------- */

.hk-sidebar
a[href$="/notices"]::before {

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e6f0f4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10v4M6 9h3l7-4v14l-7-4H6zM9 15l1.5 5'/%3E%3C/svg%3E")
        !important;

}


/* ---------------------------------------------------------
   REPORTS
   --------------------------------------------------------- */

.hk-sidebar
a[href$="/admin/reports"]::before {

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e6f0f4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 21V4M5 5h11l-2 4 2 4H5'/%3E%3C/svg%3E")
        !important;

}


/* ---------------------------------------------------------
   SETTLEMENTS
   --------------------------------------------------------- */

.hk-sidebar
a[href$="/admin/settlements"]::before {

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e6f0f4' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M4 20h16M6 17v-5M10 17V8M14 17v-7M18 17V5'/%3E%3C/svg%3E")
        !important;

}


/* ---------------------------------------------------------
   REFUNDS
   --------------------------------------------------------- */

.hk-sidebar
a[href$="/admin/refunds"]::before {

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e6f0f4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8a8 8 0 1 1-1 7M5 3v5H1'/%3E%3Cpath d='M15 9h-4a2 2 0 0 0 0 4h2a2 2 0 0 1 0 4H8'/%3E%3C/svg%3E")
        !important;

}


/* ---------------------------------------------------------
   ORDER DISPUTES
   --------------------------------------------------------- */

.hk-sidebar
a[href$="/admin/disputes"]::before {

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e6f0f4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4l6 6M12 6l6 6M3 21l7-7M8 9l7 7'/%3E%3C/svg%3E")
        !important;

}


/* ---------------------------------------------------------
   RETURNS
   --------------------------------------------------------- */

.hk-sidebar
a[href$="/admin/returns"]::before {

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e6f0f4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h9a4 4 0 0 1 4 4v5M7 3L3 7l4 4M17 21l4-4-4-4M21 17h-9a4 4 0 0 1-4-4'/%3E%3C/svg%3E")
        !important;

}





/* Auction */

.hk-sidebar:has(a[href$="/admin/dashboard"])
.hk-nav > a:nth-of-type(12)::before {

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e6f0f4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4l6 6M12 6l6 6M5 21l7-7M7 5l12 12'/%3E%3C/svg%3E")
        !important;

}


/* Seller payout */

.hk-sidebar:has(a[href$="/admin/dashboard"])
.hk-nav > a:nth-of-type(13)::before {

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e6f0f4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='18' height='12' rx='2'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M6 9h1M17 15h1'/%3E%3C/svg%3E")
        !important;

}




.hk-sidebar:has(a[href$="/admin/dashboard"])
.hk-nav > a:nth-of-type(14)::before {

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e6f0f4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19 13.5v-3l-2-.6-.8-1.9 1-1.8-2.1-2.1-1.8 1L11.5 4h-3L7.9 6 6 6.8l-1.8-1L2.1 8l1 1.8L2.5 12v3l2 .6.8 1.9-1 1.8 2.1 2.1 1.8-1 1.9.8h3l.6-2 1.9-.8 1.8 1 2.1-2.1-1-1.8z'/%3E%3C/svg%3E")
        !important;

}


/* ---------------------------------------------------------
   HOVER
   --------------------------------------------------------- */

.hk-sidebar:has(a[href$="/admin/dashboard"])
.hk-nav > a:not(.hk-nav-disabled):hover {

    background:
        rgba(255,255,255,.075)
        !important;

    color:
        #ffffff
        !important;

}


/* ---------------------------------------------------------
   ACTIVE MENU
   --------------------------------------------------------- */

.hk-sidebar:has(a[href$="/admin/dashboard"])
.hk-nav > a.is-active {

    background:
        #edf4f8
        !important;

    color:
        #174b70
        !important;

    font-weight:
        800
        !important;

}


/* Active icon tile */

.hk-sidebar:has(a[href$="/admin/dashboard"])
.hk-nav > a.is-active::before {

    background-color:
        #f48a70
        !important;

}


/* ---------------------------------------------------------
   DISABLED ITEMS

   Same size/spacing, but visually muted.
   --------------------------------------------------------- */

.hk-sidebar:has(a[href$="/admin/dashboard"])
.hk-nav > a.hk-nav-disabled {

    opacity:
        .36
        !important;

    cursor:
        default
        !important;

    pointer-events:
        none
        !important;

}


/* ---------------------------------------------------------
   MOBILE / NARROW
   --------------------------------------------------------- */

@media(max-width:900px) {

    .hk-sidebar:has(a[href$="/admin/dashboard"])
    .hk-nav > a {

        min-height:
            43px
            !important;

    }


    .hk-sidebar:has(a[href$="/admin/dashboard"])
    .hk-nav > a::before {

        width:
            30px
            !important;

        height:
            30px
            !important;

        min-width:
            30px
            !important;

        flex-basis:
            30px
            !important;

        background-size:
            16px 16px
            !important;

    }

}


/* =========================================================
   END ADMIN SIDEBAR CSS ONLY FINAL V1
   ========================================================= */



/* =========================================================
   ADMIN SIDEBAR SCROLL FIX V1
   CSS ONLY
   ========================================================= */

.hk-sidebar:has(a[href$="/admin/dashboard"]) {

    overflow-y:auto !important;
    overflow-x:hidden !important;

    overscroll-behavior:
        contain
        !important;

    scrollbar-width:
        thin
        !important;

    scrollbar-color:
        rgba(255,255,255,.22)
        transparent
        !important;

}


/* Chrome / Edge */

.hk-sidebar:has(a[href$="/admin/dashboard"])
::-webkit-scrollbar {

    width:
        7px
        !important;

}


.hk-sidebar:has(a[href$="/admin/dashboard"])
::-webkit-scrollbar-track {

    background:
        transparent
        !important;

}


.hk-sidebar:has(a[href$="/admin/dashboard"])
::-webkit-scrollbar-thumb {

    background:
        rgba(255,255,255,.18)
        !important;

    border-radius:
        20px
        !important;

}


.hk-sidebar:has(a[href$="/admin/dashboard"])
::-webkit-scrollbar-thumb:hover {

    background:
        rgba(255,255,255,.30)
        !important;

}


/*
 * Allow final menu item to clear the bottom edge.
 */

.hk-sidebar:has(a[href$="/admin/dashboard"])
.hk-nav {

    padding-bottom:
        24px
        !important;

}


/* =========================================================
   END ADMIN SIDEBAR SCROLL FIX V1
   ========================================================= */



/* =========================================================
   ADMIN ORDER DISPUTE ICON FIX V1
   ========================================================= */

.hk-sidebar
a[href*="/admin/disputes"]::before {

    content:"" !important;

    display:block !important;

    width:32px !important;
    height:32px !important;

    min-width:32px !important;

    flex:
        0 0 32px
        !important;

    border-radius:
        9px
        !important;

    background-color:
        rgba(255,255,255,.07)
        !important;

    background-repeat:
        no-repeat
        !important;

    background-position:
        center
        !important;

    background-size:
        17px 17px
        !important;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e6f0f4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4l6 6'/%3E%3Cpath d='M12 6l6 6'/%3E%3Cpath d='M3 21l7-7'/%3E%3Cpath d='M8 9l7 7'/%3E%3C/svg%3E")
        !important;

}


.hk-sidebar
a[href*="/admin/disputes"].is-active::before {

    background-color:
        #f48a70
        !important;

}


/* =========================================================
   END ADMIN ORDER DISPUTE ICON FIX V1
   ========================================================= */



/* =========================================================
   ADMIN ORDER DISPUTE EXACT URL FIX V2
   Actual route: /admin/order-disputes
   ========================================================= */

.hk-sidebar
a[href$="/admin/order-disputes"]::before {

    content:"" !important;

    display:block !important;

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

    flex:
        0 0 32px
        !important;

    border-radius:
        9px
        !important;

    background-color:
        rgba(255,255,255,.07)
        !important;

    background-repeat:
        no-repeat
        !important;

    background-position:
        center
        !important;

    background-size:
        17px 17px
        !important;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e6f0f4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4l6 6'/%3E%3Cpath d='M12 6l6 6'/%3E%3Cpath d='M3 21l7-7'/%3E%3Cpath d='M8 9l7 7'/%3E%3C/svg%3E")
        !important;

}


.hk-sidebar
a[href$="/admin/order-disputes"].is-active::before {

    background-color:
        #f48a70
        !important;

}


/* =========================================================
   END ADMIN ORDER DISPUTE EXACT URL FIX V2
   ========================================================= */



/* =========================================================
   SITE ADMIN LOGO SAFE SIZE V1

   Prevent uploaded logos from changing
   header/footer geometry.
   ========================================================= */

.hk-unified-header
.brand-logo,
.hk-main-logo-language
.brand-logo,
.header-logo
.brand-logo {

    display:block !important;

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

    max-width:190px !important;
    max-height:48px !important;

    object-fit:contain !important;
    object-position:left center !important;

}


.footer-logo
.brand-logo {

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

    max-width:210px !important;
    max-height:60px !important;

    object-fit:contain !important;

}


/* Never allow a new logo to move the language globe */

.hk-main-logo-language,
.hk-sub-brand-language {

    align-items:center !important;

}


@media(max-width:600px) {

    .hk-unified-header
    .brand-logo,
    .hk-main-logo-language
    .brand-logo,
    .header-logo
    .brand-logo {

        max-width:150px !important;
        max-height:42px !important;

    }

}


/* =========================================================
   END SITE ADMIN LOGO SAFE SIZE V1
   ========================================================= */



/* =========================================================
   SUB HEADER PROFILE AVATAR V1
   ========================================================= */

.hk-header-member-name {

    display:inline-flex !important;

    align-items:center !important;

    gap:7px !important;

}


.hk-header-member-avatar {

    width:28px !important;

    height:28px !important;

    flex:
        0 0 28px
        !important;

    display:block !important;

    object-fit:cover !important;

    border-radius:50% !important;

    border:
        1px solid rgba(51,91,111,.14)
        !important;

    background:#eef4f7 !important;

}


/* =========================================================
   END SUB HEADER PROFILE AVATAR V1
   ========================================================= */



/* =========================================================
   HEADER SITE LOGO SIZE V2

   Display size only.
   Logo file / globe / account area are untouched.
   ========================================================= */


/* Main + global + sub header logo */

.hk-unified-header .brand-logo,
.hk-main-logo-language .brand-logo,
.header-logo .brand-logo {

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

    max-width:175px !important;
    max-height:44px !important;

    object-fit:contain !important;
    object-position:left center !important;

}


/*
 * Do not allow the logo wrapper to stretch
 * because of the original image dimensions.
 */

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

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

}


/* Mobile */

@media(max-width:600px) {

    .hk-unified-header .brand-logo,
    .hk-main-logo-language .brand-logo,
    .header-logo .brand-logo {

        max-width:155px !important;
        max-height:40px !important;

    }

}


/* =========================================================
   END HEADER SITE LOGO SIZE V2
   ========================================================= */



/* =========================================================
   HOME HEADER LOGO EXACT SIZE V1

   HOME PAGE ONLY.
   Globe / flags / account / sub-header untouched.
   ========================================================= */

.hk-main-logo-language
.header-logo
img.hk-home-site-logo {

    display:block !important;

    width:235px !important;
    height:auto !important;

    max-width:235px !important;
    max-height:47px !important;

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

    object-fit:contain !important;
    object-position:left center !important;

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

    transform:none !important;

}


/*
 * Keep the logo wrapper itself fitted
 * to the smaller image.
 */

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

    width:235px !important;

    max-width:235px !important;

    height:47px !important;

    min-height:0 !important;

    display:flex !important;

    align-items:center !important;

    flex:0 0 auto !important;

}


/*
 * Do NOT alter globe dimensions.
 */

.hk-main-logo-language {

    align-items:center !important;

}


/* Mobile */

@media(max-width:600px) {

    .hk-main-logo-language
    .header-logo
    img.hk-home-site-logo {

        width:190px !important;
        max-width:190px !important;
        max-height:38px !important;

    }


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

        width:190px !important;
        max-width:190px !important;
        height:38px !important;

    }

}


/* =========================================================
   END HOME HEADER LOGO EXACT SIZE V1
   ========================================================= */



/* =========================================================
   REAL LIVE UNIFIED HEADER LOGO SIZE V1

   Actual live HTML:
   .hk-unified-brand-area
       .hk-unified-logo
           img

   Logo only.
   Globe / flags / account area untouched.
   ========================================================= */


.hk-unified-brand-area
.hk-unified-logo {

    display:flex !important;

    align-items:center !important;

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

    flex:
        0 0 auto
        !important;

}


.hk-unified-brand-area
.hk-unified-logo > img {

    display:block !important;

    width:200px !important;
    height:auto !important;

    max-width:200px !important;
    max-height:40px !important;

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

    object-fit:contain !important;
    object-position:left center !important;

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

    transform:none !important;

}


/* Mobile */

@media(max-width:600px) {

    .hk-unified-brand-area
    .hk-unified-logo > img {

        width:165px !important;

        max-width:165px !important;
        max-height:33px !important;

    }

}



/* =========================================================
   HOJU CLOSING + SETTINGS SIDEBAR ICONS FINAL V1
   Only these two menu types are affected.
   ========================================================= */


/* ---------------------------------------------------------
   Hide only the old Blade glyphs for these menus
   --------------------------------------------------------- */

.hk-sidebar a[href$="/admin/closing"] > .hk-nav-icon,
.hk-sidebar a[href$="/seller/closing"] > .hk-nav-icon,
.hk-sidebar a[href*="/account/settings"] > .hk-nav-icon {
    display:none !important;
}


/* ---------------------------------------------------------
   Common tile
   Same 32x32 system used by existing modern sidebar icons
   --------------------------------------------------------- */

.hk-sidebar a[href$="/admin/closing"]::before,
.hk-sidebar a[href$="/seller/closing"]::before,
.hk-sidebar a[href*="/account/settings"]::before {
    content:"" !important;

    display:block !important;

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

    flex:0 0 32px !important;

    margin-right:12px !important;

    border-radius:9px !important;

    background-color:
        rgba(255,255,255,.08)
        !important;

    background-repeat:
        no-repeat
        !important;

    background-position:
        center
        !important;

    background-size:
        17px 17px
        !important;

    box-sizing:border-box !important;
}


/* ---------------------------------------------------------
   Closing — calculator / settlement icon
   --------------------------------------------------------- */

.hk-sidebar a[href$="/admin/closing"]::before,
.hk-sidebar a[href$="/seller/closing"]::before {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e6f0f4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='3' width='14' height='18' rx='2'/%3E%3Cpath d='M8 7h8'/%3E%3Cpath d='M8 11h2M14 11h2M8 15h2M14 15h2M8 19h8'/%3E%3C/svg%3E")
        !important;
}


/* ---------------------------------------------------------
   Settings — gear icon
   --------------------------------------------------------- */

.hk-sidebar a[href*="/account/settings"]::before {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e6f0f4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19 13.5v-3l-2-.6-.8-1.9 1-1.8-2.1-2.1-1.8 1L11.5 4h-3L7.9 6 6 6.8l-1.8-1L2.1 8l1 1.8L2.5 12v3l2 .6.8 1.9-1 1.8 2.1 2.1 1.8-1 1.9.8h3l.6-2 1.9-.8 1.8 1 2.1-2.1-1-1.8z'/%3E%3C/svg%3E")
        !important;
}


/* ---------------------------------------------------------
   Active menu tile
   Match existing active sidebar icon treatment
   --------------------------------------------------------- */

.hk-sidebar a[href$="/admin/closing"].is-active::before,
.hk-sidebar a[href$="/seller/closing"].is-active::before,
.hk-sidebar a[href*="/account/settings"].is-active::before {
    background-color:
        #f48a70
        !important;
}


/* =========================================================
   END HOJU CLOSING + SETTINGS SIDEBAR ICONS FINAL V1
   ========================================================= */



/* =========================================================
   HOJU SETTINGS SIDEBAR EXACT URL FIX V1
   Exact route: /account/settings
   ========================================================= */

/*
 * 기존 Blade 문자 ⚙는 현재 modern sidebar 시스템에서는
 * 사용하지 않는다.
 */
.hk-sidebar a[href="/account/settings"] > .hk-nav-icon,
.hk-sidebar a[href$="/account/settings"] > .hk-nav-icon {
    display:none !important;
}


/*
 * 기존 사이드바와 동일한 32x32 아이콘 타일
 */
.hk-sidebar a[href="/account/settings"]::before,
.hk-sidebar a[href$="/account/settings"]::before {
    content:"" !important;

    display:block !important;

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

    flex:0 0 32px !important;

    margin-right:12px !important;

    border-radius:9px !important;

    background-color:
        rgba(255,255,255,.08)
        !important;

    background-repeat:
        no-repeat
        !important;

    background-position:
        center
        !important;

    background-size:
        17px 17px
        !important;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e6f0f4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19 13.5v-3l-2-.6-.8-1.9 1-1.8-2.1-2.1-1.8 1L11.5 4h-3L7.9 6 6 6.8l-1.8-1L2.1 8l1 1.8L2.5 12v3l2 .6.8 1.9-1 1.8 2.1 2.1 1.8-1 1.9.8h3l.6-2 1.9-.8 1.8 1 2.1-2.1-1-1.8z'/%3E%3C/svg%3E")
        !important;

    box-sizing:border-box !important;
}


/* 활성 설정 페이지 */
.hk-sidebar a[href="/account/settings"].is-active::before,
.hk-sidebar a[href$="/account/settings"].is-active::before {
    background-color:
        #f48a70
        !important;
}


/* =========================================================
   END HOJU SETTINGS SIDEBAR EXACT URL FIX V1
   ========================================================= */



/* =========================================================
   HOJU SETTINGS ICON EXACT URL FINAL V2
   Admin  : /admin/settings
   Seller : /account/settings
   ========================================================= */


/* 기존 Blade 문자 아이콘은 이 두 메뉴에서만 숨김 */
.hk-sidebar a[href="/admin/settings"] > .hk-nav-icon,
.hk-sidebar a[href$="/admin/settings"] > .hk-nav-icon,
.hk-sidebar a[href="/account/settings"] > .hk-nav-icon,
.hk-sidebar a[href$="/account/settings"] > .hk-nav-icon {
    display:none !important;
}


/* 기존 modern sidebar와 동일한 32x32 tile */
.hk-sidebar a[href="/admin/settings"]::before,
.hk-sidebar a[href$="/admin/settings"]::before,
.hk-sidebar a[href="/account/settings"]::before,
.hk-sidebar a[href$="/account/settings"]::before {
    content:"" !important;

    display:block !important;

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

    flex:0 0 32px !important;

    margin-right:12px !important;

    border-radius:9px !important;

    background-color:
        rgba(255,255,255,.08)
        !important;

    background-repeat:
        no-repeat
        !important;

    background-position:
        center
        !important;

    background-size:
        17px 17px
        !important;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23e6f0f4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M19 13.5v-3l-2-.6-.8-1.9 1-1.8-2.1-2.1-1.8 1L11.5 4h-3L7.9 6 6 6.8l-1.8-1L2.1 8l1 1.8L2.5 12v3l2 .6.8 1.9-1 1.8 2.1 2.1 1.8-1 1.9.8h3l.6-2 1.9-.8 1.8 1 2.1-2.1-1-1.8z'/%3E%3C/svg%3E")
        !important;

    box-sizing:border-box !important;
}


/* 활성 상태 */
.hk-sidebar a[href="/admin/settings"].is-active::before,
.hk-sidebar a[href$="/admin/settings"].is-active::before,
.hk-sidebar a[href="/account/settings"].is-active::before,
.hk-sidebar a[href$="/account/settings"].is-active::before {
    background-color:
        #f48a70
        !important;
}


/* =========================================================
   END HOJU SETTINGS ICON EXACT URL FINAL V2
   ========================================================= */



/* =========================================================
   HOME REAL PRODUCT IMAGE NORMALIZATION V2
   ZCart original section geometry preserved
   ========================================================= */

/*
 * NEW PRODUCTS
 * Keep every real image inside the same figure geometry
 * as the original ZCart featured-category items.
 */
#hk-new-products
.featured-category.hk-real-featured-product
figure {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:100% !important;
    aspect-ratio:1 / 1 !important;

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

    overflow:hidden !important;
    background:#fff !important;
}

#hk-new-products
.featured-category.hk-real-featured-product
figure img {
    display:block !important;

    width:100% !important;
    height:100% !important;

    max-width:100% !important;
    max-height:100% !important;

    object-fit:contain !important;
    object-position:center center !important;

    margin:auto !important;
}


/*
 * Original ZCart product cards:
 * event / discount / hit / recent products.
 *
 * Different seller image proportions must never change
 * the height of the product card.
 */
.items-slider.hk-real-product
.recent-items-img.box-img {
    position:relative !important;

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

    width:100% !important;
    aspect-ratio:1 / 1 !important;

    overflow:hidden !important;
    background:#fff !important;
}

.items-slider.hk-real-product
.recent-items-img.box-img img {
    display:block !important;

    width:100% !important;
    height:100% !important;

    max-width:100% !important;
    max-height:100% !important;

    object-fit:contain !important;
    object-position:center center !important;

    margin:auto !important;
}


/*
 * Prevent unusually long seller product names
 * from changing slider card height.
 */
.items-slider.hk-real-product
.recent-items-name,
.items-slider.hk-real-product
.box-title {
    display:-webkit-box !important;
    overflow:hidden !important;

    min-height:42px !important;
    max-height:42px !important;

    line-height:21px !important;

    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
}


/*
 * Featured-category product title.
 */
#hk-new-products
.hk-real-featured-product
.featured-category-text h3 {
    display:-webkit-box !important;
    overflow:hidden !important;

    min-height:42px !important;
    max-height:42px !important;

    line-height:21px !important;

    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
}

/* =========================================================
   END HOME REAL PRODUCT IMAGE NORMALIZATION V2
   ========================================================= */


/* =========================================================
   NEW PRODUCTS REAL CARD ZCART NORMALIZATION V3
   ========================================================= */

/*
 * New real products no longer use the circular
 * featured-category image geometry.
 */
#hk-new-products
.hk-real-new-product {
    position:relative !important;
}


/*
 * Fixed image canvas.
 *
 * Seller images may be landscape, portrait or square.
 * The full image remains visible.
 */
#hk-new-products
.hk-real-new-product
.recent-items-img.box-img {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    width:100% !important;
    height:180px !important;

    padding:8px !important;

    overflow:hidden !important;

    background:#fff !important;

    border-radius:0 !important;
}


/*
 * Never crop seller product images.
 */
#hk-new-products
.hk-real-new-product
.recent-items-img.box-img img {
    display:block !important;

    width:100% !important;
    height:100% !important;

    max-width:100% !important;
    max-height:100% !important;

    object-fit:contain !important;
    object-position:center center !important;

    border-radius:0 !important;

    transform:none !important;

    margin:auto !important;
}


/*
 * Product title: max two lines.
 */
#hk-new-products
.hk-real-new-product
.box-title {
    display:-webkit-box !important;

    min-height:42px !important;
    max-height:42px !important;

    overflow:hidden !important;

    line-height:21px !important;

    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
}


/*
 * Prevent image/card geometry inherited from
 * featured-category styles.
 */
#hk-new-products
.hk-real-new-product figure {
    border-radius:0 !important;
    clip-path:none !important;
    overflow:visible !important;
}


/* =========================================================
   END NEW PRODUCTS REAL CARD ZCART NORMALIZATION V3
   ========================================================= */


/* =========================================================
   HOJU NEW PRODUCT CUSTOM CARD V4
   Slider preserved / ZCart border animation preserved
   ========================================================= */

#hk-new-products
.hk-new-product-card {
    width:100% !important;

    margin:0 !important;

    background:#fff !important;

    overflow:hidden !important;
}


/*
 * Keep ZCart border-animate wrapper.
 */
#hk-new-products
.hk-new-product-card-inner {
    display:flex !important;
    flex-direction:column !important;

    width:100% !important;
    height:100% !important;

    background:#fff !important;
}


/* ---------------------------------------------------------
   IMAGE
   --------------------------------------------------------- */

#hk-new-products
.hk-new-product-image-link {
    display:block !important;

    width:100% !important;

    text-decoration:none !important;
}


#hk-new-products
.hk-new-product-image {
    display:flex !important;

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

    width:100% !important;
    height:185px !important;

    padding:12px !important;

    overflow:hidden !important;

    background:#fff !important;
}


#hk-new-products
.hk-new-product-image img {
    display:block !important;

    width:100% !important;
    height:100% !important;

    max-width:100% !important;
    max-height:100% !important;

    object-fit:contain !important;
    object-position:center center !important;

    margin:auto !important;

    border-radius:0 !important;

    transform:none !important;
}


/* ---------------------------------------------------------
   INFO
   --------------------------------------------------------- */

#hk-new-products
.hk-new-product-info {
    padding:12px 13px 14px !important;
}


/*
 * Product name - no rating stars.
 */
#hk-new-products
.hk-new-product-title {
    display:-webkit-box !important;

    min-height:44px !important;
    max-height:44px !important;

    overflow:hidden !important;

    line-height:22px !important;

    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
}


#hk-new-products
.hk-new-product-title a {
    color:#263b49 !important;

    font-size:14px !important;
    font-weight:500 !important;

    text-decoration:none !important;
}


#hk-new-products
.hk-new-product-title a:hover {
    color:#ff6600 !important;
}


/* ---------------------------------------------------------
   PRICE
   --------------------------------------------------------- */

#hk-new-products
.hk-new-product-prices {
    margin-top:8px !important;

    min-height:48px !important;
}


/*
 * Original price is shown only when the actual selling
 * price is lower.
 */
#hk-new-products
.hk-new-product-regular-price {
    height:19px !important;

    color:#222 !important;

    font-size:12px !important;
    font-weight:400 !important;

    line-height:19px !important;

    text-decoration-line:line-through !important;
    text-decoration-color:#111 !important;
    text-decoration-thickness:1.5px !important;
}


/*
 * Preserve same card height on non-discounted items.
 */
#hk-new-products
.hk-new-product-regular-price-placeholder {
    height:19px !important;

    line-height:19px !important;
}


/*
 * Current selling price.
 */
#hk-new-products
.hk-new-product-current-price {
    margin-top:2px !important;

    color:#ff6500 !important;

    font-size:17px !important;
    font-weight:700 !important;

    line-height:24px !important;
}


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

@media (max-width:767px) {

    #hk-new-products
    .hk-new-product-image {
        height:165px !important;
    }

}


/* =========================================================
   END HOJU NEW PRODUCT CUSTOM CARD V4
   ========================================================= */


/* =========================================================
   NEW PRODUCT USE ORIGINAL ZCART BOX ANIMATION V5
   ========================================================= */

/*
 * The outer card must behave exactly like the original
 * ZCart hit-product card.
 */
#hk-new-products
.items-slider.box.border-animate.hk-new-product-card {
    position:relative !important;

    overflow:visible !important;

    /*
     * Do not override ZCart's border animation.
     */
}


/*
 * Do not clip ZCart's animated border at box-inner level.
 */
#hk-new-products
.hk-new-product-card
.box-inner {
    position:relative !important;

    overflow:visible !important;
}


/*
 * Only the image canvas itself clips overflowing images.
 */
#hk-new-products
.hk-new-product-card
.hk-new-product-image {
    overflow:hidden !important;
}


/* =========================================================
   END NEW PRODUCT USE ORIGINAL ZCART BOX ANIMATION V5
   ========================================================= */


/* =========================================================
   HOJU NEW PRODUCT IMAGE FIXED SIZE + COVER V6
   ========================================================= */

/*
 * 신상품 카드 이미지 영역을 항상 동일한 크기로 유지
 */
#hk-new-products
.hk-new-product-card
.hk-new-product-image {
    width:100% !important;
    height:180px !important;

    padding:0 !important;

    overflow:hidden !important;

    background:#f7f7f7 !important;
}


/*
 * 판매자가 어떤 크기/비율의 이미지를 올려도
 * 이미지 영역을 완전히 채움
 */
#hk-new-products
.hk-new-product-card
.hk-new-product-image img {
    display:block !important;

    width:100% !important;
    height:100% !important;

    max-width:none !important;
    max-height:none !important;

    object-fit:cover !important;
    object-position:center center !important;

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

    border-radius:0 !important;

    transform:none !important;
}


/*
 * 모바일에서는 약간 낮게
 */
@media (max-width:767px) {

    #hk-new-products
    .hk-new-product-card
    .hk-new-product-image {
        height:160px !important;
    }

}

/* =========================================================
   END HOJU NEW PRODUCT IMAGE FIXED SIZE + COVER V6
   ========================================================= */


/* =========================================================
   HOJU NEW PRODUCT IMAGE FIXED CANVAS + CONTAIN V7
   ========================================================= */

/*
 * 신상품 이미지 표시 영역의 크기는 항상 동일하게 유지
 */
#hk-new-products
.hk-new-product-card
.hk-new-product-image {
    display:flex !important;

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

    width:100% !important;
    height:180px !important;

    padding:10px !important;

    overflow:hidden !important;

    background:#fff !important;
}


/*
 * 판매자가 어떤 비율의 이미지를 등록해도
 * 원본 비율을 유지하면서 이미지 전체를 표시
 */
#hk-new-products
.hk-new-product-card
.hk-new-product-image img {
    display:block !important;

    width:100% !important;
    height:100% !important;

    max-width:100% !important;
    max-height:100% !important;

    object-fit:contain !important;
    object-position:center center !important;

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

    border-radius:0 !important;

    transform:none !important;
}


/*
 * 모바일
 */
@media (max-width:767px) {

    #hk-new-products
    .hk-new-product-card
    .hk-new-product-image {
        height:160px !important;
        padding:8px !important;
    }

}

/* =========================================================
   END HOJU NEW PRODUCT IMAGE FIXED CANVAS + CONTAIN V7
   ========================================================= */


/* =========================================================
   NEW PRODUCT REGULAR PRICE THIN STRIKETHROUGH V8
   ========================================================= */

#hk-new-products
.hk-new-product-regular-price {
    text-decoration-line:line-through !important;
    text-decoration-color:#111 !important;
    text-decoration-thickness:1px !important;
}

/* =========================================================
   END NEW PRODUCT REGULAR PRICE THIN STRIKETHROUGH V8
   ========================================================= */


/* =========================================================
   HOJU HIT PRODUCTS OWL V1
   Same slider as New Products / hide arrows only
   ========================================================= */

#hk-hit-products
.owl-nav {
    display:none !important;
}


/*
 * Hit product cards must remain visible inside Owl.
 */
#hk-hit-products
.hk-hit-products-carousel {
    width:100% !important;
}


/*
 * Keep ZCart orange border animation visible.
 */
#hk-hit-products
.items-slider.box.border-animate {
    overflow:visible;
}


/* =========================================================
   END HOJU HIT PRODUCTS OWL V1
   ========================================================= */


/* =========================================================
   HOJU HIT PRODUCTS OWL V1
   Same slider as New Products / hide arrows only
   ========================================================= */

#hk-hit-products
.owl-nav {
    display:none !important;
}


/*
 * Hit product cards must remain visible inside Owl.
 */
#hk-hit-products
.hk-hit-products-carousel {
    width:100% !important;
}


/*
 * Keep ZCart orange border animation visible.
 */
#hk-hit-products
.items-slider.box.border-animate {
    overflow:visible;
}


/* =========================================================
   END HOJU HIT PRODUCTS OWL V1
   ========================================================= */


/* =========================================================
   HIT PRODUCTS - USE SAME OWL NAV AS NEW PRODUCTS V2
   ========================================================= */

/*
 * 신상품과 동일한 Owl 좌/우 navigation 복구.
 * 양쪽 끝에 마우스를 올렸을 때 기존 회색 화살표 박스가
 * 나타나는 ZCart/Owl 스타일을 그대로 사용한다.
 */
#hk-hit-products
.hk-hit-products-carousel
.owl-nav {
    display:block !important;
}


/*
 * 별도 모양을 만들지 않는다.
 * 기존 featured-categories Owl nav 스타일을 그대로 상속.
 */


/* =========================================================
   END HIT PRODUCTS - USE SAME OWL NAV AS NEW PRODUCTS V2
   ========================================================= */


/* =========================================================
   HOJU RECOMMENDED PRODUCT 3D CUBE V1
   ========================================================= */

#hk-recommended-products
.hk-recommended-cube-scene {

    --hk-cube-size:700px;
    --hk-cube-depth:350px;

    position:relative;

    width:var(--hk-cube-size);
    height:var(--hk-cube-size);

    max-width:100%;

    margin-top:14px;

    perspective:1800px;

    overflow:visible;
}


/* ---------------------------------------------------------
   CUBE
   --------------------------------------------------------- */

#hk-recommended-products
.hk-recommended-cube {

    position:relative;

    width:100%;
    height:100%;

    transform-style:preserve-3d;

    transform:
        translateZ(
            calc(-1 * var(--hk-cube-depth))
        )
        rotateY(0deg);

    transition:
        transform
        1.05s
        cubic-bezier(.22,.61,.36,1);

    will-change:transform;
}


/* ---------------------------------------------------------
   FOUR FACES
   --------------------------------------------------------- */

#hk-recommended-products
.hk-recommended-cube-face {

    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    overflow:hidden;

    backface-visibility:hidden;

    color:#fff;

    box-shadow:
        0 18px 45px
        rgba(0,0,0,.18);
}


/*
 * FRONT
 */
#hk-recommended-products
.hk-cube-face-1 {

    transform:
        rotateY(0deg)
        translateZ(
            var(--hk-cube-depth)
        );
}


/*
 * RIGHT
 */
#hk-recommended-products
.hk-cube-face-2 {

    transform:
        rotateY(90deg)
        translateZ(
            var(--hk-cube-depth)
        );
}


/*
 * BACK
 */
#hk-recommended-products
.hk-cube-face-3 {

    transform:
        rotateY(180deg)
        translateZ(
            var(--hk-cube-depth)
        );
}


/*
 * LEFT
 */
#hk-recommended-products
.hk-cube-face-4 {

    transform:
        rotateY(270deg)
        translateZ(
            var(--hk-cube-depth)
        );
}


/* ---------------------------------------------------------
   FACE COLORS
   --------------------------------------------------------- */

#hk-recommended-products
.hk-cube-color-black {
    background:#202020;
}

#hk-recommended-products
.hk-cube-color-green {
    background:#174f35;
}

#hk-recommended-products
.hk-cube-color-blue {
    background:#185f87;
}

#hk-recommended-products
.hk-cube-color-crimson {
    background:#8b1739;
}


/* ---------------------------------------------------------
   PRODUCT LINK
   --------------------------------------------------------- */

#hk-recommended-products
.hk-cube-product-link {

    display:flex;
    flex-direction:column;

    width:100%;
    height:100%;

    color:#fff !important;

    text-decoration:none !important;
}


/* ---------------------------------------------------------
   IMAGE
   --------------------------------------------------------- */

#hk-recommended-products
.hk-cube-image-area {

    display:flex;

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

    width:100%;
    height:445px;

    padding:28px 32px 18px;

    overflow:hidden;
}


#hk-recommended-products
.hk-cube-image-area img {

    display:block;

    width:100%;
    height:100%;

    max-width:100%;
    max-height:100%;

    object-fit:contain;
    object-position:center center;

    margin:auto;

    filter:
        drop-shadow(
            0 12px 18px
            rgba(0,0,0,.20)
        );
}


/* ---------------------------------------------------------
   TEXT AREA
   --------------------------------------------------------- */

#hk-recommended-products
.hk-cube-info {

    flex:1;

    padding:
        20px
        38px
        30px;

    border-top:
        1px solid
        rgba(255,255,255,.18);
}


#hk-recommended-products
.hk-cube-product-title {

    display:-webkit-box;

    overflow:hidden;

    min-height:62px;
    max-height:62px;

    color:#fff;

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

    line-height:31px;

    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}


/* ---------------------------------------------------------
   PRICE
   --------------------------------------------------------- */

#hk-recommended-products
.hk-cube-price-row {

    display:flex;

    align-items:baseline;

    gap:13px;

    margin-top:10px;
}


#hk-recommended-products
.hk-cube-regular-price {

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

    font-size:16px;

    text-decoration-line:
        line-through;

    text-decoration-thickness:
        1px;

    text-decoration-color:
        rgba(255,255,255,.85);
}


#hk-recommended-products
.hk-cube-current-price {

    color:#ff8a26;

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


/* ---------------------------------------------------------
   DESCRIPTION
   --------------------------------------------------------- */

#hk-recommended-products
.hk-cube-description {

    display:-webkit-box;

    overflow:hidden;

    margin-top:15px;

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

    font-size:14px;

    line-height:22px;

    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
}


/* ---------------------------------------------------------
   HOVER
   --------------------------------------------------------- */

#hk-recommended-products
.hk-recommended-cube-scene:hover
.hk-cube-product-title {

    color:#ffd19c;
}


/* ---------------------------------------------------------
   TABLET / MOBILE
   --------------------------------------------------------- */

@media (max-width:767px) {

    #hk-recommended-products
    .hk-recommended-cube-scene {

        --hk-cube-size:88vw;
        --hk-cube-depth:44vw;

        margin-left:auto;
        margin-right:auto;

        perspective:1250px;
    }


    #hk-recommended-products
    .hk-cube-image-area {

        height:56vw;

        padding:
            18px
            20px
            12px;
    }


    #hk-recommended-products
    .hk-cube-info {

        padding:
            13px
            20px
            20px;
    }


    #hk-recommended-products
    .hk-cube-product-title {

        min-height:46px;
        max-height:46px;

        font-size:18px;

        line-height:23px;
    }


    #hk-recommended-products
    .hk-cube-current-price {

        font-size:21px;
    }


    #hk-recommended-products
    .hk-cube-description {

        margin-top:8px;

        font-size:12px;

        line-height:18px;

        -webkit-line-clamp:2;
    }

}


/* =========================================================
   END HOJU RECOMMENDED PRODUCT 3D CUBE V1
   ========================================================= */


/* =========================================================
   HOJU FEATURED SHOPS 16 SLOT V1
   ========================================================= */

#hk-recommended-products
.hk-featured-shops-column {
    padding-left:24px;
}


#hk-recommended-products
.hk-featured-shops-panel {
    display:flex;
    flex-direction:column;

    height:700px;

    padding:0;

    background:#fff;
}


/*
 * Header
 */
#hk-recommended-products
.hk-featured-shops-panel
.best-deal-header {
    flex:0 0 auto;
}


/*
 * 4-page viewport
 */
#hk-recommended-products
.hk-featured-shops-pages {
    position:relative;

    flex:1;

    min-height:0;

    overflow:hidden;
}


#hk-recommended-products
.hk-featured-shops-page {
    position:absolute;

    inset:0;

    display:grid;

    grid-template-rows:
        repeat(4,minmax(0,1fr));

    gap:10px;

    opacity:0;
    visibility:hidden;

    transform:translateX(18px);

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


#hk-recommended-products
.hk-featured-shops-page.is-active {
    opacity:1;
    visibility:visible;

    transform:translateX(0);
}


/*
 * Shop card
 */
#hk-recommended-products
.hk-featured-shop-card {
    display:flex;

    align-items:center;

    gap:14px;

    min-height:0;

    padding:11px 12px;

    border:1px solid #e4e8eb;

    background:#fff;

    color:#263b49;

    text-decoration:none;

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


#hk-recommended-products
.hk-featured-shop-card:not(.is-demo):hover {
    border-color:#f07822;

    box-shadow:
        0 5px 16px
        rgba(0,0,0,.08);

    transform:
        translateY(-1px);
}


/*
 * Image
 */
#hk-recommended-products
.hk-featured-shop-image {
    display:flex;

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

    flex:0 0 112px;

    width:112px;
    height:112px;

    overflow:hidden;

    background:#f5f6f7;
}


#hk-recommended-products
.hk-featured-shop-image img {
    display:block;

    width:100%;
    height:100%;

    object-fit:contain;
    object-position:center;

    padding:5px;
}


/*
 * Text
 */
#hk-recommended-products
.hk-featured-shop-info {
    min-width:0;

    flex:1;
}


#hk-recommended-products
.hk-featured-shop-name {
    display:-webkit-box;

    overflow:hidden;

    color:#263b49;

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

    line-height:21px;

    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}


#hk-recommended-products
.hk-featured-shop-label {
    margin-top:8px;

    color:#87939a;

    font-size:12px;
}


#hk-recommended-products
.hk-featured-shop-label span {
    display:block;

    margin-top:3px;

    color:#e56a16;
}


/*
 * Demo cards slightly muted
 */
#hk-recommended-products
.hk-featured-shop-card.is-demo {
    cursor:default;
}


#hk-recommended-products
.hk-featured-shop-card.is-demo
.hk-featured-shop-image img {
    opacity:.86;
}


/*
 * Page indicator
 */
#hk-recommended-products
.hk-featured-shops-indicator {
    flex:0 0 auto;

    padding-top:7px;

    color:#8a969d;

    font-size:11px;

    text-align:center;
}


/*
 * Tablet/mobile:
 * don't force desktop 700px when columns stack.
 */
@media (max-width:1199px) {

    #hk-recommended-products
    .hk-featured-shops-column {
        padding-left:15px;
    }


    #hk-recommended-products
    .hk-featured-shops-panel {
        height:620px;
    }

}


@media (max-width:767px) {

    #hk-recommended-products
    .hk-featured-shops-panel {
        height:560px;
    }


    #hk-recommended-products
    .hk-featured-shop-image {
        flex-basis:88px;

        width:88px;
        height:88px;
    }

}

/* =========================================================
   END HOJU FEATURED SHOPS 16 SLOT V1
   ========================================================= */


/* =========================================================
   FEATURED SHOP CARD DETAILS V2
   ========================================================= */

#hk-recommended-products
.hk-featured-shop-categories {
    margin-top:5px;

    overflow:hidden;

    color:#697a83;

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

    line-height:18px;

    text-overflow:ellipsis;
    white-space:nowrap;
}


#hk-recommended-products
.hk-featured-shop-count {
    margin-top:3px;

    color:#536873;

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

    line-height:18px;
}


#hk-recommended-products
.hk-featured-shop-label {
    margin-top:6px;

    color:#e56a16;

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

    line-height:18px;
}


/*
 * 실제 상점은 상호를 조금 더 강조.
 */
#hk-recommended-products
.hk-featured-shop-name {
    color:#263b49;

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

    line-height:20px;
}


/* =========================================================
   END FEATURED SHOP CARD DETAILS V2
   ========================================================= */


/* =========================================================
   RECOMMENDED CUBE + FEATURED SHOP WIDTH BALANCE V3
   ========================================================= */

@media (min-width:1200px) {

    /*
     * 추천상품 전체 row:
     * Bootstrap 8:4 고정 비율 대신
     * 큐브 700px + 우수상점 나머지 폭 사용
     */
    #hk-recommended-products
    .best-deal-inner > .row {

        display:flex !important;
        flex-wrap:nowrap !important;

        align-items:flex-start !important;

        gap:16px !important;

        margin-left:0 !important;
        margin-right:0 !important;
    }


    /*
     * 왼쪽 큐브 영역
     */
    #hk-recommended-products
    .hk-recommended-cube-column {

        flex:0 0 700px !important;

        width:700px !important;
        max-width:700px !important;

        padding-left:0 !important;
        padding-right:0 !important;
    }


    /*
     * 오른쪽 우수상점 영역:
     * 남은 공간을 모두 사용
     */
    #hk-recommended-products
    .hk-featured-shops-column {

        flex:1 1 auto !important;

        width:auto !important;
        max-width:none !important;

        min-width:0 !important;

        padding-left:0 !important;
        padding-right:0 !important;
    }


    /*
     * 우수상점 패널 자체도 칼럼 폭 100%
     */
    #hk-recommended-products
    .hk-featured-shops-panel {

        width:100% !important;
        max-width:none !important;

        height:700px !important;
    }


    /*
     * 넓어진 영역에 맞춰 카드 내부 이미지도 조금 확대
     */
    #hk-recommended-products
    .hk-featured-shop-image {

        flex:0 0 125px !important;

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


    /*
     * 우측 텍스트 영역 충분히 확보
     */
    #hk-recommended-products
    .hk-featured-shop-info {

        flex:1 1 auto !important;

        min-width:0 !important;

        padding-right:8px !important;
    }


    /*
     * 상호도 넓어진 폭 활용
     */
    #hk-recommended-products
    .hk-featured-shop-name {

        max-width:none !important;

        font-size:15px !important;
    }

}


/* =========================================================
   END RECOMMENDED CUBE + FEATURED SHOP WIDTH BALANCE V3
   ========================================================= */


/* =========================================================
   FEATURED SHOP LINK EMPHASIS V4
   ========================================================= */

#hk-recommended-products
.hk-featured-shop-card:not(.is-demo)
.hk-featured-shop-label {

    color:#e76512 !important;

    font-weight:650 !important;
}


#hk-recommended-products
.hk-featured-shop-card:not(.is-demo):hover
.hk-featured-shop-label {

    text-decoration:underline !important;

    text-underline-offset:3px !important;
}


/* =========================================================
   END FEATURED SHOP LINK EMPHASIS V4
   ========================================================= */


/* =========================================================
   FEATURED SHOP WIDTH -40PX + RIGHT ALIGN V5
   ========================================================= */

@media (min-width:1200px) {

    /*
     * 우수상점 영역을 현재보다 40px 줄이고
     * 오른쪽 끝에 정렬합니다.
     */
    #hk-recommended-products
    .hk-featured-shops-column {

        flex:
            0
            0
            calc(
                100%
                -
                700px
                -
                16px
                -
                40px
            )
            !important;

        width:
            calc(
                100%
                -
                700px
                -
                16px
                -
                40px
            )
            !important;

        max-width:
            calc(
                100%
                -
                700px
                -
                16px
                -
                40px
            )
            !important;

        margin-left:auto !important;

        padding-left:0 !important;
        padding-right:0 !important;
    }


    /*
     * 패널도 오른쪽 정렬
     */
    #hk-recommended-products
    .hk-featured-shops-panel {

        width:100% !important;

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

        height:700px !important;
    }


    /*
     * 4개 카드의 높이를 각각 약 2px씩 증가.
     * 기존 grid 4등분 구조를 유지하면서
     * 카드 자체의 내부 높이를 조금 확장.
     */
    #hk-recommended-products
    .hk-featured-shop-card {

        min-height:
            calc(
                100%
                +
                2px
            )
            !important;
    }


    /*
     * 페이지 내부 4개 카드가
     * 큐브 전체 높이에 더 가깝게 맞도록
     * row gap을 소폭 줄여 보정.
     */
    #hk-recommended-products
    .hk-featured-shops-page {

        gap:8px !important;
    }

}


/* =========================================================
   END FEATURED SHOP WIDTH -40PX + RIGHT ALIGN V5
   ========================================================= */


/* =========================================================
   FEATURED SHOP EXACT WIDTH / HEIGHT FIX V6
   ========================================================= */

@media (min-width:1200px) {

    /*
     * 바깥 Bootstrap column은 그대로 둡니다.
     *
     * 실제 보이는 우수상점 패널만 현재 폭에서 정확히 40px 줄이고
     * 오른쪽 끝에 붙입니다.
     *
     * 결과:
     * 왼쪽 경계가 현재보다 40px 오른쪽으로 이동하므로
     * 3D 큐브 회전 공간이 확보됩니다.
     */
    #hk-recommended-products
    .hk-featured-shops-column
    .hk-featured-shops-panel {

        width:calc(100% - 40px) !important;
        max-width:calc(100% - 40px) !important;

        margin-left:40px !important;
        margin-right:0 !important;

        box-sizing:border-box !important;
    }


    /*
     * 우수상점 4개 카드 행을 각각 기존보다 약 2px 높입니다.
     *
     * 기존 10px gap 기준:
     * (전체높이 - 30px) / 4
     *
     * 변경:
     * (전체높이 - 22px) / 4
     *
     * 따라서 각 카드가 정확히 약 2px씩 높아집니다.
     */
    #hk-recommended-products
    .hk-featured-shops-page {

        display:grid !important;

        grid-template-rows:
            repeat(
                4,
                calc(
                    (100% - 22px)
                    /
                    4
                )
            )
            !important;

        row-gap:7.333px !important;
        column-gap:0 !important;
    }


    /*
     * 카드가 grid row 높이를 정확히 전부 사용하도록 합니다.
     */
    #hk-recommended-products
    .hk-featured-shop-card {

        width:100% !important;
        height:100% !important;

        min-height:0 !important;

        box-sizing:border-box !important;
    }

}


/* =========================================================
   END FEATURED SHOP EXACT WIDTH / HEIGHT FIX V6
   ========================================================= */


/* =========================================================
   RECOMMENDED / FEATURED SHOP FINAL ALIGNMENT V7
   ========================================================= */

@media (min-width:1200px) {

    /* -----------------------------------------------------
       1. 추천상품 / 우수상점 제목 높이 정확히 통일
       ----------------------------------------------------- */

    #hk-recommended-products
    .hk-recommended-cube-column
    .best-deal-header,

    #hk-recommended-products
    .hk-featured-shops-column
    .best-deal-header {

        height:52px !important;
        min-height:52px !important;

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


    #hk-recommended-products
    .hk-recommended-cube-column
    .sell-header,

    #hk-recommended-products
    .hk-featured-shops-column
    .sell-header {

        display:flex !important;

        align-items:center !important;

        height:52px !important;
        min-height:52px !important;

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


    #hk-recommended-products
    .hk-recommended-cube-column
    .sell-header-title,

    #hk-recommended-products
    .hk-featured-shops-column
    .sell-header-title {

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

        height:52px !important;

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


    #hk-recommended-products
    .hk-recommended-cube-column
    .sell-header-title h2,

    #hk-recommended-products
    .hk-featured-shops-column
    .sell-header-title h2 {

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

        line-height:52px !important;
    }


    /* -----------------------------------------------------
       2. 우수상점 영역을 추가로 25px 축소
          이전 40px + 이번 25px = 총 65px 여유
       ----------------------------------------------------- */

    #hk-recommended-products
    .hk-featured-shops-column
    .hk-featured-shops-panel {

        width:calc(100% - 65px) !important;
        max-width:calc(100% - 65px) !important;

        margin-left:65px !important;
        margin-right:0 !important;

        height:700px !important;

        box-sizing:border-box !important;
    }


    /* -----------------------------------------------------
       3. 우수상점 카드 영역을 아래까지 확장
       ----------------------------------------------------- */

    #hk-recommended-products
    .hk-featured-shops-pages {

        position:relative !important;

        flex:none !important;

        width:100% !important;

        /*
         * 700px 패널에서
         * 제목 52px + 페이지 표시 약 18px만 제외
         */
        height:630px !important;

        min-height:630px !important;

        overflow:hidden !important;
    }


    /*
     * 4장의 카드가 630px 영역을 거의 꽉 채우도록 함.
     */
    #hk-recommended-products
    .hk-featured-shops-page {

        position:absolute !important;

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

        display:grid !important;

        width:100% !important;
        height:630px !important;

        grid-template-rows:
            repeat(
                4,
                1fr
            )
            !important;

        gap:6px !important;
    }


    #hk-recommended-products
    .hk-featured-shop-card {

        width:100% !important;
        height:100% !important;

        min-height:0 !important;

        padding-top:10px !important;
        padding-bottom:10px !important;

        box-sizing:border-box !important;
    }


    /* -----------------------------------------------------
       4. 페이지 번호가 별도 큰 공간을 차지하지 않게 조정
       ----------------------------------------------------- */

    #hk-recommended-products
    .hk-featured-shops-indicator {

        height:18px !important;

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

        line-height:16px !important;

        flex:none !important;
    }


    /* -----------------------------------------------------
       5. 화살표도 제목 높이에 맞춰 수직 중앙
       ----------------------------------------------------- */

    #hk-recommended-products
    .hk-featured-shops-panel
    .best-deal-arrow {

        top:auto !important;

        align-self:center !important;

        margin-left:auto !important;
    }

}


/* =========================================================
   END RECOMMENDED / FEATURED SHOP FINAL ALIGNMENT V7
   ========================================================= */


/* =========================================================
   FEATURED SHOP HEADER / CARD GAP V8
   ========================================================= */

@media (min-width:1200px) {

    /*
     * 우수상점 제목과 첫 카드 사이 간격 확대
     */
    #hk-recommended-products
    .hk-featured-shops-pages {

        margin-top:12px !important;

        height:618px !important;
        min-height:618px !important;
    }


    /*
     * 카드 4개 컨테이너도 변경된 높이에 맞춤
     */
    #hk-recommended-products
    .hk-featured-shops-page {

        height:618px !important;

        grid-template-rows:
            repeat(
                4,
                1fr
            )
            !important;

        gap:6px !important;
    }

}


/* =========================================================
   END FEATURED SHOP HEADER / CARD GAP V8
   ========================================================= */


/* =========================================================
   FEATURED SHOP CARD HEIGHT +6PX V9
   ========================================================= */

@media (min-width:1200px) {

    /*
     * 기존 618px에서 24px 증가.
     * 4개 카드 각각 약 6px씩 높아짐.
     */
    #hk-recommended-products
    .hk-featured-shops-pages {

        height:642px !important;
        min-height:642px !important;

        margin-top:12px !important;
    }


    #hk-recommended-products
    .hk-featured-shops-page {

        height:642px !important;

        grid-template-rows:
            repeat(4, 1fr)
            !important;

        gap:6px !important;
    }


    #hk-recommended-products
    .hk-featured-shop-card {

        height:100% !important;
        min-height:0 !important;

        box-sizing:border-box !important;
    }


    /*
     * 페이지 번호는 표시하지 않음.
     * 페이지 전환 기능에는 영향 없음.
     */
    #hk-recommended-products
    .hk-featured-shops-indicator {

        display:none !important;
    }

}


/* =========================================================
   END FEATURED SHOP CARD HEIGHT +6PX V9
   ========================================================= */


/* =========================================================
   HOME PRODUCT RIBBONS + EVENT PRICE V1
   border-animate untouched
   ========================================================= */


/* ---------------------------------------------------------
   Card positioning
   --------------------------------------------------------- */

#hk-new-products
.hk-new-product-card,

#hk-hit-products
.hk-home-real-card,

#hk-event-products
.hk-home-real-card {

    position:relative;
}


/* ---------------------------------------------------------
   Corner ribbon common
   --------------------------------------------------------- */

.hk-product-corner-ribbon {

    position:absolute;

    top:0;
    right:0;

    z-index:12;

    width:76px;
    height:76px;

    overflow:hidden;

    pointer-events:none;

    color:#fff;

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

    letter-spacing:.7px;

    text-align:center;
}


/*
 * 실제 대각 리본
 */
.hk-product-corner-ribbon::before {

    content:"";

    position:absolute;

    width:108px;
    height:29px;

    top:12px;
    right:-30px;

    transform:rotate(45deg);

    box-shadow:
        0 2px 5px
        rgba(0,0,0,.15);
}


.hk-product-corner-ribbon {

    padding-top:17px;
    padding-left:37px;

    transform:none;
}


/*
 * 글자를 리본 위에 표시
 */
.hk-product-corner-ribbon {
    line-height:15px;
}


/* HOT */
.hk-ribbon-hot::before {
    background:#b52332;
}


/* EVENT */
.hk-ribbon-event::before {
    background:#2474a8;
}


/* NEW */
.hk-ribbon-new::before {
    background:#168b73;
}


/* ---------------------------------------------------------
   Because text must sit above ::before
   --------------------------------------------------------- */

.hk-product-corner-ribbon {
    isolation:isolate;
}

.hk-product-corner-ribbon::before {
    z-index:-1;
}


/* ---------------------------------------------------------
   REAL CARD IMAGE
   판매자가 어떤 비율의 이미지를 올려도 잘리지 않음
   --------------------------------------------------------- */

#hk-hit-products
.hk-home-real-card-image,

#hk-event-products
.hk-home-real-card-image {

    display:flex;

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

    overflow:hidden;
}


#hk-hit-products
.hk-home-real-card-image img,

#hk-event-products
.hk-home-real-card-image img {

    display:block;

    width:100%;
    height:100%;

    object-fit:contain;
    object-position:center;
}


/* ---------------------------------------------------------
   Prices
   --------------------------------------------------------- */

.hk-home-real-card-price {

    display:flex;

    align-items:baseline;

    gap:7px;

    margin-top:7px;
}


.hk-home-real-regular-price {

    color:#6f777d;

    font-size:12px;

    text-decoration-line:
        line-through;

    text-decoration-thickness:
        1px;
}


/*
 * 일반/히트 등의 현재가격:
 * 기존 홈의 주황색 계열
 */
.hk-home-real-current-price {

    color:#ff6b00;

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


/*
 * 이벤트상품 가격만 청색
 */
#hk-event-products
.hk-event-current-price {

    color:#1976b9 !important;

    font-weight:800;
}


/* =========================================================
   END HOME PRODUCT RIBBONS + EVENT PRICE V1
   ========================================================= */


/* =========================================================
   HOME PRODUCT RIBBON TEXT ALIGNMENT V2
   ========================================================= */

.hk-product-corner-ribbon {

    position:absolute;

    top:0;
    right:0;

    z-index:20;

    width:82px;
    height:82px;

    overflow:hidden;

    padding:0 !important;

    pointer-events:none;

    font-size:0;

    isolation:isolate;
}


/*
 * 실제 리본 띠
 */
.hk-product-corner-ribbon::before {

    content:"";

    position:absolute;

    top:14px;
    right:-28px;

    z-index:1;

    width:112px;
    height:30px;

    transform:rotate(45deg);

    box-shadow:
        0 2px 5px
        rgba(0,0,0,.18);
}


/*
 * 리본 글자
 * 리본 띠와 같은 45도 방향
 */
.hk-product-corner-ribbon::after {

    position:absolute;

    top:22px;
    right:-2px;

    z-index:2;

    width:76px;

    color:#fff;

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

    letter-spacing:.8px;

    line-height:14px;

    text-align:center;

    transform:rotate(45deg);

    transform-origin:center center;

    white-space:nowrap;
}


/*
 * 각 리본 글자
 */
.hk-ribbon-new::after {
    content:"NEW";
}

.hk-ribbon-hot::after {
    content:"HOT";
}

.hk-ribbon-event::after {
    content:"EVENT";
}


/*
 * 색상
 */
.hk-ribbon-new::before {
    background:#168b73;
}

.hk-ribbon-hot::before {
    background:#b52332;
}

.hk-ribbon-event::before {
    background:#2474a8;
}


/* =========================================================
   END HOME PRODUCT RIBBON TEXT ALIGNMENT V2
   ========================================================= */


/* =========================================================
   EVENT PRODUCT CARD CONSISTENCY V3
   ========================================================= */

#hk-event-products
.hk-home-real-card
.box-inner {

    position:relative;
}


#hk-event-products
.hk-home-real-card-image {

    height:180px;

    padding:10px;

    background:#fff;
}


#hk-event-products
.hk-home-real-card-image img {

    width:100%;
    height:100%;

    object-fit:contain;

    object-position:center;
}


/*
 * 이벤트 정가
 */
#hk-event-products
.hk-home-real-regular-price {

    color:#747d84;

    font-size:12px;

    text-decoration-line:
        line-through;

    text-decoration-thickness:
        1px;
}


/*
 * 이벤트 가격
 */
#hk-event-products
.hk-event-current-price {

    color:#176fa8 !important;

    font-size:17px;

    font-weight:800;
}


/*
 * 별점 공간도 아예 없음
 */
#hk-event-products
.box-ratting {

    display:none !important;
}


/* =========================================================
   END EVENT PRODUCT CARD CONSISTENCY V3
   ========================================================= */


/* =========================================================
   PRODUCT RIBBON TEXT NE 2PX V3
   NEW / HOT / EVENT text only
   ========================================================= */

.hk-product-corner-ribbon::after {
    top:20px !important;
    right:-4px !important;
}


/* =========================================================
   END PRODUCT RIBBON TEXT NE 2PX V3
   ========================================================= */


/* =========================================================
   HOME PRODUCT CARD HOVER TEXT/PPRICE KEEP V1
   HIT / DISCOUNT / EVENT
   border-animate untouched
   ========================================================= */


/*
 * hover 전후 관계없이
 * 상품명과 가격 영역을 항상 보이게 유지
 */
#hk-hit-products
.items-slider.box:hover
.box-title,

#hk-hit-products
.items-slider.box:hover
.box-price,

#hk-event-products
.items-slider.box:hover
.box-title,

#hk-event-products
.items-slider.box:hover
.box-price,

#hk-discount-products
.items-slider.box:hover
.box-title,

#hk-discount-products
.items-slider.box:hover
.box-price {

    opacity:1 !important;

    visibility:visible !important;

    display:block !important;

    transform:none !important;

    filter:none !important;
}


/*
 * 우리가 만든 실제 상품 카드의 제목/가격은
 * hover 여부와 무관하게 항상 유지
 */
#hk-hit-products
.hk-home-real-card
.hk-home-real-card-title,

#hk-hit-products
.hk-home-real-card
.hk-home-real-card-price,

#hk-event-products
.hk-home-real-card
.hk-home-real-card-title,

#hk-event-products
.hk-home-real-card
.hk-home-real-card-price,

#hk-discount-products
.hk-home-real-card
.hk-home-real-card-title,

#hk-discount-products
.hk-home-real-card
.hk-home-real-card-price {

    opacity:1 !important;

    visibility:visible !important;

    transform:none !important;
}


/*
 * 제목 링크도 hover 시 투명/흰색 등으로 바뀌어
 * 안 보이는 현상 방지
 */
#hk-hit-products
.hk-home-real-card:hover
.hk-home-real-card-title a,

#hk-event-products
.hk-home-real-card:hover
.hk-home-real-card-title a,

#hk-discount-products
.hk-home-real-card:hover
.hk-home-real-card-title a {

    opacity:1 !important;

    visibility:visible !important;

    color:inherit !important;
}


/*
 * 기존 ZCart hover에서 나타나는
 * 장바구니/액션 패널이 제목과 가격을 덮지 않게 함.
 *
 * 실제 커스텀 카드에는 이 기능이 필요 없으므로 숨김.
 */
#hk-hit-products
.hk-home-real-card
.box-action,

#hk-hit-products
.hk-home-real-card
.box-action-vertical,

#hk-event-products
.hk-home-real-card
.box-action,

#hk-event-products
.hk-home-real-card
.box-action-vertical,

#hk-discount-products
.hk-home-real-card
.box-action,

#hk-discount-products
.hk-home-real-card
.box-action-vertical {

    display:none !important;
}


/*
 * box-inner 자체가 hover에서 위/아래로 움직이는
 * 테마 효과가 있다면 내용은 제자리에 유지.
 *
 * border-animate pseudo element는 건드리지 않음.
 */
#hk-hit-products
.hk-home-real-card:hover
.box-inner,

#hk-discount-products
.hk-home-real-card:hover
.box-inner {

    transform:none !important;
}


/* =========================================================
   END HOME PRODUCT CARD HOVER TEXT/PRICE KEEP V1
   ========================================================= */














/* =========================================================
   EVENT CARD Y-SPIN FINAL V3
   ========================================================= */


/*
 * 이벤트상품에서는 ZCart 주황색 border animation 제거
 */
#hk-event-products
.border-animate::before,

#hk-event-products
.border-animate::after {

    display:none !important;
    content:none !important;
    animation:none !important;
}


/*
 * ZCart 기본 hover outline도 이벤트상품에서는 제거
 */
#hk-event-products
.items-slider.box:hover {

    outline:none !important;

    box-shadow:
        0 7px 20px
        rgba(28,111,168,.16)
        !important;
}


/*
 * 3D 공간
 */
#hk-event-products
.hk-home-real-card {

    perspective:1200px !important;

    overflow:visible !important;
}


/*
 * 평상시
 */
#hk-event-products
.hk-home-real-card > .box-inner {

    position:relative !important;

    transform:none !important;

    transform-origin:
        center center
        !important;

    transform-style:
        preserve-3d
        !important;

    backface-visibility:
        visible
        !important;

    will-change:transform;
}


/*
 * 마우스를 올렸을 때 정확히 한 바퀴
 */
#hk-event-products
.hk-home-real-card:hover > .box-inner {

    animation:
        hk-event-y-spin-final
        850ms
        ease-in-out
        1
        both
        !important;
}


/*
 * Y축 회전
 */
@keyframes hk-event-y-spin-final {

    0% {
        transform:
            perspective(1200px)
            rotateY(0deg);
    }

    25% {
        transform:
            perspective(1200px)
            rotateY(90deg);
    }

    50% {
        transform:
            perspective(1200px)
            rotateY(180deg);
    }

    75% {
        transform:
            perspective(1200px)
            rotateY(270deg);
    }

    100% {
        transform:
            perspective(1200px)
            rotateY(360deg);
    }

}


/*
 * 제목과 가격은 계속 유지
 */
#hk-event-products
.hk-home-real-card:hover
.hk-home-real-card-title,

#hk-event-products
.hk-home-real-card:hover
.hk-home-real-card-price {

    opacity:1 !important;

    visibility:visible !important;
}


/* =========================================================
   END EVENT CARD Y-SPIN FINAL V3
   ========================================================= */


/* =========================================================
   EVENT PRODUCT ISOLATED Y-SPIN V4
   Completely independent from ZCart box-inner transforms
   ========================================================= */


/*
 * 이벤트 카드 자체에는 기존 hover outline도 표시하지 않음
 */
#hk-event-products
.hk-card-type-event,
#hk-event-products
.hk-card-type-event:hover {

    outline:none !important;

    border-color:transparent !important;
}


/*
 * 이벤트 전용 회전 surface
 * 기존 ZCart CSS에는 존재하지 않는 새로운 class입니다.
 */
#hk-event-products
.hk-event-spin-surface {

    position:relative;

    width:100%;

    transform:
        perspective(1200px)
        rotateY(0deg);

    transform-origin:
        center center;

    transform-style:
        preserve-3d;

    backface-visibility:
        visible;

    will-change:transform;
}


/*
 * 카드에 마우스를 올리면 새 surface만 회전
 */
#hk-event-products
.hk-card-type-event:hover
.hk-event-spin-surface {

    animation:
        hkEventIsolatedSpin
        900ms
        cubic-bezier(.45,.05,.35,1)
        1;
}


/*
 * 한 바퀴
 */
@keyframes hkEventIsolatedSpin {

    0% {
        transform:
            perspective(1200px)
            rotateY(0deg);
    }

    20% {
        transform:
            perspective(1200px)
            rotateY(72deg);
    }

    40% {
        transform:
            perspective(1200px)
            rotateY(144deg);
    }

    60% {
        transform:
            perspective(1200px)
            rotateY(216deg);
    }

    80% {
        transform:
            perspective(1200px)
            rotateY(288deg);
    }

    100% {
        transform:
            perspective(1200px)
            rotateY(360deg);
    }

}


/*
 * EVENT ribbon도 surface 안에 있기 때문에
 * 이미지/제목/가격과 함께 회전합니다.
 */
#hk-event-products
.hk-event-spin-surface
.hk-product-corner-ribbon {

    backface-visibility:visible;
}


/* =========================================================
   END EVENT PRODUCT ISOLATED Y-SPIN V4
   ========================================================= */


/* =========================================================
   DISCOUNT CARD FIXED SIZE + KEEP BORDER ANIMATION V1
   ========================================================= */


/*
 * 할인상품 카드 크기 고정
 */
#hk-discount-products
.hk-card-type-discount {

    position:relative !important;

    height:auto !important;

    min-height:0 !important;

    transform:none !important;

    box-sizing:border-box !important;
}


/*
 * 마우스를 올려도 카드 자체 높이/scale 변경 금지
 */
#hk-discount-products
.hk-card-type-discount:hover {

    height:auto !important;

    transform:none !important;

    scale:1 !important;
}


/*
 * 내부도 위/아래 이동 또는 축소 금지
 */
#hk-discount-products
.hk-card-type-discount
.box-inner,

#hk-discount-products
.hk-card-type-discount:hover
.box-inner {

    transform:none !important;

    height:auto !important;

    min-height:100% !important;
}


/*
 * 상품명과 가격 항상 표시
 */
#hk-discount-products
.hk-card-type-discount
.hk-home-real-card-title,

#hk-discount-products
.hk-card-type-discount
.hk-home-real-card-price,

#hk-discount-products
.hk-card-type-discount:hover
.hk-home-real-card-title,

#hk-discount-products
.hk-card-type-discount:hover
.hk-home-real-card-price {

    display:flex !important;

    opacity:1 !important;

    visibility:visible !important;

    transform:none !important;
}


/*
 * 제목은 일반 block 형태
 */
#hk-discount-products
.hk-card-type-discount
.hk-home-real-card-title {

    display:block !important;
}


/*
 * 가격은 한 줄 배치
 */
#hk-discount-products
.hk-card-type-discount
.hk-home-real-card-price {

    display:flex !important;

    align-items:baseline !important;

    gap:7px !important;
}


/*
 * 정가 취소선
 */
#hk-discount-products
.hk-home-real-regular-price {

    color:#747d84 !important;

    font-size:12px !important;

    text-decoration-line:
        line-through !important;

    text-decoration-thickness:
        1px !important;
}


/*
 * 할인가
 */
#hk-discount-products
.hk-home-real-current-price {

    color:#ff6b00 !important;

    font-size:17px !important;

    font-weight:800 !important;
}


/*
 * 별점은 어떤 잔존 markup이 있어도 제거
 */
#hk-discount-products
.box-ratting {

    display:none !important;
}


/*
 * 주황색 border-animate 관련 pseudo element는
 * 여기서 전혀 수정하지 않습니다.
 */


/* =========================================================
   END DISCOUNT CARD FIXED SIZE + KEEP BORDER ANIMATION V1
   ========================================================= */


/* =========================================================
   HOJU PRODUCT RIBBON COLOR FINAL V5
   Existing ribbon geometry / angle untouched
   ========================================================= */

/*
 * 일반 신상품
 */
.hk-ribbon-new::before {
    background:#168b73 !important;
}

.hk-ribbon-new::after {
    content:"NEW" !important;
}


/*
 * 히트상품
 * 기존 HOT 유지
 */
.hk-ribbon-hot::before {
    background:#b52332 !important;
}

.hk-ribbon-hot::after {
    content:"HOT" !important;
}


/*
 * 이벤트상품
 */
.hk-ribbon-event::before {
    background:#2474a8 !important;
}

.hk-ribbon-event::after {
    content:"EVENT" !important;
}


/*
 * 할인상품
 */
.hk-ribbon-discount::before {
    background:#e31b23 !important;
}

.hk-ribbon-discount::after {
    content:"SALE" !important;

    /*
     * 글자가 길기 때문에 리본 안에 들어가도록
     * DISCOUNT만 약간 작게 표시
     */
    font-size:9px !important;
    letter-spacing:.15px !important;
}


/* =========================================================
   END HOJU PRODUCT RIBBON COLOR FINAL V5
   ========================================================= */


/* =========================================================
   SELLER DASHBOARD HEADER ACTIONS V1
   ========================================================= */

.hk-dashboard-header-actions {

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:8px;

    flex-wrap:wrap;

    margin-left:auto;
}


@media (max-width:900px) {

    .hk-dashboard-header-actions {

        justify-content:flex-start;

        margin-left:0;
    }

}


/* =========================================================
   END SELLER DASHBOARD HEADER ACTIONS V1
   ========================================================= */


/* =========================================================
   HOME INTEREST PRODUCTS V1
   ========================================================= */

#hk-interest-products {

    padding:
        24px
        0
        38px;
}


.hk-interest-products-grid {

    display:grid;

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

    gap:
        12px
        24px;

    margin-top:12px;
}


.hk-interest-card {

    position:relative;

    display:flex;

    align-items:center;

    min-height:92px;

    overflow:hidden;

    border:
        1px solid
        #edf0f2;

    border-radius:8px;

    background:#fff;

    box-sizing:border-box;
}


.hk-interest-image {

    position:relative;

    display:flex;

    align-items:center;

    justify-content:center;

    flex:
        0
        0
        105px;

    width:105px;
    height:90px;

    padding:7px;

    box-sizing:border-box;

    background:#fff;
}


.hk-interest-image img {

    display:block;

    width:100%;
    height:100%;

    object-fit:contain;

    object-position:center;
}


.hk-interest-no-image {

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;
    height:100%;

    background:#31566d;

    color:#fff;

    font-size:10px;
}


.hk-interest-info {

    min-width:0;

    padding:
        10px
        12px
        10px
        5px;
}


.hk-interest-name {

    min-height:36px;

    overflow:hidden;

    color:#253e4b;

    font-size:13px;

    line-height:1.4;
}


.hk-interest-name a {

    color:inherit !important;

    text-decoration:none !important;
}


.hk-interest-price {

    display:flex;

    align-items:baseline;

    flex-wrap:wrap;

    gap:7px;

    margin-top:5px;
}


.hk-interest-regular-price {

    color:#727d83;

    font-size:11px;

    text-decoration-line:
        line-through;

    text-decoration-thickness:
        1px;
}


.hk-interest-current-price {

    color:#ef6d19;

    font-size:16px;

    font-weight:800;
}


.hk-interest-current-price.is-event {

    color:#2474a8;
}


/*
 * Hover quick actions
 */

.hk-interest-actions {

    position:absolute;

    inset:0;

    z-index:10;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:7px;

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

    opacity:0;

    visibility:hidden;

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


.hk-interest-card:hover
.hk-interest-actions {

    opacity:1;

    visibility:visible;
}


.hk-interest-action {

    display:flex;

    align-items:center;

    justify-content:center;

    width:32px;
    height:32px;

    padding:0;

    border:
        1px solid
        #d4dee3;

    border-radius:50%;

    background:#fff;

    color:#294b5d !important;

    cursor:pointer;

    text-decoration:none !important;
}


.hk-interest-action:hover {

    border-color:#ef761e;

    color:#ef761e !important;
}


.hk-interest-action:disabled {

    opacity:.45;

    cursor:default;
}


/*
 * Demo card에는 별점 없음.
 */

#hk-interest-products
.best-seller-item-rating {

    display:none !important;
}


@media(max-width:991px) {

    .hk-interest-products-grid {

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

}


@media(max-width:600px) {

    .hk-interest-products-grid {

        grid-template-columns:
            1fr;
    }

}


/* =========================================================
   END HOME INTEREST PRODUCTS V1
   ========================================================= */


/* =========================================================
   INTEREST QUICK VIEW MODAL V1
   ========================================================= */

.hk-interest-modal {

    position:fixed;

    inset:0;

    z-index:99999;

    display:none;

    align-items:center;

    justify-content:center;

    padding:30px;

    background:
        rgba(
            10,
            23,
            31,
            .63
        );
}


.hk-interest-modal.is-open {

    display:flex;
}


.hk-interest-modal-dialog {

    position:relative;

    width:min(
        1180px,
        96vw
    );

    height:min(
        820px,
        90vh
    );

    overflow:hidden;

    border-radius:12px;

    background:#fff;

    box-shadow:
        0 18px 55px
        rgba(
            0,
            0,
            0,
            .30
        );
}


.hk-interest-modal-dialog iframe {

    display:block;

    width:100%;
    height:100%;

    border:0;
}


.hk-interest-modal-close {

    position:absolute;

    top:10px;
    right:12px;

    z-index:5;

    width:38px;
    height:38px;

    border:0;

    border-radius:50%;

    background:
        rgba(
            25,
            43,
            54,
            .90
        );

    color:#fff;

    font-size:25px;

    line-height:36px;

    cursor:pointer;
}


/* =========================================================
   END INTEREST QUICK VIEW MODAL V1
   ========================================================= */


/* =========================================================
   INTEREST CARD ORANGE BORDER FINAL V2
   ========================================================= */

#hk-interest-products
.hk-interest-card {

    position:relative !important;

    overflow:hidden !important;

    transform:none !important;

    box-sizing:border-box !important;
}


/*
 * 기존 ZCart border-animate 효과가
 * 새 관심상품 카드와 충돌하지 않도록 제거
 */
#hk-interest-products
.hk-interest-card.border-animate::before,
#hk-interest-products
.hk-interest-card.border-animate::after {

    content:none !important;
}


/*
 * 자체 테두리 애니메이션 레이어
 */
#hk-interest-products
.hk-interest-card {

    background:
        linear-gradient(
            90deg,
            #f47b20,
            #f47b20
        )
        top left
        / 0 2px
        no-repeat,

        linear-gradient(
            180deg,
            #f47b20,
            #f47b20
        )
        top right
        / 2px 0
        no-repeat,

        linear-gradient(
            270deg,
            #f47b20,
            #f47b20
        )
        bottom right
        / 0 2px
        no-repeat,

        linear-gradient(
            0deg,
            #f47b20,
            #f47b20
        )
        bottom left
        / 2px 0
        no-repeat,

        #fff !important;
}


#hk-interest-products
.hk-interest-card:hover {

    animation:
        hkInterestBorderRun
        .72s
        linear
        forwards;

    transform:none !important;

    height:auto !important;
}


@keyframes hkInterestBorderRun {

    0% {

        background-size:
            0 2px,
            2px 0,
            0 2px,
            2px 0;
    }


    25% {

        background-size:
            100% 2px,
            2px 0,
            0 2px,
            2px 0;
    }


    50% {

        background-size:
            100% 2px,
            2px 100%,
            0 2px,
            2px 0;
    }


    75% {

        background-size:
            100% 2px,
            2px 100%,
            100% 2px,
            2px 0;
    }


    100% {

        background-size:
            100% 2px,
            2px 100%,
            100% 2px,
            2px 100%;
    }

}


/*
 * 액션 버튼이 반드시 클릭 가능하도록
 */
#hk-interest-products
.hk-interest-actions {

    z-index:40 !important;

    pointer-events:auto !important;
}


#hk-interest-products
.hk-interest-action {

    position:relative;

    z-index:45;

    pointer-events:auto !important;
}


/*
 * 실제 상품만 액션 가능
 */
#hk-interest-products
.hk-interest-card.is-demo
.hk-interest-action {

    pointer-events:none !important;
}


/*
 * 활성 상태
 */
#hk-interest-products
.hk-interest-wishlist.is-active {

    color:#e15063 !important;

    border-color:#e15063 !important;
}


#hk-interest-products
.hk-interest-cart.is-active {

    color:#176b91 !important;

    border-color:#176b91 !important;
}


/* =========================================================
   ACTION TOAST
   ========================================================= */

.hk-interest-toast {

    position:fixed;

    left:50%;
    bottom:34px;

    z-index:100000;

    min-width:270px;

    max-width:
        calc(100% - 30px);

    padding:
        12px
        20px;

    border-radius:7px;

    background:
        rgba(
            29,
            55,
            69,
            .96
        );

    color:#fff;

    font-size:14px;

    font-weight:700;

    text-align:center;

    opacity:0;

    visibility:hidden;

    transform:
        translate(
            -50%,
            12px
        );

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

    box-shadow:
        0 5px 18px
        rgba(
            0,
            0,
            0,
            .18
        );
}


.hk-interest-toast.is-show {

    opacity:1;

    visibility:visible;

    transform:
        translate(
            -50%,
            0
        );
}


.hk-interest-toast.is-error {

    background:#9a2932;
}


/* =========================================================
   END INTEREST CARD ORANGE BORDER FINAL V2
   ========================================================= */


/* =========================================================
   INTEREST DEMO ACTION ENABLE FINAL V1
   ========================================================= */

#hk-interest-products
.hk-interest-card.is-demo
.hk-interest-action {

    pointer-events:auto !important;

    opacity:1 !important;

    cursor:pointer !important;
}


/* =========================================================
   END INTEREST DEMO ACTION ENABLE FINAL V1
   ========================================================= */


/* =========================================================
   WISHLIST ADD TO CART V1
   ========================================================= */

.hk-wishlist-add-cart {

    display:flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    width:100%;

    min-height:39px;

    padding:
        8px
        12px;

    border:
        1px solid
        #176b91;

    border-radius:6px;

    background:#176b91;

    color:#fff;

    font-size:13px;

    font-weight:700;

    cursor:pointer;

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


.hk-wishlist-add-cart:hover {

    border-color:#125b7c;

    background:#125b7c;
}


/* =========================================================
   END WISHLIST ADD TO CART V1
   ========================================================= */






/* =========================================================
   CART PAGE WIDE LAYOUT V2
   부모 container 폭과 관계없이 cart-grid 자체를 확대
   ========================================================= */

.cart-grid {

    width:
        min(
            1120px,
            calc(100vw - 60px)
        ) !important;

    max-width:none !important;

    position:relative;

    left:50%;

    transform:
        translateX(-50%);

    display:grid !important;

    grid-template-columns:
        minmax(0, 2.15fr)
        minmax(300px, .85fr) !important;

    gap:22px !important;

    align-items:start;
}


/*
 * 두 카드 모두 각 grid column 내부에 정확히 맞춤
 */
.cart-grid > .hk-card {

    width:100% !important;

    min-width:0 !important;

    max-width:none !important;

    box-sizing:border-box !important;
}


/*
 * 이전 min-width 때문에 생긴 수평 스크롤 방지
 */
.cart-grid .hk-table-wrap {

    width:100% !important;

    max-width:100% !important;

    overflow-x:auto;
}


.cart-grid .hk-table {

    width:100% !important;

    min-width:0 !important;

    table-layout:auto;
}


/*
 * 상품 영역에 조금 더 여유
 */
.cart-grid .hk-table th:first-child,
.cart-grid .hk-table td:first-child {

    width:36%;
}


/*
 * 주문 금액 카드 내부가 밖으로 나오지 않도록
 */
.cart-grid > .hk-card:last-child {

    overflow:hidden;

    box-sizing:border-box;
}


/*
 * 태블릿
 */
@media (max-width:900px) {

    .cart-grid {

        width:
            calc(100vw - 30px)
            !important;

        grid-template-columns:
            1fr !important;

        left:50%;

        transform:
            translateX(-50%);
    }

}


/* =========================================================
   END CART PAGE WIDE LAYOUT V2
   ========================================================= */


/* =========================================================
   HEADER ICON CLICK VISUAL RESET V1
   ========================================================= */

a.hk-header-icon-link,
a.hk-header-icon-link:hover,
a.hk-header-icon-link:focus,
a.hk-header-icon-link:active,
a.hk-header-icon-link:focus-visible {

    background:transparent !important;

    border-color:transparent !important;

    border-radius:0 !important;

    box-shadow:none !important;

    outline:none !important;

    transform:none !important;
}


a.hk-header-icon-link::before,
a.hk-header-icon-link::after {

    box-shadow:none !important;
}


/* =========================================================
   END HEADER ICON CLICK VISUAL RESET V1
   ========================================================= */


/* =========================================================
   HEADER ICON CLICK / FOCUS FINAL FIX V2

   hover:
       기존 효과 유지

   click / focus:
       배경 원/타원 제거
       tooltip 유지하지 않음
   ========================================================= */


/*
 * 마우스를 올렸을 때만 기존 hover 효과
 */
.hk-header-icon:hover {

    background:#eef5f8 !important;

    color:#075b9b !important;

    transform:
        translateY(-1px) !important;
}


/*
 * 클릭 후 focus 상태에서는
 * 원형/타원형 배경을 만들지 않는다.
 */
.hk-header-icon:focus,
.hk-header-icon:focus-visible,
.hk-header-icon:active {

    background:
        transparent !important;

    background-color:
        transparent !important;

    border:
        0 !important;

    outline:
        0 !important;

    box-shadow:
        none !important;

    color:#304c5e !important;

    transform:
        none !important;

    -webkit-tap-highlight-color:
        transparent !important;
}


/*
 * focus 때문에 tooltip이 계속 남는 현상 제거.
 *
 * tooltip은 hover일 때만 표시한다.
 */
.hk-header-icon:focus
.hk-header-tooltip,

.hk-header-icon:focus-visible
.hk-header-tooltip,

.hk-header-icon:active
.hk-header-tooltip {

    opacity:0 !important;

    visibility:hidden !important;

    pointer-events:none !important;

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


/*
 * 실제 hover 상태일 때만 다시 표시.
 */
.hk-header-icon:hover
.hk-header-tooltip {

    opacity:1 !important;

    visibility:visible !important;

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


/*
 * 내부 아이콘 자체에도 focus 효과 금지
 */
.hk-header-icon i,
.hk-header-icon i:focus,
.hk-header-icon i:active {

    outline:none !important;

    box-shadow:none !important;

    background:
        transparent !important;
}


/* =========================================================
   END HEADER ICON CLICK / FOCUS FINAL FIX V2
   ========================================================= */


/* =========================================================
   COOKIE CONSENT KOREAN UI V1
   ========================================================= */

#consentBox {

    width:
        min(
            520px,
            calc(100% - 30px)
        );

    left:15px !important;

    bottom:15px !important;

    padding:18px 20px !important;

    box-sizing:border-box;

    text-align:left !important;
}


#consentContent p {

    margin:
        0
        0
        15px !important;

    color:#667783 !important;

    font-size:13px;

    line-height:1.65;
}


#consentContent p a {

    color:#075b9b;

    font-weight:700;
}


#consentContent .buttons {

    justify-content:flex-start !important;

    margin-top:12px !important;
}


#consentContent .consentButton,
#consentContent .rejectButton {

    padding:
        9px
        22px !important;

    font-size:13px !important;
}


/* =========================================================
   END COOKIE CONSENT KOREAN UI V1
   ========================================================= */


/* =========================================================
   COOKIE CONSENT CENTER BOTTOM + POLICY BUTTON FIX V2
   ========================================================= */


/*
 * 쿠키창을 화면 중앙 하단으로 이동
 */
#consentBox {

    width:
        min(
            560px,
            calc(100% - 30px)
        ) !important;

    left:50% !important;

    right:auto !important;

    bottom:18px !important;

    transform:
        translateX(-50%) !important;

    margin:0 !important;

    box-sizing:border-box !important;
}


/*
 * 숨길 때도 중앙 위치 유지
 */
#consentBox.hide {

    opacity:0 !important;

    pointer-events:none !important;

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


/*
 * 버튼 영역 중앙 정렬
 */
#consentContent .buttons {

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    flex-wrap:wrap !important;

    gap:10px !important;

    margin-top:14px !important;
}


/*
 * 3개 버튼 공통 크기
 */
#consentContent .consentButton,
#consentContent .rejectButton,
#consentContent a.cookiePolicyButton {

    display:inline-flex !important;

    align-items:center !important;

    justify-content:center !important;

    min-width:110px !important;

    min-height:40px !important;

    margin:0 !important;

    padding:
        10px
        18px !important;

    border-radius:6px !important;

    font-size:13px !important;

    font-weight:700 !important;

    line-height:1 !important;

    text-align:center !important;

    text-decoration:none !important;

    box-sizing:border-box !important;

    cursor:pointer !important;
}


/*
 * 쿠키 정책 보기
 * 링크가 아니라 버튼처럼 확실하게 표시
 */
#consentContent a.cookiePolicyButton {

    border:
        1px solid
        #496979 !important;

    background:
        #496979 !important;

    background-color:
        #496979 !important;

    color:
        #ffffff !important;

    text-decoration:
        none !important;
}


#consentContent a.cookiePolicyButton:link,
#consentContent a.cookiePolicyButton:visited {

    color:#ffffff !important;

    text-decoration:none !important;
}


#consentContent a.cookiePolicyButton:hover {

    border-color:
        #365563 !important;

    background:
        #365563 !important;

    background-color:
        #365563 !important;

    color:
        #ffffff !important;

    text-decoration:
        none !important;
}


#consentContent a.cookiePolicyButton:focus,
#consentContent a.cookiePolicyButton:active {

    outline:none !important;

    box-shadow:none !important;

    color:#ffffff !important;

    text-decoration:none !important;
}


/*
 * 모바일
 */
@media (max-width:520px) {

    #consentBox {

        width:
            calc(100% - 20px)
            !important;

        bottom:
            10px !important;
    }


    #consentContent .buttons {

        gap:
            7px !important;
    }


    #consentContent .consentButton,
    #consentContent .rejectButton,
    #consentContent a.cookiePolicyButton {

        min-width:
            96px !important;

        padding:
            9px
            12px !important;
    }

}


/* =========================================================
   END COOKIE CONSENT CENTER BOTTOM + POLICY BUTTON FIX V2
   ========================================================= */


/* =========================================================
   ADMIN NEWSLETTER MENU ICON V1
   ========================================================= */

.hk-newsletter-menu-icon {

    position:relative;

    display:block;

    width:15px;

    height:11px;

    border:
        1.7px solid
        currentColor;

    border-radius:2px;

    box-sizing:border-box;
}


.hk-newsletter-menu-icon::before {

    content:"";

    position:absolute;

    left:2px;
    top:1px;

    width:8px;
    height:8px;

    border-left:
        1.5px solid
        currentColor;

    border-bottom:
        1.5px solid
        currentColor;

    transform:
        rotate(-45deg);

    transform-origin:center;
}


/* =========================================================
   END ADMIN NEWSLETTER MENU ICON V1
   ========================================================= */


/* =========================================================
   NEWSLETTER PDF WEBZINE V1
   ========================================================= */

.newsletter-webzine-pages {

    margin-top:14px;

    padding:12px;

    background:#eef2f4;

    border-radius:8px;
}


.newsletter-webzine-page {

    position:relative;

    max-width:680px;

    margin:
        0
        auto
        14px;

    padding:10px;

    background:#fff;

    border:
        1px solid
        #dbe3e8;

    border-radius:7px;

    box-shadow:
        0
        2px
        8px
        rgba(0,0,0,.05);
}


.newsletter-webzine-page:last-child {

    margin-bottom:0;
}


.newsletter-webzine-page img {

    display:block;

    width:100%;

    height:auto;

    margin:0 auto;
}


.newsletter-webzine-page-number {

    margin-bottom:7px;

    color:#7a8993;

    font-size:11px;

    font-weight:700;

    text-align:right;
}


/* =========================================================
   END NEWSLETTER PDF WEBZINE V1
   ========================================================= */


/* =========================================================
   HOJU_ADMIN_NEWSLETTER_ICON_FINAL_V1

   IMPORTANT:
   Admin sidebar .hk-nav-icon is intentionally hidden
   by the existing modern sidebar system.

   Therefore newsletter follows exactly the same method
   as Closing / Settings:
       <a> ::before = visible icon tile

   Icon artwork itself is reused from the existing
   seller messages icon. No new SVG is created here.
   ========================================================= */

.hk-sidebar a[href="/admin/newsletter"]::before,
.hk-sidebar a[href$="/admin/newsletter"]::before {

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e6f0f4' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5h16v11H9l-5 4v-15Z'/%3E%3Cpath d='M8 9h8M8 13h5'/%3E%3C/svg%3E")
        !important;

    background-repeat:
        no-repeat
        !important;

    background-position:
        center
        !important;

    background-size:
        17px 17px
        !important;
}


/*
 * Active tile colour is already handled by the
 * common admin sidebar system.
 */

.hk-sidebar
a[href="/admin/newsletter"].is-active::before,
.hk-sidebar
a[href$="/admin/newsletter"].is-active::before {

    background-color:
        var(--hk-coral)
        !important;
}

/* =========================================================
   END HOJU_ADMIN_NEWSLETTER_ICON_FINAL_V1
   ========================================================= */



/* =========================================================
   DISCOUNT SALE RIBBON TEXT POSITION V1
   SALE only
   ========================================================= */

.hk-ribbon-discount::after {
    font-size:12px !important;

    /* 기존 top:20px -> 위로 1px */
    top:19px !important;

    /* 기존 right:-4px -> 오른쪽으로 1px */
    right:-5px !important;

    letter-spacing:.15px !important;
}



/* =========================================================
   HOJU HOME CATEGORY BANNERS V3
   ========================================================= */

#hk-home-category-banners
.banner-box {
    overflow:hidden;
}

#hk-home-category-banners
.banner-box img {
    display:block;
    width:100%;
    height:auto;
    aspect-ratio:350 / 160;
    object-fit:contain;
}

#hk-home-category-banners
a {
    display:block;
}

@media (max-width:767px) {

    #hk-home-category-banners
    .col-6 {
        margin-bottom:12px;
    }

}



/* =========================================================
   HOME CATEGORY BANNERS - FULL IMAGE V4
   350x160 원본 전체 표시
   ========================================================= */

#hk-home-category-banners .image-banner,
#hk-home-category-banners .banner-box {
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    overflow:visible !important;

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


#hk-home-category-banners .banner-box img {
    display:block !important;

    width:100% !important;
    max-width:100% !important;

    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    aspect-ratio:auto !important;

    object-fit:contain !important;
    object-position:center center !important;

    transform:none !important;

    margin:0 auto !important;
}


/*
 * 기존 banner hover가 확대하면서
 * 가장자리를 자르는 현상 방지
 */
#hk-home-category-banners
.hk-category-search-banner:hover img,
#hk-home-category-banners
a:hover img {
    transform:none !important;
}


/*
 * 기존 테마의 banner overlay도
 * 이 네 개 배너에서는 사용하지 않음
 */
#hk-home-category-banners .banner-overlay {
    display:none !important;
}


/*
 * PC: 4개 한 줄
 */
#hk-home-category-banners .row {
    align-items:flex-start;
}


/*
 * 모바일: 2 x 2
 */
@media (max-width:767px) {

    #hk-home-category-banners
    .col-6 {
        margin-bottom:12px;
    }

}



/* =========================================================
   HOME WIDE CATEGORY BANNERS V1
   Moms & Babies / Sports
   ========================================================= */

.hk-home-wide-category-banner {
    display:block;
    width:100%;
    text-decoration:none;
}

.hk-home-wide-category-banner
.banner-box {
    width:100% !important;
    height:auto !important;
    overflow:hidden;
}

.hk-home-wide-category-banner
.banner-box img {
    display:block !important;

    width:100% !important;
    max-width:100% !important;

    height:auto !important;

    aspect-ratio:700 / 320;

    object-fit:contain !important;
    object-position:center center !important;

    margin:0 auto;
}



/* =========================================================
   HOJU EVENT BOTTOM 3 CATEGORY BANNERS V1
   ========================================================= */

#hk-event-category-banners
.hk-event-category-banner {
    display:block;
    width:100%;
    text-decoration:none;
}


#hk-event-category-banners
.image-banner,
#hk-event-category-banners
.banner-box {
    width:100% !important;
    height:auto !important;

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

    overflow:hidden;
}


#hk-event-category-banners
.banner-box img {
    display:block !important;

    width:100% !important;
    max-width:100% !important;

    height:auto !important;

    object-fit:contain !important;
    object-position:center center !important;

    margin:0 auto !important;

    transform:none !important;
}


/*
 * 기존 테마 hover 확대에 의한
 * 이미지 가장자리 잘림 방지
 */
#hk-event-category-banners
a:hover img {
    transform:none !important;
}


/*
 * 새 이미지에는 기존 데모 overlay 불필요
 */
#hk-event-category-banners
.banner-overlay {
    display:none !important;
}


@media (max-width:767px) {

    #hk-event-category-banners
    .col-12 {
        margin-bottom:14px;
    }

}



/* =========================================================
   HOJU HOME BOTTOM TWO CATEGORY BANNERS V1
   ========================================================= */

#hk-home-bottom-category-banners
.hk-home-bottom-category-banner {
    display:block;
    width:100%;
    text-decoration:none;
}


#hk-home-bottom-category-banners
.image-banner,
#hk-home-bottom-category-banners
.banner-box {
    width:100% !important;
    height:auto !important;

    min-height:0 !important;
    max-height:none !important;

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

    overflow:hidden;
}


#hk-home-bottom-category-banners
.banner-box img {
    display:block !important;

    width:100% !important;
    max-width:100% !important;

    height:auto !important;
    min-height:0 !important;
    max-height:none !important;

    object-fit:contain !important;
    object-position:center center !important;

    transform:none !important;

    margin:0 auto !important;
}


#hk-home-bottom-category-banners
a:hover img {
    transform:none !important;
}


#hk-home-bottom-category-banners
.banner-overlay {
    display:none !important;
}


@media (max-width:767px) {

    #hk-home-bottom-category-banners
    .col-12 {
        margin-bottom:14px;
    }

}





/* =========================================================
   HOJU RECOMMENDED CUBE CORE REPAIR V1
   Restore original 3D geometry after fabric CSS issue
   ========================================================= */

#hk-recommended-products
.hk-recommended-cube-scene {
    position:relative !important;
    perspective:1800px !important;
    overflow:visible !important;
}


#hk-recommended-products
.hk-recommended-cube {
    position:relative !important;

    width:100% !important;
    height:100% !important;

    transform-style:preserve-3d !important;

    transform:
        translateZ(
            calc(-1 * var(--hk-cube-depth))
        )
        rotateY(0deg);

    will-change:transform;
}


/*
 * 핵심:
 * 네 면은 반드시 absolute로 같은 위치에 겹쳐야 합니다.
 */
#hk-recommended-products
.hk-recommended-cube-face {
    position:absolute !important;

    inset:0 !important;

    width:100% !important;
    height:100% !important;

    overflow:hidden !important;

    backface-visibility:hidden !important;

    isolation:auto !important;
}


/* FRONT */
#hk-recommended-products
.hk-cube-face-1 {
    transform:
        rotateY(0deg)
        translateZ(
            var(--hk-cube-depth)
        ) !important;
}


/* RIGHT */
#hk-recommended-products
.hk-cube-face-2 {
    transform:
        rotateY(90deg)
        translateZ(
            var(--hk-cube-depth)
        ) !important;
}


/* BACK */
#hk-recommended-products
.hk-cube-face-3 {
    transform:
        rotateY(180deg)
        translateZ(
            var(--hk-cube-depth)
        ) !important;
}


/* LEFT */
#hk-recommended-products
.hk-cube-face-4 {
    transform:
        rotateY(270deg)
        translateZ(
            var(--hk-cube-depth)
        ) !important;
}


/*
 * Fabric pseudo elements completely disabled.
 */
#hk-recommended-products
.hk-recommended-cube-face::before,
#hk-recommended-products
.hk-recommended-cube-face::after {
    content:none !important;
    display:none !important;
}


/*
 * 기존 상품 링크가 다시 면 전체를 사용하도록 복구.
 */
#hk-recommended-products
.hk-cube-product-link {
    position:static !important;

    display:flex !important;
    flex-direction:column !important;

    width:100% !important;
    height:100% !important;
}



/* =========================================================
   HOJU CUBE SAFE FABRIC TEXTURE V2
   큐브 구조 변경 없음
   background-image만 추가
   ========================================================= */

#hk-recommended-products
.hk-cube-color-black {
    background-color:#202020 !important;

    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,.025) 0,
            rgba(255,255,255,.025) 1px,
            transparent 1px,
            transparent 4px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.018) 0,
            rgba(255,255,255,.018) 1px,
            transparent 1px,
            transparent 5px
        ) !important;
}


#hk-recommended-products
.hk-cube-color-green {
    background-color:#174f35 !important;

    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,.035) 0,
            rgba(255,255,255,.035) 1px,
            transparent 1px,
            transparent 4px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(0,0,0,.025) 0,
            rgba(0,0,0,.025) 1px,
            transparent 1px,
            transparent 5px
        ) !important;
}


#hk-recommended-products
.hk-cube-color-blue {
    background-color:#185f87 !important;

    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,.035) 0,
            rgba(255,255,255,.035) 1px,
            transparent 1px,
            transparent 4px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(0,0,0,.022) 0,
            rgba(0,0,0,.022) 1px,
            transparent 1px,
            transparent 5px
        ) !important;
}


#hk-recommended-products
.hk-cube-color-crimson {
    background-color:#8b1739 !important;

    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,.035) 0,
            rgba(255,255,255,.035) 1px,
            transparent 1px,
            transparent 4px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(0,0,0,.025) 0,
            rgba(0,0,0,.025) 1px,
            transparent 1px,
            transparent 5px
        ) !important;
}



/* =========================================================
   HOJU CUBE DIAGONAL TWILL FABRIC V3
   구조 변경 없음 / background-image only
   ========================================================= */

#hk-recommended-products
.hk-cube-color-black,
#hk-recommended-products
.hk-cube-color-green,
#hk-recommended-products
.hk-cube-color-blue,
#hk-recommended-products
.hk-cube-color-crimson {

    background-image:

        /* 주 대각선 직조 */
        repeating-linear-gradient(
            135deg,
            rgba(255,255,255,.055) 0px,
            rgba(255,255,255,.055) 1px,
            transparent 1px,
            transparent 4px,
            rgba(0,0,0,.025) 4px,
            rgba(0,0,0,.025) 5px,
            transparent 5px,
            transparent 9px
        ),

        /* 반대 방향 아주 미세한 보조 섬유 */
        repeating-linear-gradient(
            45deg,
            rgba(255,255,255,.018) 0px,
            rgba(255,255,255,.018) 1px,
            transparent 1px,
            transparent 7px
        ),

        /* 섬유 얼룩 느낌 */
        radial-gradient(
            circle at 20% 30%,
            rgba(255,255,255,.035) 0,
            transparent 32%
        ),

        radial-gradient(
            circle at 75% 70%,
            rgba(0,0,0,.035) 0,
            transparent 36%
        ) !important;

    background-blend-mode:
        soft-light,
        soft-light,
        overlay,
        multiply !important;
}


/* 기존 색상은 유지 */
#hk-recommended-products
.hk-cube-color-black {
    background-color:#202020 !important;
}

#hk-recommended-products
.hk-cube-color-green {
    background-color:#174f35 !important;
}

#hk-recommended-products
.hk-cube-color-blue {
    background-color:#185f87 !important;
}

#hk-recommended-products
.hk-cube-color-crimson {
    background-color:#8b1739 !important;
}



/* =========================================================
   HOJU CUBE LARGE HERRINGBONE / TWILL FABRIC V4
   Larger, clearer fabric texture
   ========================================================= */

#hk-recommended-products
.hk-cube-color-black,
#hk-recommended-products
.hk-cube-color-green,
#hk-recommended-products
.hk-cube-color-blue,
#hk-recommended-products
.hk-cube-color-crimson {

    background-image:

        /* 큰 135도 직조 */
        repeating-linear-gradient(
            135deg,
            rgba(255,255,255,.11) 0px,
            rgba(255,255,255,.11) 3px,
            transparent 3px,
            transparent 14px,
            rgba(0,0,0,.08) 14px,
            rgba(0,0,0,.08) 17px,
            transparent 17px,
            transparent 28px
        ),

        /* 반대 방향 직조 */
        repeating-linear-gradient(
            45deg,
            rgba(255,255,255,.055) 0px,
            rgba(255,255,255,.055) 2px,
            transparent 2px,
            transparent 18px
        ),

        /* 천의 약한 명암 */
        linear-gradient(
            120deg,
            rgba(255,255,255,.06),
            transparent 35%,
            rgba(0,0,0,.05) 75%,
            transparent
        ) !important;

    background-blend-mode:
        soft-light,
        soft-light,
        overlay !important;
}


/* 기존 면 색상 유지 */
#hk-recommended-products
.hk-cube-color-black {
    background-color:#202020 !important;
}

#hk-recommended-products
.hk-cube-color-green {
    background-color:#174f35 !important;
}

#hk-recommended-products
.hk-cube-color-blue {
    background-color:#185f87 !important;
}

#hk-recommended-products
.hk-cube-color-crimson {
    background-color:#8b1739 !important;
}



/* =========================================================
   HOJU CUBE LARGE FABRIC V5
   V4 크기 유지 + 약간 더 부드럽게
   ========================================================= */

#hk-recommended-products
.hk-cube-color-black,
#hk-recommended-products
.hk-cube-color-green,
#hk-recommended-products
.hk-cube-color-blue,
#hk-recommended-products
.hk-cube-color-crimson {

    background-image:

        repeating-linear-gradient(
            135deg,
            rgba(255,255,255,.075) 0px,
            rgba(255,255,255,.075) 3px,
            transparent 3px,
            transparent 14px,
            rgba(0,0,0,.055) 14px,
            rgba(0,0,0,.055) 17px,
            transparent 17px,
            transparent 28px
        ),

        repeating-linear-gradient(
            45deg,
            rgba(255,255,255,.038) 0px,
            rgba(255,255,255,.038) 2px,
            transparent 2px,
            transparent 18px
        ),

        linear-gradient(
            120deg,
            rgba(255,255,255,.04),
            transparent 35%,
            rgba(0,0,0,.035) 75%,
            transparent
        ) !important;

    background-blend-mode:
        soft-light,
        soft-light,
        overlay !important;
}


/* 기존 큐브 색상 유지 */

#hk-recommended-products
.hk-cube-color-black {
    background-color:#202020 !important;
}

#hk-recommended-products
.hk-cube-color-green {
    background-color:#174f35 !important;
}

#hk-recommended-products
.hk-cube-color-blue {
    background-color:#185f87 !important;
}

#hk-recommended-products
.hk-cube-color-crimson {
    background-color:#8b1739 !important;
}



/* =========================================================
   HOJU GOOGLE ADDRESS AUTOCOMPLETE V1
   ========================================================= */

.pac-container {
    z-index:999999 !important;

    border-radius:8px;

    border:1px solid #d7e0e7;

    box-shadow:
        0 8px 24px
        rgba(22,38,52,.14);

    font-family:
        Arial,
        "Noto Sans KR",
        sans-serif;
}

.pac-item {
    padding:8px 10px;
    cursor:pointer;
}

.pac-item:hover {
    background:#f4f8fa;
}

.pac-item-query {
    font-size:14px;
}



/* =========================================================
   HOJU GOOGLE PLACE AUTOCOMPLETE NEW V2
   ========================================================= */

#hk-google-business-address {
    display:block;
    width:100%;
    margin:0;
    font-family:
        Arial,
        "Noto Sans KR",
        sans-serif;
}

#hk-google-business-address::part(input) {
    width:100%;
    min-height:44px;
    box-sizing:border-box;
    border:1px solid #d7e0e7;
    border-radius:8px;
    font-size:14px;
}


/* =========================================================
   HOJU GOOGLE AUTH BUTTON FINAL V4
   ========================================================= */

.hk-google-auth-btn {
    width:100%;
    min-height:52px;

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

    gap:12px;

    box-sizing:border-box;

    margin-bottom:18px;

    padding:0 22px;

    border:1px solid #d7dfe7;
    border-radius:9px;

    background:#ffffff;

    color:#1f2d3d !important;

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

    text-decoration:none !important;

    box-shadow:
        0 1px 3px rgba(15,23,42,.04);

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

.hk-google-auth-btn:hover {
    background:#f9fbfc;

    border-color:#c2ccd6;

    box-shadow:
        0 4px 12px rgba(15,23,42,.07);

    color:#1f2d3d !important;
}

.hk-google-auth-btn:active {
    transform:translateY(1px);
}

.hk-google-auth-btn:focus-visible {
    outline:none;

    border-color:#8ab4f8;

    box-shadow:
        0 0 0 3px rgba(66,133,244,.15);
}

.hk-google-logo {
    width:24px;
    height:24px;

    flex:0 0 24px;

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

.hk-google-logo svg {
    display:block;
    width:22px;
    height:22px;
}

.hk-google-auth-text {
    display:inline-flex;
    align-items:center;

    line-height:1;

    white-space:nowrap;
}

@media (max-width:575px) {

    .hk-google-auth-btn {
        min-height:48px;
        font-size:14px;
        padding:0 16px;
    }

    .hk-google-logo {
        width:22px;
        height:22px;
        flex-basis:22px;
    }

    .hk-google-logo svg {
        width:20px;
        height:20px;
    }

}




/* =========================================================
   HOJU CHECKOUT GOOGLE ADDRESS V1
   ========================================================= */

#hk-checkout-google-address {
    display:block;
    width:100%;
    box-sizing:border-box;
}

#hk-checkout-google-address::part(input) {
    width:100%;
    min-height:44px;

    box-sizing:border-box;

    border:1px solid #cfd9e2;
    border-radius:8px;

    background:#fff;

    font-size:14px;
}



/* =========================================================
   HOJU AUTH REAL LOGO SYNC V1
   ========================================================= */

.hk-auth-logo-mark.hk-auth-logo-real {
    width:auto;
    height:auto;

    min-width:0;

    padding:0;

    border-radius:0;

    background:transparent;

    overflow:visible;
}

.hk-auth-logo-mark.hk-auth-logo-real img {
    display:block;

    width:auto;
    height:44px;

    max-width:190px;

    object-fit:contain;
}



/* =========================================================
   HOJU TWVERIFY NOTICE V1
   ========================================================= */

.hk-twverify-notice {
    display:flex;
    align-items:flex-start;
    gap:8px;

    margin-top:9px;
    padding:9px 11px;

    border:1px solid #d8e5ef;
    border-radius:8px;

    background:#f5f9fc;

    color:#526577;

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

.hk-twverify-notice-icon {
    width:17px;
    height:17px;

    flex:0 0 17px;

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

    margin-top:1px;

    border-radius:50%;

    background:#285b82;
    color:#fff;

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

.hk-twverify-notice strong {
    color:#173f60;
    font-weight:800;
}



/* =========================================================
   HOJU OVAL PRODUCT BADGES FINAL V1
   Replaces old diagonal ribbons visually.
   Existing Blade classes intentionally retained.
   ========================================================= */

.hk-product-corner-ribbon {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    z-index: 30 !important;

    width: auto !important;
    min-width: 52px !important;
    height: 25px !important;

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

    overflow: visible !important;

    padding: 0 11px !important;

    border-radius: 999px !important;

    color: #fff !important;

    font-size: 0 !important;
    font-weight: 800 !important;

    line-height: 25px !important;

    box-sizing: border-box !important;

    pointer-events: none !important;

    transform: none !important;

    box-shadow:
        0 2px 7px
        rgba(0,0,0,.18) !important;

    isolation: auto !important;
}


/*
 * Remove old diagonal ribbon strip.
 */
.hk-product-corner-ribbon::before {
    content: none !important;
    display: none !important;
}


/*
 * Badge text.
 */
.hk-product-corner-ribbon::after {
    position: static !important;

    display: block !important;

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

    color: #fff !important;

    font-size: 11px !important;
    font-weight: 800 !important;

    letter-spacing: .55px !important;
    line-height: 1 !important;

    text-align: center !important;

    transform: none !important;

    white-space: nowrap !important;
}


/* NEW */
.hk-product-corner-ribbon.hk-ribbon-new {
    background: #168b73 !important;
}

.hk-product-corner-ribbon.hk-ribbon-new::after {
    content: "NEW" !important;
}


/* HOT */
.hk-product-corner-ribbon.hk-ribbon-hot {
    background: #b52332 !important;
}

.hk-product-corner-ribbon.hk-ribbon-hot::after {
    content: "HOT" !important;
}


/* EVENT */
.hk-product-corner-ribbon.hk-ribbon-event {
    background: #2474a8 !important;
}

.hk-product-corner-ribbon.hk-ribbon-event::after {
    content: "EVENT" !important;
}


/* SALE */
.hk-product-corner-ribbon.hk-ribbon-discount {
    background: #e31b23 !important;
}

.hk-product-corner-ribbon.hk-ribbon-discount::after {
    content: "SALE" !important;

    font-size: 11px !important;
    letter-spacing: .55px !important;

    top: auto !important;
    right: auto !important;
}


/*
 * Product detail demo notice
 */
.hk-demo-not-for-sale {
    margin-top: 22px;

    padding: 18px;

    border:
        1px solid
        rgba(181,35,50,.22);

    border-radius: 12px;

    background:
        rgba(181,35,50,.045);

    text-align: center;
}

.hk-demo-not-for-sale-badge {
    display: inline-flex;

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

    min-height: 28px;

    padding: 0 14px;

    border-radius: 999px;

    background: #6b7280;

    color: #fff;

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

    letter-spacing: .55px;
}

.hk-demo-not-for-sale-text {
    margin-top: 9px;

    color: #666;

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


/*
 * Wishlist demo notice
 */
.hk-demo-wishlist-not-sale {
    display: flex;

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

    min-height: 38px;

    margin-top: 10px;

    padding: 0 12px;

    border-radius: 999px;

    background: #6b7280;

    color: #fff;

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

    letter-spacing: .45px;
}


/*
 * Mobile
 */
@media (max-width: 767px) {

    .hk-product-corner-ribbon {
        top: 8px !important;
        right: 8px !important;

        min-width: 46px !important;
        height: 23px !important;

        padding:
            0 9px !important;
    }

    .hk-product-corner-ribbon::after {
        font-size: 10px !important;
    }

    .hk-product-corner-ribbon.hk-ribbon-discount::after {
        font-size: 10px !important;
    }
}


/* =========================================================
   END HOJU OVAL PRODUCT BADGES FINAL V1
   ========================================================= */




/* =========================================================
   HOJU HOME DEMO OVAL BADGE FINAL V1
   ========================================================= */

.hk-hit-demo-product,
.hk-home-real-card,
.hk-interest-card {
    position: relative;
}

.hk-home-demo-badge {
    position: absolute;

    top: 10px;
    right: 10px;

    z-index: 40;

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

    min-width: 54px;
    height: 25px;

    padding: 0 11px;

    border-radius: 999px;

    background: #6b7280;

    color: #fff;

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

    letter-spacing: .6px;
    line-height: 1;

    box-sizing: border-box;

    box-shadow:
        0 2px 7px
        rgba(0,0,0,.18);

    pointer-events: none;
}

@media (max-width: 767px) {
    .hk-home-demo-badge {
        top: 8px;
        right: 8px;

        min-width: 48px;
        height: 23px;

        padding: 0 9px;

        font-size: 10px;
    }
}

/* =========================================================
   END HOJU HOME DEMO OVAL BADGE FINAL V1
   ========================================================= */




/* =========================================================
   HOJU DEMO BLACK OVAL FINAL V2
   DB demo product has priority over all promotion badges.
   ========================================================= */

.hk-home-demo-badge {
    position: absolute !important;

    top: 10px !important;
    right: 10px !important;

    z-index: 60 !important;

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

    width: auto !important;
    min-width: 56px !important;
    height: 25px !important;

    padding: 0 12px !important;

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

    background: #111 !important;

    color: #fff !important;

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

    line-height: 1 !important;
    letter-spacing: .7px !important;

    text-align: center !important;
    white-space: nowrap !important;

    box-sizing: border-box !important;

    box-shadow:
        0 2px 7px
        rgba(0,0,0,.22) !important;

    pointer-events: none !important;
}

@media (max-width: 767px) {

    .hk-home-demo-badge {
        top: 8px !important;
        right: 8px !important;

        min-width: 51px !important;
        height: 23px !important;

        padding: 0 10px !important;

        font-size: 9px !important;
    }
}

/* =========================================================
   END HOJU DEMO BLACK OVAL FINAL V2
   ========================================================= */




/* =========================================================
   HOJU DEMO ABSOLUTE PRIORITY FINAL V1

   RULE:
   DEMO > NEW / HOT / EVENT / SALE

   Database is_demo=1 always wins.
   ========================================================= */

.hk-demo-absolute-priority {
    position: absolute !important;

    top: 10px !important;
    right: 10px !important;

    z-index: 999 !important;

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

    min-width: 56px !important;
    height: 25px !important;

    padding: 0 12px !important;

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

    background: #111 !important;

    color: #fff !important;

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

    line-height: 1 !important;
    letter-spacing: .7px !important;

    white-space: nowrap !important;

    box-shadow:
        0 2px 7px
        rgba(0,0,0,.25) !important;

    pointer-events: none !important;
}


/*
 * A card explicitly rendered as DEMO must never visually
 * expose another promotional badge above it.
 */
.hk-home-real-card:has(.hk-demo-absolute-priority)
.hk-product-corner-ribbon,

.hk-new-product-card:has(.hk-demo-absolute-priority)
.hk-product-corner-ribbon {

    display: none !important;
}


/*
 * DEMO itself always remains visible.
 */
.hk-home-real-card
.hk-demo-absolute-priority,

.hk-new-product-card
.hk-demo-absolute-priority {

    display: inline-flex !important;
}


@media (max-width: 767px) {

    .hk-demo-absolute-priority {
        top: 8px !important;
        right: 8px !important;

        min-width: 51px !important;
        height: 23px !important;

        padding: 0 10px !important;

        font-size: 9px !important;
    }
}


/* =========================================================
   END HOJU DEMO ABSOLUTE PRIORITY FINAL V1
   ========================================================= */




/* =========================================================
   HOJU CUBE DEMO BADGE FINAL V1
   ========================================================= */

.hk-cube-image-area {
    position: relative !important;
}

.hk-cube-demo-badge {
    position: absolute !important;

    top: 10px !important;
    right: 10px !important;

    z-index: 80 !important;

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

    min-width: 56px !important;
    height: 25px !important;

    padding: 0 12px !important;

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

    background: #111 !important;
    color: #fff !important;

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

    line-height: 1 !important;
    letter-spacing: .7px !important;

    white-space: nowrap !important;

    box-shadow:
        0 2px 7px
        rgba(0,0,0,.28) !important;

    pointer-events: none !important;
}

@media (max-width: 767px) {

    .hk-cube-demo-badge {
        top: 8px !important;
        right: 8px !important;

        min-width: 51px !important;
        height: 23px !important;

        padding: 0 10px !important;

        font-size: 9px !important;
    }
}

/* =========================================================
   END HOJU CUBE DEMO BADGE FINAL V1
   ========================================================= */




/* =========================================================
   HOJU LEGACY ZCART CATEGORY CARDS - NON CLICKABLE V1
   ========================================================= */

.hk-legacy-category-disabled {
    display: block;
    cursor: default !important;
    text-decoration: none !important;
    color: inherit !important;
    user-select: none;
}

.hk-legacy-category-disabled,
.hk-legacy-category-disabled * {
    cursor: default !important;
}

/* =========================================================
   END HOJU LEGACY ZCART CATEGORY CARDS - NON CLICKABLE V1
   ========================================================= */