* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background: #263238;
    color: white;
    font-family: Arial, sans-serif;
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    background-image:
        linear-gradient(rgba(168,85,247,0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34,211,238,0.06) 1px, transparent 1px);
    background-size: 58px 58px;
    z-index: -2;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    background: radial-gradient(circle at top, rgba(168,85,247,0.18), transparent 35%),
                radial-gradient(circle at right, rgba(34,211,238,0.12), transparent 30%);
    z-index: -1;
}

/* NAVBAR */
.nav {
    min-height: 90px;
    padding: 0 8%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(18px);
    position: sticky;
    top: 0;
    z-index: 10;
}

.logo {
    font-size: 32px;
    font-weight: 900;
    letter-spacing: 12px;
    background: linear-gradient(90deg, #a855f7, #22d3ee);
    -webkit-background-clip: text;
    color: transparent;
}

.nav-links a {
    color: white;
    text-decoration: none;
    margin-left: 24px;
    letter-spacing: 2px;
    font-size: 13px;
}

.nav-links a:hover {
    color: #22d3ee;
}

.bag {
    color: #22d3ee !important;
}

/* HERO */
.hero {
    text-align: center;
    padding: 110px 20px 70px;
}

.admin-hero {
    padding-bottom: 35px;
}

.status {
    color: #c026d3;
    letter-spacing: 9px;
    font-size: 13px;
    margin-bottom: 25px;
}

.hero h1 {
    font-size: 92px;
    font-weight: 900;
    line-height: 0.9;
}

.hero h2 {
    font-size: 82px;
    font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 1.5px white;
}

.tagline {
    margin: 25px auto;
    max-width: 650px;
    color: #b9b9c9;
    font-size: 17px;
}

/* BUTTONS */
.hero-actions button,
.promo button,
.bottom button {
    border: none;
    background: linear-gradient(90deg, #9333ea, #06b6d4);
    color: white;
    padding: 14px 24px;
    border-radius: 999px;
    cursor: pointer;
    font-weight: bold;
    box-shadow: 0 0 25px rgba(147,51,234,0.35);
}

.hero-actions .outline {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.25);
    margin-left: 10px;
}

/* SEARCH */
.tools {
    width: 84%;
    margin: auto;
    display: flex;
    gap: 15px;
}

.tools input,
.tools select {
    width: 100%;
    padding: 16px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: white;
    border-radius: 14px;
    outline: none;
}

/* ADD THIS PART BELOW TO FIX THE DROPDOWN */
.tools select option {
    background-color: #030304; /* Matches your body background */
    color: white;              /* Forces text to be white against the dark background */
}

/* CATEGORY TAGS */
.categories {
    width: 84%;
    margin: 25px auto;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.categories span {
    padding: 10px 18px;
    border: 1px solid rgba(255,255,255,0.16);
    border-radius: 999px;
    color: #d8d8e8;
    background: rgba(255,255,255,0.04);
}

/* PROMO */
.promo {
    width: 84%;
    margin: 35px auto;
    padding: 32px;
    border-radius: 24px;
    background: linear-gradient(120deg, rgba(147,51,234,0.22), rgba(6,182,212,0.12));
    border: 1px solid rgba(255,255,255,0.14);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.promo p {
    color: #22d3ee;
    letter-spacing: 5px;
}

.promo h3 {
    font-size: 32px;
    margin: 8px 0;
}

.promo span {
    color: #cfcfe8;
}

/* PRODUCT GRID / CARDS */
.products {
    width: 84%;
    margin: 50px auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 26px;
}

.card {
    position: relative;
    min-height: 340px;
    padding: 24px;
    border-radius: 24px;
    background: rgba(255,255,255,0.055);
    border: 1px solid rgba(255,255,255,0.11);
    backdrop-filter: blur(18px);
    transition: 0.3s ease;
}

.card:hover {
    transform: translateY(-6px);
    border-color: rgba(34,211,238,0.45);
    box-shadow: 0 0 35px rgba(168,85,247,0.28);
}

.badge {
    position: absolute;
    top: 18px;
    left: 18px;
    color: #22d3ee;
    font-size: 11px;
    letter-spacing: 3px;
}

.heart {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: white;
    text-decoration: none;
}

.product-img img {
    width: 100%;         /* full width of container */
    max-height: 150px;   /* fits inside the card */
    object-fit: contain;  /* scales proportionally */
    display: block;
    margin: 0 auto;      /* center horizontally */
}

.category {
    color: #a78bfa;
    font-size: 12px;
    letter-spacing: 3px;
}

.card h3 {
    margin: 10px 0;
}

.rating {
    color: #d6d3ff;
}

.bottom {
    margin-top: 22px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.bottom strong {
    color: #22d3ee;
}

/* ADMIN DASHBOARD CARDS */
.admin-stats {
    width: 84%;
    margin: 35px auto 55px;
    display: grid;
    grid-template-columns: repeat(4, minmax(220px, 1fr));
    gap: 24px;
}

.dashboard-card {
    position: relative;
    min-height: 260px;
    padding: 26px;
    border-radius: 28px;
    overflow: hidden;
    text-decoration: none;
    color: white;
    background: linear-gradient(145deg, rgba(255,255,255,0.12), rgba(255,255,255,0.035)), rgba(9,9,14,0.88);
    border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(20px);
    box-shadow: 0 18px 45px rgba(0,0,0,0.28);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    isolation: isolate;
    transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

.dashboard-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 20% 10%, rgba(255,255,255,0.18), transparent 32%);
    opacity: 0.65;
    z-index: -1;
}

.dashboard-card::after {
    content: "";
    position: absolute;
    right: -55px;
    bottom: -55px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(34,211,238,0.16);
    filter: blur(8px);
    z-index: -1;
}

.dashboard-card:hover {
    transform: translateY(-10px) scale(1.01);
    border-color: rgba(34,211,238,0.55);
    box-shadow: 0 24px 60px rgba(0,0,0,0.35), 0 0 38px rgba(168,85,247,0.24);
}

.card-glow {
    position: absolute;
    inset: -1px;
    background: linear-gradient(135deg, rgba(168,85,247,0.38), transparent 38%, rgba(34,211,238,0.24));
    opacity: 0;
    transition: opacity 0.28s ease;
    z-index: -2;
}

.dashboard-card:hover .card-glow {
    opacity: 1;
}

.dash-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.dash-top span {
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    color: #d8d3ff;
    border: 1px solid rgba(255,255,255,0.11);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.dash-icon {
    width: 58px;
    height: 58px;
    border-radius: 20px;
    display: grid;
    place-items: center;
    font-size: 30px;
    background: linear-gradient(135deg, rgba(147,51,234,0.42), rgba(6,182,212,0.28));
    border: 1px solid rgba(255,255,255,0.14);
    box-shadow: 0 0 24px rgba(34,211,238,0.18);
}

.dashboard-card h3 {
    font-size: 56px;
    line-height: 1;
    margin: 12px 0 10px;
    letter-spacing: -2px;
    background: linear-gradient(90deg, #ffffff, #22d3ee);
    -webkit-background-clip: text;
    color: transparent;
}

.dashboard-card .category {
    color: #a78bfa;
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 4px;
}

.dashboard-card .rating {
    color: #d6d3ff;
    line-height: 1.55;
    min-height: 52px;
    margin-bottom: 22px;
}

.dash-btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 13px 16px;
    border-radius: 16px;
    background: rgba(255,255,255,0.08);
    color: white;
    font-weight: 800;
    font-size: 13px;
    border: 1px solid rgba(255,255,255,0.12);
    transition: background 0.28s ease, transform 0.28s ease;
}

.dashboard-card:hover .dash-btn {
    background: linear-gradient(90deg, #9333ea, #06b6d4);
    transform: translateY(-2px);
}

.users-card {
    background-color: rgba(14,17,28,0.9);
}

.staff-card {
    background-color: rgba(24,15,32,0.9);
}

.products-card {
    background-color: rgba(15,15,26,0.9);
}

.categories-card {
    background-color: rgba(8,27,29,0.9);
}

/* FOOTER */
footer {
    text-align: center;
    padding: 50px;
    border-top: 1px solid rgba(255,255,255,0.1);
    color: #aaa;
}

footer h3 {
    letter-spacing: 10px;
}

/* AUTH */
.auth-box {
    width: 420px;
    margin: 120px auto;
    padding: 40px;
    border-radius: 28px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(18px);
    text-align: center;
    box-shadow: 0 0 45px rgba(168,85,247,0.2);
}

.auth-box h1 {
    letter-spacing: 10px;
    font-size: 34px;
    background: linear-gradient(90deg, #a855f7, #22d3ee);
    -webkit-background-clip: text;
    color: transparent;
}

.auth-box h2 {
    margin: 18px 0;
}

.auth-box p {
    color: #22d3ee;
    margin-bottom: 15px;
}

.auth-box input {
    width: 100%;
    padding: 15px;
    margin: 10px 0;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(0,0,0,0.45);
    color: white;
}

.auth-box button {
    width: 100%;
    margin-top: 15px;
    padding: 15px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(90deg, #9333ea, #06b6d4);
    color: white;
    font-weight: bold;
    cursor: pointer;
}

.auth-box a {
    display: block;
    margin-top: 18px;
    color: #a78bfa;
    text-decoration: none;
}

/* ADMIN */
.admin-panel {
    width: 84%;
    margin: 35px auto;
    padding: 30px;
    border-radius: 24px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(18px);
}

.admin-panel h2 {
    margin-bottom: 18px;
}

.admin-panel p {
    color: #22d3ee;
    margin-bottom: 15px;
}

.admin-form {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.admin-form input,
.admin-form select {
    padding: 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(0,0,0,0.45);
    color: white;
    outline: none;
}

.admin-form button {
    border: none;
    border-radius: 999px;
    background: linear-gradient(90deg, #9333ea, #06b6d4);
    color: white;
    font-weight: bold;
    cursor: pointer;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.admin-table th,
.admin-table td {
    padding: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    text-align: left;
}

.admin-table th {
    color: #22d3ee;
    letter-spacing: 2px;
    font-size: 13px;
}

.danger-link {
    color: #ff6b6b;
    text-decoration: none;
    font-weight: bold;
}

.checkout-btn {
    display: inline-block;
    margin-right: 12px;
    padding: 14px 22px;
    border-radius: 999px;
    background: linear-gradient(90deg, #9333ea, #06b6d4);
    color: white;
    text-decoration: none;
    font-weight: bold;
    box-shadow: 0 0 25px rgba(147,51,234,0.35);
}

/* RESPONSIVE */
@media (max-width: 1000px) {
    .products,
    .admin-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero h1,
    .hero h2 {
        font-size: 58px;
    }

    .nav {
        flex-direction: column;
        padding: 20px;
        gap: 15px;
    }
}

@media (max-width: 900px) {
    .admin-form {
        grid-template-columns: 1fr;
    }
}

/* User image/path visibility fixes */
body.admin-profile-page .admin-profile-placeholder-link,
body.admin-staff-logs-page .staff-log-placeholder-card,
body.admin-users-page .admin-users-visual.admin-media-link {
    overflow: hidden !important;
}

body.admin-profile-page .admin-profile-placeholder-link span,
body.admin-staff-logs-page .staff-log-placeholder-card span,
body.admin-users-page .admin-users-visual .admin-replace-path {
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    bottom: 14px !important;
    z-index: 5 !important;
    display: block !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,0.96) !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: 1px solid rgba(202,165,58,0.42) !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: 0.2px !important;
    line-height: 1.25 !important;
    text-align: center !important;
    white-space: normal !important;
}

body.admin-products-page .admin-product-image-field {
    grid-column: 1 / -1 !important;
}

body.admin-products-page .admin-product-image-field input {
    width: 100% !important;
}

body.admin-products-page .admin-product-image-field .form-hint,
body.admin-products-page .admin-product-image-path {
    display: block !important;
    margin-top: 7px !important;
    color: #6f6f6f !important;
    -webkit-text-fill-color: #6f6f6f !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
}

body.admin-users-page .admin-people-form .admin-form > .staff-password-field,
body.admin-users-page .admin-people-form .admin-form > .staff-role-lock {
    min-width: 0 !important;
    width: 100% !important;
    overflow: visible !important;
}

body.admin-users-page .admin-people-form .admin-form > .staff-role-lock {
    grid-column: 2 / 3 !important;
}

body.admin-users-page .staff-role-lock strong {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
}

body.admin-page .admin-field-shell {
    overflow: visible !important;
}

body.admin-page .admin-field-icon {
    align-self: stretch !important;
    height: auto !important;
}

@media (max-width: 980px) {
    body.admin-users-page .admin-people-form .admin-form > .staff-role-lock {
        grid-column: 1 / -1 !important;
    }
}

@media (max-width: 600px) {
    .products,
    .admin-stats {
        grid-template-columns: 1fr;
    }

    .promo {
        flex-direction: column;
        text-align: center;
        gap: 20px;
    }

    .auth-box {
        width: 90%;
    }
}
/* CUSTOMER FIX: simpler search, product details and smaller action buttons */
.search-form {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: center;
}

.search-form button {
    padding: 16px 24px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(90deg, #9333ea, #06b6d4);
    color: white;
    font-weight: bold;
    cursor: pointer;
}

.clear-search {
    color: #22d3ee;
    text-decoration: none;
    font-weight: bold;
}

.card-actions {
    margin-top: 18px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.small-btn {
    padding: 10px 14px;
    font-size: 12px;
    margin-right: 0;
}

.empty-message {
    grid-column: 1 / -1;
    color: white;
    text-align: center;
}

.product-detail-hero h1 {
    font-size: 58px;
}

.product-detail-box {
    width: 84%;
    margin: 35px auto 0;
    padding: 30px;
    border-radius: 28px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
    text-align: left;
}

.product-detail-img {
    min-height: 260px;
    display: grid;
    place-items: center;
    font-size: 120px;
    background: rgba(255,255,255,0.045);
    border-radius: 22px;
}

.product-detail-info h3 {
    font-size: 34px;
    margin-bottom: 15px;
}

.product-detail-info p {
    color: #d6d3ff;
    margin: 12px 0;
    line-height: 1.6;
}

.left-actions {
    text-align: left;
    margin-top: 22px;
}

.small-note {
    font-size: 12px;
    color: #d6d3ff !important;
}

@media (max-width: 700px) {
    .search-form {
        grid-template-columns: 1fr;
    }

    .product-detail-box {
        grid-template-columns: 1fr;
        width: 94%;
    }
}

/* =========================================
   CUSTOMER NAV FIX
========================================= */
.logo {
    text-decoration: none !important;
    border: none !important;
    box-shadow: none !important;
    display: inline-block;
    line-height: 1;
}

.logo::before,
.logo::after {
    content: none !important;
    display: none !important;
}

.nav-links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 22px;
}

.nav-links a {
    margin-left: 0;
    color: white;
    text-decoration: none;
    letter-spacing: 2px;
    font-size: 13px;
    transition: 0.25s ease;
}

.nav-links a:hover {
    color: #22d3ee;
}

/* =========================================
   CUSTOMER DASHBOARD UPGRADE
========================================= */
.dashboard-hero {
    width: 84%;
    margin: 50px auto 25px;
    padding: 40px;
    border-radius: 28px;
    background: linear-gradient(135deg, rgba(168,85,247,0.16), rgba(34,211,238,0.10));
    border: 1px solid rgba(255,255,255,0.10);
    backdrop-filter: blur(18px);
    box-shadow: 0 20px 45px rgba(0,0,0,0.28);
}

.dashboard-badge {
    color: #c026d3;
    letter-spacing: 5px;
    font-size: 12px;
    margin-bottom: 12px;
}

.dashboard-hero h1 {
    font-size: 48px;
    margin-bottom: 14px;
}

.dashboard-subtitle {
    max-width: 780px;
    color: #d4d4e8;
    line-height: 1.7;
    font-size: 16px;
}

.dashboard-hero-actions {
    margin-top: 24px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.dashboard-main-btn,
.dashboard-outline-btn,
.panel-link {
    display: inline-block;
    text-decoration: none;
    font-weight: bold;
    border-radius: 999px;
    transition: 0.25s ease;
}

.dashboard-main-btn {
    padding: 13px 22px;
    background: linear-gradient(90deg, #9333ea, #06b6d4);
    color: white;
    box-shadow: 0 0 24px rgba(147,51,234,0.35);
}

.dashboard-outline-btn {
    padding: 13px 22px;
    background: transparent;
    color: white;
    border: 1px solid rgba(255,255,255,0.16);
}

.dashboard-main-btn:hover,
.dashboard-outline-btn:hover,
.panel-link:hover {
    transform: translateY(-2px);
}

.dashboard-stats {
    width: 84%;
    margin: 24px auto;
    display: grid;
    grid-template-columns: repeat(5, minmax(180px, 1fr));
    gap: 20px;
}

.stat-card {
    padding: 26px;
    border-radius: 22px;
    background: rgba(255,255,255,0.055);
    border: 1px solid rgba(255,255,255,0.10);
    backdrop-filter: blur(16px);
    transition: 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-6px);
    border-color: rgba(34,211,238,0.35);
    box-shadow: 0 0 30px rgba(168,85,247,0.16);
}

.stat-label {
    display: inline-block;
    color: #a78bfa;
    font-size: 12px;
    letter-spacing: 2px;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.stat-card h3 {
    font-size: 30px;
    margin-bottom: 8px;
    line-height: 1.2;
}

.stat-card p {
    color: #cfcfe4;
    line-height: 1.6;
    font-size: 14px;
}

.dashboard-grid {
    width: 84%;
    margin: 24px auto;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 24px;
}

.dashboard-panel {
    padding: 28px;
    border-radius: 24px;
    background: rgba(255,255,255,0.055);
    border: 1px solid rgba(255,255,255,0.10);
    backdrop-filter: blur(18px);
}

.wide-panel {
    width: 84%;
    margin: 24px auto 60px;
}

.panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    gap: 12px;
    flex-wrap: wrap;
}

.panel-head h2 {
    font-size: 24px;
}

.panel-link {
    padding: 10px 16px;
    color: #22d3ee;
    border: 1px solid rgba(34,211,238,0.22);
    background: rgba(34,211,238,0.06);
}

.quick-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.quick-link-box {
    display: block;
    padding: 20px;
    border-radius: 18px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    text-decoration: none;
    color: white;
    transition: 0.25s ease;
}

.quick-link-box:hover {
    transform: translateY(-4px);
    border-color: rgba(34,211,238,0.32);
    box-shadow: 0 0 24px rgba(34,211,238,0.10);
}

.quick-link-box strong {
    display: block;
    margin-bottom: 8px;
    font-size: 16px;
}

.quick-link-box span {
    color: #cfcfe4;
    font-size: 14px;
    line-height: 1.5;
}

.latest-order-box {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.latest-order-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
}

.latest-order-row span {
    color: #cfcfe4;
}

.latest-order-row strong {
    color: white;
}

.latest-order-actions {
    margin-top: 8px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.small-action-btn {
    padding: 11px 16px;
    font-size: 13px;
}

.empty-dashboard-box {
    padding: 28px;
    border-radius: 18px;
    background: rgba(255,255,255,0.04);
    border: 1px dashed rgba(255,255,255,0.18);
    text-align: center;
}

.empty-dashboard-box h3 {
    margin-bottom: 10px;
}

.empty-dashboard-box p {
    color: #cfcfe4;
    margin-bottom: 18px;
    line-height: 1.6;
}

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

.dashboard-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.dashboard-table th,
.dashboard-table td {
    padding: 15px 14px;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.dashboard-table th {
    color: #22d3ee;
    letter-spacing: 1px;
    font-size: 13px;
}

.dashboard-table td {
    color: #f0f0f6;
}

/* Responsive */
@media (max-width: 1200px) {
    .dashboard-stats {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }

    .quick-links {
        grid-template-columns: 1fr;
    }

    .dashboard-stats {
        grid-template-columns: repeat(2, 1fr);
    }

    .dashboard-hero h1 {
        font-size: 38px;
    }
}

@media (max-width: 600px) {
    .dashboard-stats {
        grid-template-columns: 1fr;
    }

    .dashboard-hero,
    .dashboard-panel,
    .wide-panel {
        width: 92%;
    }

    .dashboard-hero-actions,
    .latest-order-actions {
        flex-direction: column;
    }
}

/* =========================================
   FASHION SEARCH / SORT / FILTER UI
========================================= */
.shop-filter-section {
    margin-top: 10px;
}

.fashion-filter-form {
    grid-template-columns: 1.4fr 0.8fr 0.8fr auto auto;
}

.fashion-filter-form select {
    cursor: pointer;
}

.catalog-summary {
    width: 84%;
    margin: 18px auto 0;
    color: #d6d3ff;
}

.catalog-summary strong {
    color: #22d3ee;
}

@media (max-width: 1000px) {
    .fashion-filter-form {
        grid-template-columns: 1fr 1fr;
    }

    .fashion-filter-form input,
    .fashion-filter-form select,
    .fashion-filter-form button,
    .fashion-filter-form .clear-search {
        width: 100%;
    }
}

@media (max-width: 600px) {
    .fashion-filter-form {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   REALISTIC PRODUCT DETAILS PAGE
========================================= */
.product-page-hero {
    width: 84%;
    margin: 55px auto 25px;
}

.product-detail-layout {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 28px;
    align-items: stretch;
}

.product-visual-card,
.product-main-info,
.details-panel {
    border-radius: 28px;
    background: rgba(255,255,255,0.055);
    border: 1px solid rgba(255,255,255,0.11);
    backdrop-filter: blur(18px);
    box-shadow: 0 20px 45px rgba(0,0,0,0.25);
}

.product-visual-card {
    position: relative;
    min-height: 520px;
    display: grid;
    place-items: center;
    overflow: hidden;
}

.product-visual-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 35%, rgba(168,85,247,0.28), transparent 38%),
                radial-gradient(circle at 70% 75%, rgba(34,211,238,0.20), transparent 34%);
}

.product-detail-badge {
    position: absolute;
    top: 24px;
    left: 24px;
    padding: 10px 16px;
    border-radius: 999px;
    background: rgba(34,211,238,0.12);
    color: #22d3ee;
    border: 1px solid rgba(34,211,238,0.24);
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: bold;
}

.product-main-icon {
    position: relative;
    font-size: 160px;
    filter: drop-shadow(0 0 35px rgba(34,211,238,0.25));
}

.product-code {
    position: absolute;
    bottom: 24px;
    left: 24px;
    color: #d6d3ff;
    letter-spacing: 1px;
}

.product-main-info {
    padding: 36px;
}

.product-main-info h1 {
    font-size: 48px;
    line-height: 1.05;
    margin-bottom: 10px;
}

.product-category-text {
    color: #a78bfa;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-size: 13px;
    margin-bottom: 18px;
}

.product-price-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.product-price-row h2 {
    font-size: 34px;
    color: #22d3ee;
}

.product-price-row span {
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    color: #fff;
}

.product-description {
    color: #d6d3ff;
    line-height: 1.7;
    margin-bottom: 22px;
}

.product-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}

.product-info-grid div {
    padding: 16px;
    border-radius: 18px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
}

.product-info-grid span,
.details-list span,
.latest-order-row span {
    display: block;
    color: #aaaac0;
    font-size: 13px;
    margin-bottom: 6px;
}

.product-info-grid strong,
.details-list strong {
    color: rgb(17, 1, 1);
}

.product-option-block {
    margin-bottom: 22px;
}

.product-option-block h3 {
    margin-bottom: 12px;
}

.option-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.option-list span {
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: #3b3b3c;
    font-size: 13px;
}

.product-action-row {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 24px;
}

.product-more-details {
    width: 84%;
    margin: 24px auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.details-panel {
    padding: 30px;
}

.details-panel h2 {
    margin-bottom: 20px;
    font-size: 26px;
}

.details-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.details-list div {
    padding: 16px;
    border-radius: 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
}

.care-box {
    padding: 16px;
    border-radius: 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 14px;
}

.care-box h3 {
    margin-bottom: 8px;
    color: #22d3ee;
}

.care-box p {
    color: #d6d3ff;
    line-height: 1.6;
}

.similar-section {
    width: 84%;
    margin: 24px auto 65px;
}

.similar-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.similar-card {
    padding: 22px;
    border-radius: 22px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    transition: 0.25s ease;
}

.similar-card:hover {
    transform: translateY(-5px);
    border-color: rgba(34,211,238,0.35);
}

.similar-icon {
    height: 110px;
    display: grid;
    place-items: center;
    font-size: 58px;
}

.similar-card h3 {
    margin: 8px 0;
}

.similar-card strong {
    display: block;
    color: #22d3ee;
    margin-top: 12px;
}

@media (max-width: 1000px) {
    .product-detail-layout,
    .product-more-details {
        grid-template-columns: 1fr;
    }

    .similar-products-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .product-main-info h1 {
        font-size: 36px;
    }
}

@media (max-width: 600px) {
    .product-page-hero,
    .product-more-details,
    .similar-section {
        width: 92%;
    }

    .product-info-grid,
    .details-list,
    .similar-products-grid {
        grid-template-columns: 1fr;
    }

    .product-main-icon {
        font-size: 110px;
    }
}
/* WISHLIST */
.wishlist-remove {
    display: inline-block;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(255, 80, 80, 0.10);
    border: 1px solid rgba(255, 80, 80, 0.25);
    color: #ff7b7b;
    font-size: 12px;
}

.wishlist-remove:hover {
    background: rgba(255, 80, 80, 0.18);
}

/* HEART WISHLIST BUTTON */
.heart {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 38px;
    height: 38px;
    border: 1px solid rgba(255,255,255,0.22);
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: white;
    text-decoration: none;
    font-size: 18px;
    background: rgba(255,255,255,0.05);
    transition: 0.25s ease;
    z-index: 2;
}

.heart:hover {
    background: rgba(255, 105, 180, 0.15);
    border-color: rgba(255, 105, 180, 0.45);
    color: #ff7aa8;
    transform: scale(1.08);
}

/* =========================================
   Checkout Store Payment Info Panel
========================================= */
.shipping-section {
    background: rgba(27,27,43,0.95);
    border-radius: 28px;
    padding: 30px;
    margin-top: 25px;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 15px 35px rgba(0,0,0,0.7);
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 12px 20px;
}

.shipping-section h3 {
    grid-column: 1 / -1;
    font-size: 1.8em;
    margin-bottom: 20px;
    color: #fff;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 10px;
}

.confirmation-item {
    display: contents; /* Uses grid layout */
}

.confirmation-item .label {
    font-weight: 600;
    color: #06b6d4;
}

.confirmation-item .value {
    color: #fff;
    font-weight: 500;
}

.confirmation-item.highlight .value {
    color: #9333ea;
    font-weight: 700;
}

/* Finalize Order button */
.shipping-section .checkout-btn {
    grid-column: 1 / -1;
    margin-top: 25px;
    padding: 14px 30px;
    background: linear-gradient(90deg, #9333ea, #06b6d4);
    color: #fff;
    border: none;
    border-radius: 50px;
    font-size: 1.1em;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 8px 25px rgba(147,51,234,0.45);
    transition: all 0.3s ease;
}

.shipping-section .checkout-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}

/* Responsive */
@media (max-width: 768px) {
    .shipping-section {
        grid-template-columns: 1fr;
    }
    .shipping-section .checkout-btn {
        width: 100%;
    }
}

/* ===== Shop Page Banner Fix ===== */
/* ===== Shop Page Banner Fix ===== */
.shop-banner {
    width: 100%;
    position: relative;
    overflow: hidden;
    height: auto !important; /* Forces the container to expand */
}

.banner-slide img {
    width: 100% !important;
    height: auto !important;        
    max-height: none !important;    /* Removes that 400px limit */
    object-fit: contain !important; /* Shows the FULL image */
    display: block;
    margin: 0 auto;
}
/* Specific layout for the Profile page only */
.profile-grid {
    grid-template-columns: 1fr 1fr !important; /* Forces 2 columns instead of 3 */
}

/* Ensure the inputs look consistent with your theme */
.profile-grid input {
    width: 100%;
}

/* Layout Container */
.split-container {
    display: flex;
    min-height: 100vh; /* Full screen height */
    width: 100%;
}

/* Left Side Styling */
.split-image {
    flex: 1.2; /* Takes up slightly more space than the form */
    display: block;
    overflow: hidden;
}

.split-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures image fills the area without distortion */
}

/* Right Side Styling */
.split-form {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
    background: #030304; /* Matches your background code */
}

/* Override your existing auth-box to fit the split view */
.auth-box {
    margin: 0 !important; /* Removes the 120px auto margin */
    width: 100%;
    max-width: 420px;
}

/* Responsive Design for Mobile */
@media (max-width: 900px) {
    .split-container {
        flex-direction: column; /* Stack image on top of form on small screens */
    }
    .split-image {
        height: 300px;
        flex: none;
    }
}

.dashboard-hero {
    position: relative;
    /* 1. CENTER THE CARD ON THE PAGE */
    width: 84%;
    margin: 50px auto; /* 'auto' centers the container horizontally */
    
    /* 2. BACKGROUND IMAGE ALIGNMENT */
    background-position: center; 
    background-size: cover;
    background-repeat: no-repeat;
    
    /* 3. CONTENT ALIGNMENT INSIDE THE CARD */
    display: flex;
    align-items: center; 
    justify-content: flex-start; /* Keeps text on the dark left side of your image */
    
    padding: 80px 60px;
    min-height: 450px;
    border-radius: 28px;
    overflow: hidden;
    backdrop-filter: blur(18px);
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 20px 45px rgba(0,0,0,0.28);
}

/* --- NEW WISHLIST STYLES --- */

/* Enhanced Visibility for Wishlist */
.wishlist-page-wrapper {
    min-height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 130px;
    padding-bottom: 50px;
}

/* Make "SAVED ITEMS" glow slightly */
.status-purple {
    color: #a855f7 !important;
    letter-spacing: 5px;
    font-size: 0.9rem;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(168, 85, 247, 0.5);
}

/* Sharper Outline for "WISHLIST" */
.outline-text {
    font-size: 6rem;
    color: transparent !important;
    -webkit-text-stroke: 2px white; /* Thicker line for visibility */
    text-transform: uppercase;
    margin-top: -15px;
    font-weight: 900;
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.2));
}

/* Buttons with Neon Glow */
.btn-gradient {
    background: linear-gradient(90deg, #8b5cf6, #22d3ee) !important;
    color: white !important;
    border: none;
    padding: 14px 40px;
    border-radius: 30px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(139, 92, 246, 0.6); /* Purple Glow */
    transition: 0.3s ease;
}

.btn-gradient:hover {
    box-shadow: 0 0 30px rgba(34, 211, 238, 0.8); /* Cyan Glow on hover */
    transform: scale(1.05);
}

.btn-outline-dark {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    padding: 14px 40px;
    border-radius: 30px;
    font-weight: bold;
    margin-left: 15px;
    backdrop-filter: blur(5px);
    transition: 0.3s;
}

.btn-outline-dark:hover {
    background: white;
    color: black;
}

/* Ensure the "No items" message is visible */
.empty-message {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1rem;
    margin-top: 40px;
    font-style: italic;
}

/* ===============================
   SMOOTH WEBSITE ANIMATIONS
================================ */

/* Page fade in */
body {
    animation: pageFade 0.7s ease-in;
}

@keyframes pageFade {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Navbar slide down */
.nav {
    animation: navSlide 0.7s ease;
}

@keyframes navSlide {
    from {
        transform: translateY(-40px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Hero text fade up */
.hero h1,
.hero h2,
.tagline,
.hero-actions {
    animation: fadeUp 0.9s ease forwards;
}

@keyframes fadeUp {
    from {
        transform: translateY(25px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Product image zoom when hover */
.product-img img {
    transition: transform 0.35s ease;
}

.card:hover .product-img img {
    transform: scale(1.08);
}

/* Button soft glow animation */
.hero-actions button,
.checkout-btn,
.btn-gradient {
    transition: 0.3s ease;
}

.hero-actions button:hover,
.checkout-btn:hover,
.btn-gradient:hover {
    transform: translateY(-3px);
    box-shadow: 0 0 30px rgba(34, 211, 238, 0.45);
}

/* Navbar link underline animation */
.nav-links a {
    position: relative;
}

.nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 2px;
    background: #22d3ee;
    transition: width 0.3s ease;
}

.nav-links a:hover::after {
    width: 100%;
}

/* Stock feature UI */
.disabled-btn {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}



/* Review Section */
.customer-reviews {
    background-color: #1a1d29;
    padding: 30px;
    border-radius: 8px;
    color: #fff;
    font-family: Arial, sans-serif;
}

.customer-reviews h2 {
    font-size: 24px;
    margin-bottom: 20px;
}

.customer-reviews .review-info {
    margin-bottom: 20px;
}

.customer-reviews .review-info .no-reviews {
    font-style: italic;
    color: #bbb;
}

.customer-reviews .review-form {
    background-color: #333;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.3);
}

.customer-reviews .review-form textarea {
    width: 100%;
    height: 100px;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #2d2f3d;
    color: #fff;
    font-size: 14px;
    resize: none;
}

.customer-reviews .review-form select {
    padding: 10px;
    background-color: #2d2f3d;
    color: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    width: 150px;
    margin-right: 10px;
    font-size: 14px;
}

.customer-reviews .review-form button {
    background-color: #4CAF50;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.customer-reviews .review-form button:hover {
    background-color: #45a049;
}

.customer-reviews .review-list {
    margin-top: 20px;
}

.customer-reviews .review-item {
    background-color: #2d2f3d;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 8px;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.2);
}

.customer-reviews .review-item .review-rating {
    font-size: 16px;
    color: #FFD700;
    margin-bottom: 10px;
}

.customer-reviews .review-item .review-comment {
    font-size: 14px;
    color: #bbb;
}

.customer-reviews .review-item .review-date {
    font-size: 12px;
    color: #888;
    margin-top: 10px;
    text-align: right;
}

/* =========================================
   PRODUCT DETAILS REVIEW PANEL - FINAL FIX
   Matches the actual HTML classes in product_details.php
========================================= */
.product-reviews-panel {
    width: 84%;
    margin: 24px auto 32px;
    padding: 30px;
    border-radius: 28px;
    background: rgba(255,255,255,0.055);
    border: 1px solid rgba(255,255,255,0.11);
    backdrop-filter: blur(18px);
    box-shadow: 0 20px 45px rgba(0,0,0,0.25);
}

.review-panel-head {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-start;
    margin-bottom: 22px;
}

.product-reviews-panel h2 {
    margin: 0 0 8px;
    font-size: 28px;
    color: #ffffff;
}

.review-summary-text,
.review-form-card p,
.review-comment-text,
.empty-review-card p {
    color: #d6d3ff;
    line-height: 1.65;
}

.review-alert {
    margin: 0 0 18px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(34,211,238,0.10);
    border: 1px solid rgba(34,211,238,0.24);
    color: #22d3ee;
    font-weight: 700;
}

.review-content-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 22px;
    align-items: start;
}

.product-reviews-panel .review-list {
    display: grid;
    gap: 16px;
    margin: 0;
}

.customer-review-card,
.review-form-card {
    padding: 22px;
    border-radius: 22px;
    background: rgba(255,255,255,0.045);
    border: 1px solid rgba(255,255,255,0.09);
    box-shadow: 0 14px 32px rgba(0,0,0,0.20);
}

.customer-review-card {
    transition: 0.25s ease;
}

.customer-review-card:hover {
    transform: translateY(-3px);
    border-color: rgba(34,211,238,0.28);
}

.review-card-top {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 12px;
}

.review-card-top h3,
.review-form-card h3 {
    margin: 0 0 6px;
    color: #090909;
    font-size: 18px;
}

.review-card-top p {
    margin: 0;
    color: #aaaac0;
    font-size: 13px;
}

.review-card-top span {
    flex-shrink: 0;
    padding: 9px 13px;
    border-radius: 999px;
    background: rgba(34,211,238,0.10);
    border: 1px solid rgba(34,211,238,0.22);
    color: #22d3ee;
    font-weight: 800;
    font-size: 13px;
}

.review-comment-text {
    margin: 0;
    word-break: break-word;
}

.review-form-card {
    position: sticky;
    top: 95px;
}

.product-reviews-panel .review-form {
    margin-top: 18px;
    display: grid;
    gap: 12px;
}

.product-reviews-panel .review-form label {
    color: #0f0e0e;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.product-reviews-panel .review-form select,

.product-reviews-panel .review-form .anonymous-option {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    margin-bottom: 10px;
}

.product-reviews-panel .review-form .anonymous-option input {
    width: 16px;
    height: 16px;
}
.product-reviews-panel .review-form textarea {
    width: 100%;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    background: rgba(255,255,255,0.06);
    color: #ffffff;
    outline: none;
    font-size: 14px;
    transition: 0.25s ease;
}

.product-reviews-panel .review-form select {
    height: 48px;
    padding: 0 14px;
}

.product-reviews-panel .review-form select option {
    background: #141421;
    color: #ffffff;
}

.product-reviews-panel .review-form textarea {
    min-height: 135px;
    padding: 14px;
    resize: vertical;
}

.product-reviews-panel .review-form textarea::placeholder {
    color: #aaaac0;
}

.product-reviews-panel .review-form select:focus,
.product-reviews-panel .review-form textarea:focus {
    border-color: rgba(34,211,238,0.55);
    box-shadow: 0 0 0 4px rgba(34,211,238,0.08);
}

.product-reviews-panel .review-form button {
    width: 100%;
    min-height: 48px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #22d3ee, #a855f7);
    color: #ffffff;
    font-weight: 900;
    letter-spacing: 0.6px;
    cursor: pointer;
    box-shadow: 0 12px 25px rgba(34,211,238,0.16);
    transition: 0.25s ease;
}

.product-reviews-panel .review-form button:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 35px rgba(168,85,247,0.24);
}

.review-mini-card {
    margin: 0 0 22px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
}

.review-mini-card span,
.review-mini-card small {
    display: block;
    color: #aaaac0;
    font-size: 13px;
}

.review-mini-card strong {
    display: block;
    margin: 5px 0;
    color: #ffffff;
    font-size: 18px;
}

.review-mini-card a {
    flex-shrink: 0;
    text-decoration: none;
    padding: 10px 14px;
    border-radius: 999px;
    color: #22d3ee;
    background: rgba(34,211,238,0.10);
    border: 1px solid rgba(34,211,238,0.20);
    font-size: 13px;
    font-weight: 800;
}

.review-mini-card a:hover {
    background: rgba(34,211,238,0.16);
}

@media (max-width: 1000px) {
    .review-content-grid {
        grid-template-columns: 1fr;
    }

    .review-form-card {
        position: static;
    }
}

@media (max-width: 600px) {
    .product-reviews-panel {
        width: 92%;
        padding: 22px;
    }

    .review-card-top,
    .review-mini-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .review-mini-card a {
        width: 100%;
        text-align: center;
    }
}


/* ==========================================================
   KRYLO FASHION UI REFRESH - ZALORA INSPIRED, NOT A COPY
   Clean white fashion marketplace theme for customer shop pages
   ========================================================== */
:root {
    --k-bg: #f7f7f5;
    --k-surface: #ffffff;
    --k-ink: #111111;
    --k-muted: #6f6f6f;
    --k-soft: #eeeeea;
    --k-line: #deded8;
    --k-black: #050505;
    --k-accent: #b3913f;
    --k-sale: #d92727;
    --k-radius: 0;
    --k-shadow: 0 18px 45px rgba(16, 16, 16, 0.08);
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--k-bg) !important;
    color: var(--k-ink) !important;
    font-family: Inter, "Helvetica Neue", Arial, sans-serif !important;
    letter-spacing: 0;
}

body::before,
body::after {
    display: none !important;
}

/* Clean marketplace navbar */
.nav {
    min-height: 72px !important;
    padding: 0 5.5% !important;
    background: rgba(255, 255, 255, 0.96) !important;
    border-bottom: 1px solid var(--k-line) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.04) !important;
    backdrop-filter: blur(18px) !important;
}

.logo {
    color: var(--k-black) !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    font-size: 30px !important;
    font-weight: 950 !important;
    letter-spacing: 9px !important;
}

.nav-links {
    gap: 6px 22px !important;
}

.nav-links a {
    color: #151515 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    padding: 10px 0 !important;
}

.nav-links a:hover {
    color: var(--k-accent) !important;
}

.nav-links a::after {
    background: var(--k-black) !important;
    bottom: 2px !important;
}

/* Campaign banner: full fashion hero image */
.shop-banner {
    width: min(100%, 1920px) !important;
    margin: 0 auto !important;
    background: #000 !important;
    height: clamp(330px, 43vw, 560px) !important;
    overflow: hidden !important;
}

.banner-carousel,
.banner-slide {
    height: 100% !important;
}

.banner-slide img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    filter: saturate(0.98) contrast(1.03) !important;
}

.fashion-usp-bar {
    width: 100%;
    min-height: 58px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    border-bottom: 1px solid var(--k-line);
    background: #fff;
}

.fashion-usp-bar div {
    min-height: 58px;
    padding: 12px 20px;
    border-right: 1px solid var(--k-line);
    text-align: center;
}

.fashion-usp-bar div:last-child {
    border-right: 0;
}

.fashion-usp-bar strong {
    display: block;
    color: #111;
    font-size: 12px;
    letter-spacing: 2px;
    font-weight: 950;
}

.fashion-usp-bar span {
    display: block;
    margin-top: 3px;
    color: var(--k-muted);
    font-size: 12px;
}

/* Editorial hero below banner */
.hero.fashion-hero {
    width: 89%;
    margin: 42px auto 34px;
    padding: 0 !important;
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
    gap: 26px;
    text-align: left !important;
}

.fashion-hero-copy,
.fashion-hero-panel {
    background: #fff;
    border: 1px solid var(--k-line);
    box-shadow: var(--k-shadow);
}

.fashion-hero-copy {
    padding: clamp(30px, 5vw, 64px);
}

.fashion-hero-panel {
    min-height: 320px;
    padding: 34px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #fff;
    background-image: linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.78)), url('../images/ban14.png');
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

.fashion-hero-panel::before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(255,255,255,0.45);
    pointer-events: none;
}

.status,
.dashboard-badge,
.product-category-text,
.category {
    color: var(--k-accent) !important;
    letter-spacing: 3px !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
}

.hero h1 {
    font-size: clamp(56px, 9vw, 118px) !important;
    line-height: 0.86 !important;
    letter-spacing: -5px !important;
    color: #050505 !important;
    font-weight: 950 !important;
}

.hero h2 {
    margin-top: 10px;
    font-size: clamp(34px, 5vw, 72px) !important;
    line-height: 0.95 !important;
    color: transparent !important;
    -webkit-text-stroke: 1.4px #111 !important;
    letter-spacing: -2px !important;
}

.tagline {
    margin: 22px 0 0 !important;
    max-width: 720px !important;
    color: #555 !important;
    font-size: 16px !important;
    line-height: 1.75 !important;
}

.fashion-hero-panel span,
.mood-card span,
.department-card span,
.section-heading p {
    display: block;
    color: #d8bd7c;
    letter-spacing: 3px;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.fashion-hero-panel strong {
    display: block;
    max-width: 360px;
    font-size: 36px;
    line-height: 1;
    font-weight: 950;
    position: relative;
    z-index: 1;
}

.fashion-hero-panel p {
    max-width: 360px;
    margin-top: 12px;
    color: rgba(255,255,255,0.82);
    line-height: 1.55;
    position: relative;
    z-index: 1;
}

/* Buttons */
.hero-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 28px;
}

.hero-actions button,
.promo button,
.bottom button,
.search-form button,
.checkout-btn,
.dashboard-main-btn,
.shipping-section .checkout-btn,
.product-reviews-panel .review-form button {
    border-radius: 0 !important;
    background: #b3913f !important;
    color: #fff !important;
    border: 1px solid #050505 !important;
    box-shadow: none !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    font-weight: 950 !important;
    transition: 0.22s ease !important;
}

.hero-actions button,
.search-form button,
.checkout-btn {
    min-height: 44px;
}

.hero-actions button:hover,
.search-form button:hover,
.checkout-btn:hover,
.dashboard-main-btn:hover,
.product-reviews-panel .review-form button:hover {
    transform: translateY(-2px) !important;
    background: var(--k-accent) !important;
    border-color: var(--k-accent) !important;
    color: #111 !important;
}

.hero-actions .outline,
.dashboard-outline-btn,
.panel-link {
    background: transparent !important;
    color: #111 !important;
    border: 1px solid #111 !important;
    box-shadow: none !important;
}

.hero-actions .outline:hover,
.dashboard-outline-btn:hover,
.panel-link:hover {
    background: #111 !important;
    color: #fff !important;
}

/* Fashion moodboard */
.fashion-moodboard {
    width: 89%;
    margin: 0 auto 42px;
    display: grid;
    grid-template-columns: 1.3fr 0.85fr 0.85fr;
    gap: 18px;
}

.mood-card {
    min-height: 260px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    color: #fff;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    box-shadow: var(--k-shadow);
}

.mood-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.72));
}

.mood-card > * {
    position: relative;
    z-index: 1;
}

.mood-large { background-image: url('../images/ban3.png'); }
.mood-small-1 { background-image: url('../images/ban4.png'); }
.mood-small-2 { background-image: url('../images/ban5.png'); }

.mood-card h3 {
    font-size: clamp(26px, 3vw, 45px);
    line-height: 0.95;
    margin: 0 0 10px;
    max-width: 470px;
}

.mood-card p {
    max-width: 520px;
    color: rgba(255,255,255,0.82);
    line-height: 1.55;
}

/* Search/filter bar */
.tools.shop-filter-section {
    width: 89% !important;
    margin: 0 auto 18px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 24px !important;
    background: #fff !important;
    border: 1px solid var(--k-line) !important;
    box-shadow: var(--k-shadow) !important;
}

.search-form,
.fashion-filter-form {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(240px, 1.4fr) minmax(170px, 0.75fr) minmax(170px, 0.75fr) auto auto !important;
    gap: 12px !important;
}

.tools input,
.tools select,
.admin-form input,
.admin-form select,
.auth-box input,
.product-reviews-panel .review-form select,
.product-reviews-panel .review-form textarea {
    border-radius: 0 !important;
    background: #fff !important;
    border: 1px solid #cfcfc8 !important;
    color: #111 !important;
    outline: none !important;
    font-size: 14px !important;
}

.tools input::placeholder,
.product-reviews-panel .review-form textarea::placeholder {
    color: #8a8a8a !important;
}

.tools select option,
.product-reviews-panel .review-form select option {
    background: #fff !important;
    color: #111 !important;
}

.clear-search {
    align-self: center;
    color: #111 !important;
    text-decoration: underline !important;
    font-weight: 950 !important;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
}

.audience-tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.audience-tab {
    min-height: 86px;
    padding: 18px;
    text-decoration: none;
    color: #111;
    border: 1px solid var(--k-line);
    background: #f7f7f5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: 0.22s ease;
}

.audience-tab small {
    color: var(--k-muted);
    font-size: 10px;
    letter-spacing: 2px;
    font-weight: 900;
}

.audience-tab span {
    font-size: 24px;
    font-weight: 950;
    letter-spacing: 2px;
}

.audience-tab:hover,
.audience-tab.active {
    background: #111;
    color: #fff;
    border-color: #111;
    transform: translateY(-3px);
}

.audience-tab:hover small,
.audience-tab.active small {
    color: var(--k-accent);
}

/* Department cards */
.fashion-category-cards {
    width: 89%;
    margin: 0 auto 24px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.department-card {
    min-height: 210px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    text-decoration: none;
    color: #fff;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    box-shadow: var(--k-shadow);
}

.department-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.10), rgba(0,0,0,0.76));
}

.department-card > * {
    position: relative;
    z-index: 1;
}

.department-card strong {
    display: block;
    font-size: 28px;
    line-height: 1.03;
    font-weight: 950;
}

.department-card small {
    margin-top: 8px;
    color: rgba(255,255,255,0.82);
    letter-spacing: 0.4px;
}

.dept-men { background-image: url('../images/ban11.png'); }
.dept-women { background-image: url('../images/ban12.png'); }
.dept-kids { background-image: url('../images/ban13.png'); }

.catalog-summary,
.section-heading {
    width: 89% !important;
    margin: 20px auto 0 !important;
}

.catalog-summary {
    color: #555 !important;
    font-size: 14px;
}

.catalog-summary strong {
    color: #111 !important;
}

.section-heading {
    margin-top: 34px !important;
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 16px;
}

.section-heading h2 {
    color: #111;
    font-size: clamp(28px, 4vw, 48px);
    letter-spacing: -1.4px;
    line-height: 0.95;
}

/* Product catalog cards */
.products {
    width: 89% !important;
    margin: 22px auto 70px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 22px !important;
}

.card {
    min-height: auto !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    border: 1px solid var(--k-line) !important;
    box-shadow: 0 14px 30px rgba(0,0,0,0.05) !important;
    backdrop-filter: none !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
}

.card:hover {
    transform: translateY(-6px) !important;
    border-color: #111 !important;
    box-shadow: 0 22px 48px rgba(0,0,0,0.12) !important;
}

.card .badge {
    top: 14px !important;
    left: 14px !important;
    z-index: 3 !important;
    padding: 7px 10px !important;
    background: #111 !important;
    color: #fff !important;
    font-size: 10px !important;
    letter-spacing: 1.4px !important;
    font-weight: 950 !important;
}

.heart {
    top: 12px !important;
    right: 12px !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    color: #111 !important;
    border: 1px solid rgba(0,0,0,0.15) !important;
    background: rgba(255,255,255,0.92) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.10) !important;
}

.heart:hover {
    color: var(--k-sale) !important;
    border-color: var(--k-sale) !important;
    transform: scale(1.07) !important;
}

.product-img {
    height: 268px !important;
    width: 100% !important;
    display: grid !important;
    place-items: center !important;
    background: linear-gradient(135deg, #f2f2ee, #fafafa) !important;
    border-bottom: 1px solid var(--k-line) !important;
    overflow: hidden !important;
}

.product-img img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    transition: transform 0.35s ease !important;
}

.product-img span {
    display: grid;
    place-items: center;
    width: 112px;
    height: 112px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--k-line);
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

.card .category,
.card h3,
.card .rating,
.card .bottom,
.card .card-actions {
    margin-left: 18px !important;
    margin-right: 18px !important;
}

.card .category {
    margin-top: 18px !important;
}

.card h3 {
    min-height: 48px;
    margin-top: 8px !important;
    margin-bottom: 8px !important;
    color: #111 !important;
    font-size: 18px !important;
    line-height: 1.28 !important;
    font-weight: 900 !important;
}

.rating {
    color: #666 !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
}

.bottom {
    margin-top: auto !important;
    padding-top: 12px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.bottom strong,
.product-price-row h2,
.similar-card strong {
    color: #111 !important;
    font-weight: 950 !important;
}

.card-actions {
    margin-top: 14px !important;
    margin-bottom: 18px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}

.card-actions .checkout-btn,
.small-btn {
    width: 100% !important;
    margin: 0 !important;
    padding: 11px 9px !important;
    font-size: 11px !important;
    text-align: center !important;
}

.disabled-btn {
    opacity: 0.48 !important;
    background: #999 !important;
    border-color: #999 !important;
    color: #fff !important;
}

.danger-link {
    color: var(--k-sale) !important;
}

.empty-message {
    color: #555 !important;
    background: #fff;
    border: 1px dashed var(--k-line);
    padding: 30px;
}

/* Footer */
footer {
    background: #111 !important;
    color: #cfcfcf !important;
    border-top: 0 !important;
    padding: 48px 5.5% !important;
}

footer h3 {
    color: #fff !important;
    letter-spacing: 9px !important;
}

/* Admin/auth/customer pages get cleaner surface, not neon */
.admin-panel,
.dashboard-hero,
.dashboard-panel,
.stat-card,
.product-visual-card,
.product-main-info,
.details-panel,
.product-reviews-panel,
.customer-review-card,
.review-form-card,
.review-mini-card,
.auth-box,
.shipping-section,
.product-detail-box {
    background: #fff !important;
    color: #111 !important;
    border: 1px solid var(--k-line) !important;
    border-radius: 0 !important;
    box-shadow: var(--k-shadow) !important;
    backdrop-filter: none !important;
}

.admin-panel p,
.dashboard-subtitle,
.stat-card p,
.quick-link-box span,
.latest-order-row span,
.product-main-info p,
.product-description,
.details-list span,
.care-box p,
.review-summary-text,
.review-form-card p,
.review-comment-text,
.empty-review-card p {
    color: #555 !important;
}

.admin-table th,
.dashboard-table th {
    color: #111 !important;
    background: #f4f4f0 !important;
}

.admin-table td,
.dashboard-table td {
    color: #222 !important;
}

.admin-table th,
.admin-table td,
.dashboard-table th,
.dashboard-table td {
    border-bottom: 1px solid var(--k-line) !important;
}

.admin-form {
    grid-template-columns: repeat(4, minmax(150px, 1fr)) !important;
}

.form-hint {
    color: #777 !important;
    align-self: center;
}

/* Auth split form clean-up */
.split-form {
    background: #f7f7f5 !important;
}

.auth-box h1 {
    color: #111 !important;
    background: none !important;
    -webkit-background-clip: initial !important;
}

.auth-box a {
    color: #111 !important;
    text-decoration: underline !important;
}

/* Product details page refinement */
.product-visual-card::before {
    background: linear-gradient(135deg, #f0f0ec, #fff) !important;
}

.product-detail-badge,
.review-card-top span,
.review-mini-card a {
    background: #111 !important;
    color: #fff !important;
    border-color: #111 !important;
    border-radius: 0 !important;
}

.product-info-grid div,
.details-list div,
.care-box,
.quick-link-box,
.latest-order-row,
.empty-dashboard-box {
    background: #f7f7f5 !important;
    border: 1px solid var(--k-line) !important;
    border-radius: 0 !important;
    color: #111 !important;
}

.product-main-icon {
    filter: none !important;
}

/* Review section */
.product-reviews-panel .review-form select:focus,
.product-reviews-panel .review-form textarea:focus,
.tools input:focus,
.tools select:focus,
.admin-form input:focus,
.admin-form select:focus,
.auth-box input:focus {
    border-color: #111 !important;
    box-shadow: 0 0 0 3px rgba(0,0,0,0.06) !important;
}

.review-alert {
    background: #f7f7f5 !important;
    border: 1px solid var(--k-line) !important;
    color: #111 !important;
    border-radius: 0 !important;
}

/* Responsive */
@media (max-width: 1180px) {
    .products {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .fashion-moodboard,
    .fashion-category-cards {
        grid-template-columns: 1fr 1fr !important;
    }

    .mood-large {
        grid-column: 1 / -1;
    }

    .admin-form {
        grid-template-columns: repeat(2, minmax(160px, 1fr)) !important;
    }
}

@media (max-width: 980px) {
    .nav {
        align-items: flex-start !important;
    }

    .hero.fashion-hero,
    .product-detail-layout,
    .product-more-details,
    .dashboard-grid {
        grid-template-columns: 1fr !important;
    }

    .fashion-filter-form,
    .search-form {
        grid-template-columns: 1fr 1fr !important;
    }

    .products,
    .similar-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .fashion-usp-bar {
        grid-template-columns: 1fr !important;
    }

    .fashion-usp-bar div {
        border-right: 0;
        border-bottom: 1px solid var(--k-line);
    }
}

@media (max-width: 640px) {
    .shop-banner {
        height: 320px !important;
    }

    .hero.fashion-hero,
    .fashion-moodboard,
    .tools.shop-filter-section,
    .fashion-category-cards,
    .catalog-summary,
    .section-heading,
    .products,
    .dashboard-hero,
    .dashboard-panel,
    .wide-panel,
    .product-page-hero,
    .product-more-details,
    .similar-section,
    .product-reviews-panel {
        width: 92% !important;
    }

    .fashion-moodboard,
    .fashion-category-cards,
    .audience-tabs,
    .products,
    .fashion-filter-form,
    .search-form,
    .card-actions,
    .admin-form,
    .dashboard-stats {
        grid-template-columns: 1fr !important;
    }

    .fashion-hero-copy {
        padding: 28px;
    }

    .hero h1 {
        letter-spacing: -2px !important;
    }

    .hero-actions,
    .dashboard-hero-actions,
    .latest-order-actions {
        flex-direction: column !important;
    }

    .hero-actions a,
    .hero-actions button {
        width: 100% !important;
    }

    .product-img {
        height: 240px !important;
    }
}


/* ==========================================================
   FINAL SHOP FIX - Banner full display + consistent catalog images
   Paste this at the VERY END of assets/css/style.css
   ========================================================== */

/* 1) Banner: show the complete campaign image, not cropped */
.shop-banner {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #000 !important;
    height: auto !important;
    min-height: 0 !important;
    line-height: 0 !important;
}

.banner-carousel {
    width: 100% !important;
    display: flex !important;
    align-items: stretch !important;
    transition: transform 0.55s ease-in-out !important;
    height: auto !important;
    min-height: 0 !important;
}

.banner-slide {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
}

.banner-slide img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: none !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center center !important;
    filter: none !important;
}

/* 2) Product catalog: consistent image box and no ugly cropping/blurry upscaling */
.products {
    align-items: stretch !important;
}

.card {
    height: 100% !important;
}

.product-img {
    height: 255px !important;
    min-height: 255px !important;
    width: 100% !important;
    padding: 24px !important;
    box-sizing: border-box !important;
    display: grid !important;
    place-items: center !important;
    background: #f7f7f3 !important;
    border-bottom: 1px solid var(--k-line) !important;
    overflow: hidden !important;
}

.product-img img {
    width: auto !important;
    height: auto !important;
    max-width: 82% !important;
    max-height: 190px !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    margin: 0 auto !important;
    mix-blend-mode: normal !important;
    transform: none !important;
}

.card:hover .product-img img {
    transform: scale(1.03) !important;
}

.product-img span {
    margin: 0 auto !important;
}

/* Keep product text aligned evenly below every image */
.card .category {
    margin-top: 18px !important;
    min-height: 18px !important;
}

.card h3 {
    min-height: 48px !important;
    display: block !important;
}

.card .rating {
    min-height: 18px !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
}

.card .bottom {
    margin-top: auto !important;
}

.card .card-actions {
    align-items: stretch !important;
}

.card-actions .checkout-btn,
.small-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 44px !important;
    line-height: 1.1 !important;
}

/* Tablet */
@media (max-width: 980px) {
    .product-img {
        height: 240px !important;
        min-height: 240px !important;
    }

    .product-img img {
        max-height: 178px !important;
        max-width: 84% !important;
    }
}

/* Mobile */
@media (max-width: 640px) {
    .shop-banner {
        height: auto !important;
        min-height: 0 !important;
    }

    .banner-slide img {
        width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }

    .product-img {
        height: 230px !important;
        min-height: 230px !important;
        padding: 22px !important;
    }

    .product-img img {
        max-height: 170px !important;
        max-width: 82% !important;
    }
}

/* ==========================================================
   STAFF PANEL FINAL THEME FIX
   Scope: only pages with staff navigation (Dashboard / Payments / Orders / Profile)
   Paste/keep this at the VERY END of assets/css/style.css
   ========================================================== */

body:has(.nav-links a[href="payments.php"]) {
    --staff-primary: #c9a840;
    --staff-primary-dark: #8b6914;
    --staff-text: #111111;
    --staff-muted: #666666;
    --staff-bg: #f7f7f7;
    --staff-card: #ffffff;
    --staff-border: #e5e5e5;
    --staff-shadow: 0 18px 45px rgba(0, 0, 0, 0.06);
    background: var(--staff-bg) !important;
    color: var(--staff-text) !important;
    font-family: "Poppins", Arial, sans-serif !important;
}

body:has(.nav-links a[href="payments.php"])::before,
body:has(.nav-links a[href="payments.php"])::after {
    display: none !important;
}

/* Staff navbar */
body:has(.nav-links a[href="payments.php"]) .nav {
    min-height: 78px !important;
    padding: 0 6% !important;
    background: rgba(255, 255, 255, 0.98) !important;
    border-bottom: 1px solid var(--staff-border) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04) !important;
    backdrop-filter: blur(12px) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
}

body:has(.nav-links a[href="payments.php"]) .logo {
    color: #050505 !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: #050505 !important;
    font-size: 28px !important;
    font-weight: 900 !important;
    letter-spacing: 10px !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

body:has(.nav-links a[href="payments.php"]) .nav-links {
    display: flex !important;
    align-items: center !important;
    gap: 26px !important;
    list-style: none !important;
}

body:has(.nav-links a[href="payments.php"]) .nav-links a {
    margin-left: 0 !important;
    padding: 28px 0 23px !important;
    color: #050505 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    position: relative !important;
    transition: color 0.25s ease !important;
}

body:has(.nav-links a[href="payments.php"]) .nav-links a::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 14px !important;
    width: 0 !important;
    height: 2px !important;
    background: var(--staff-primary) !important;
    transform: translateX(-50%) !important;
    transition: width 0.25s ease !important;
}

body:has(.nav-links a[href="payments.php"]) .nav-links a:hover,
body:has(.nav-links a[href="payments.php"]) .nav-links a.bag {
    color: #050505 !important;
}

body:has(.nav-links a[href="payments.php"]) .nav-links a:hover::after,
body:has(.nav-links a[href="payments.php"]) .nav-links a.bag::after {
    width: 100% !important;
}

body:has(.nav-links a[href="payments.php"]) .bag {
    color: #050505 !important;
}

/* Staff page title / hero */
body:has(.nav-links a[href="payments.php"]) .hero {
    padding: 34px 20px 28px !important;
    text-align: center !important;
    background: transparent !important;
}

body:has(.nav-links a[href="payments.php"]) .hero .status,
body:has(.nav-links a[href="payments.php"]) .hero h1 {
    display: none !important;
}

body:has(.nav-links a[href="payments.php"]) .hero h2 {
    display: inline-block !important;
    margin: 0 auto !important;
    padding: 0 0 14px !important;
    color: #050505 !important;
    background: none !important;
    -webkit-text-fill-color: #050505 !important;
    -webkit-text-stroke: 0 !important;
    font-size: clamp(36px, 4.2vw, 48px) !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 1.05 !important;
    text-transform: uppercase !important;
    position: relative !important;
}

body:has(.nav-links a[href="payments.php"]) .hero h2::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 0 !important;
    width: 66px !important;
    height: 2px !important;
    background: var(--staff-primary) !important;
    transform: translateX(-50%) !important;
}

body:has(.nav-links a[href="payments.php"]) .tagline {
    max-width: 820px !important;
    margin: 20px auto 0 !important;
    color: var(--staff-text) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}

body:has(.nav-links a[href="payments.php"]) .tagline a {
    color: var(--staff-primary) !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}

/* Staff statistic cards on dashboard */
body:has(.nav-links a[href="payments.php"]) .products {
    width: 86% !important;
    max-width: 1180px !important;
    margin: 26px auto 36px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(180px, 1fr)) !important;
    gap: 14px !important;
    align-items: stretch !important;
}

body:has(.nav-links a[href="payments.php"]) .products > .card:not(:has(.product-img)) {
    min-height: 130px !important;
    height: auto !important;
    padding: 26px 22px !important;
    background: var(--staff-card) !important;
    color: var(--staff-text) !important;
    border: 1px solid var(--staff-border) !important;
    border-radius: 0 !important;
    box-shadow: var(--staff-shadow) !important;
    display: grid !important;
    grid-template-columns: 58px 1fr !important;
    grid-template-rows: auto auto auto !important;
    column-gap: 18px !important;
    row-gap: 6px !important;
    align-items: center !important;
    text-align: left !important;
    overflow: visible !important;
    transform: none !important;
}

body:has(.nav-links a[href="payments.php"]) .products > .card:not(:has(.product-img))::before {
    width: 52px !important;
    height: 52px !important;
    border-radius: 5px !important;
    background: linear-gradient(135deg, #d9b72f, #b88d08) !important;
    color: #ffffff !important;
    display: grid !important;
    place-items: center !important;
    grid-column: 1 !important;
    grid-row: 1 / span 3 !important;
    font-size: 22px !important;
    line-height: 1 !important;
    box-shadow: 0 12px 24px rgba(201, 168, 64, 0.24) !important;
}

body:has(.nav-links a[href="payments.php"]) .products > .card:nth-child(1):not(:has(.product-img))::before { content: "ORD" !important; }
body:has(.nav-links a[href="payments.php"]) .products > .card:nth-child(2):not(:has(.product-img))::before { content: "PEN" !important; }
body:has(.nav-links a[href="payments.php"]) .products > .card:nth-child(3):not(:has(.product-img))::before { content: "PAID" !important; }
body:has(.nav-links a[href="payments.php"]) .products > .card:nth-child(4):not(:has(.product-img))::before { content: "SHIP" !important; }

body:has(.nav-links a[href="payments.php"]) .products > .card:not(:has(.product-img)) .category {
    grid-column: 2 !important;
    margin: 0 !important;
    min-height: 0 !important;
    color: #111111 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    line-height: 1.25 !important;
}

body:has(.nav-links a[href="payments.php"]) .products > .card:not(:has(.product-img)) h3 {
    grid-column: 2 !important;
    margin: 0 !important;
    min-height: 0 !important;
    display: block !important;
    color: #111111 !important;
    font-size: 34px !important;
    font-weight: 900 !important;
    letter-spacing: 0 !important;
    line-height: 1.05 !important;
}

body:has(.nav-links a[href="payments.php"]) .products > .card:not(:has(.product-img)) .rating {
    grid-column: 2 !important;
    margin: 12px 0 0 !important;
    min-height: 0 !important;
    color: #555555 !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
}

/* Staff panels */
body:has(.nav-links a[href="payments.php"]) .admin-panel {
    width: 86% !important;
    max-width: 1180px !important;
    margin: 28px auto !important;
    padding: 34px 34px 30px !important;
    background: #ffffff !important;
    color: #111111 !important;
    border: 1px solid var(--staff-border) !important;
    border-radius: 0 !important;
    box-shadow: var(--staff-shadow) !important;
    backdrop-filter: none !important;
}

body:has(.nav-links a[href="payments.php"]) .admin-panel h2 {
    margin: 0 0 24px !important;
    color: #111111 !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    -webkit-text-fill-color: #111111 !important;
    font-size: 24px !important;
    font-weight: 900 !important;
    letter-spacing: -0.4px !important;
}

body:has(.nav-links a[href="payments.php"]) .admin-panel p,
body:has(.nav-links a[href="payments.php"]) .form-note {
    color: #555555 !important;
}

/* Staff profile view cards */
body:has(.nav-links a[href="payments.php"]) .profile-view-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    margin-top: 18px !important;
}

body:has(.nav-links a[href="payments.php"]) .profile-info-card {
    min-height: 96px !important;
    padding: 22px 20px !important;
    background: #fbfbfb !important;
    border: 1px solid var(--staff-border) !important;
    border-radius: 10px !important;
    box-shadow: none !important;
}

body:has(.nav-links a[href="payments.php"]) .profile-info-card span {
    margin-bottom: 8px !important;
    color: #333333 !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
}

body:has(.nav-links a[href="payments.php"]) .profile-info-card strong {
    color: #111111 !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    word-break: break-word !important;
}

body:has(.nav-links a[href="payments.php"]) .profile-actions,
body:has(.nav-links a[href="payments.php"]) .form-actions,
body:has(.nav-links a[href="payments.php"]) .hero-actions {
    display: flex !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}

body:has(.nav-links a[href="payments.php"]) .profile-actions a,
body:has(.nav-links a[href="payments.php"]) .hero-actions a {
    text-decoration: none !important;
}

/* Staff buttons */
body:has(.nav-links a[href="payments.php"]) .hero-actions button,
body:has(.nav-links a[href="payments.php"]) .profile-actions button,
body:has(.nav-links a[href="payments.php"]) .admin-form button,
body:has(.nav-links a[href="payments.php"]) .checkout-btn {
    min-height: 48px !important;
    padding: 14px 24px !important;
    border-radius: 4px !important;
    border: 1px solid var(--staff-primary) !important;
    background: linear-gradient(135deg, #d9b72f, #b88d08) !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(201, 168, 64, 0.20) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: 0.2s ease !important;
}

body:has(.nav-links a[href="payments.php"]) .hero-actions .outline,
body:has(.nav-links a[href="payments.php"]) .profile-actions .outline,
body:has(.nav-links a[href="payments.php"]) .cancel-btn {
    min-height: 48px !important;
    padding: 14px 24px !important;
    border-radius: 4px !important;
    border: 1px solid var(--staff-primary) !important;
    background: #ffffff !important;
    color: var(--staff-primary-dark) !important;
    box-shadow: none !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
}

body:has(.nav-links a[href="payments.php"]) .hero-actions button:hover,
body:has(.nav-links a[href="payments.php"]) .profile-actions button:hover,
body:has(.nav-links a[href="payments.php"]) .admin-form button:hover,
body:has(.nav-links a[href="payments.php"]) .checkout-btn:hover,
body:has(.nav-links a[href="payments.php"]) .cancel-btn:hover {
    transform: translateY(-2px) !important;
    filter: brightness(0.97) !important;
}

body:has(.nav-links a[href="payments.php"]) .danger-link {
    color: #b42318 !important;
    font-weight: 900 !important;
    text-decoration: none !important;
}

/* Staff edit form */
body:has(.nav-links a[href="payments.php"]) .admin-form,
body:has(.nav-links a[href="payments.php"]) .profile-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
}

body:has(.nav-links a[href="payments.php"]) .full-width {
    grid-column: 1 / -1 !important;
}

body:has(.nav-links a[href="payments.php"]) .admin-form label {
    color: #333333 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 1.1px !important;
    text-transform: uppercase !important;
}

body:has(.nav-links a[href="payments.php"]) .admin-form input,
body:has(.nav-links a[href="payments.php"]) .admin-form select,
body:has(.nav-links a[href="payments.php"]) .admin-table select {
    width: 100% !important;
    min-height: 48px !important;
    padding: 13px 14px !important;
    border-radius: 8px !important;
    border: 1px solid var(--staff-border) !important;
    background: #fbfbfb !important;
    color: #111111 !important;
    outline: none !important;
    box-shadow: none !important;
}

body:has(.nav-links a[href="payments.php"]) .admin-form input:focus,
body:has(.nav-links a[href="payments.php"]) .admin-form select:focus,
body:has(.nav-links a[href="payments.php"]) .admin-table select:focus {
    border-color: var(--staff-primary) !important;
    box-shadow: 0 0 0 3px rgba(201, 168, 64, 0.16) !important;
}

body:has(.nav-links a[href="payments.php"]) .admin-form input:disabled {
    opacity: 0.65 !important;
    cursor: not-allowed !important;
}

/* Staff tables */
body:has(.nav-links a[href="payments.php"]) .admin-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-top: 14px !important;
    background: #ffffff !important;
    color: #111111 !important;
}

body:has(.nav-links a[href="payments.php"]) .admin-table th {
    padding: 15px 14px !important;
    background: #f4f4f4 !important;
    color: #111111 !important;
    border-bottom: 1px solid var(--staff-border) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    text-align: left !important;
}

body:has(.nav-links a[href="payments.php"]) .admin-table td {
    padding: 15px 14px !important;
    border-bottom: 1px solid var(--staff-border) !important;
    color: #222222 !important;
    font-size: 14px !important;
    vertical-align: middle !important;
}

body:has(.nav-links a[href="payments.php"]) .admin-table td[style],
body:has(.nav-links a[href="payments.php"]) .admin-table td span[style] {
    color: #222222 !important;
}

body:has(.nav-links a[href="payments.php"]) .admin-table form {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
}

/* Staff footer */
body:has(.nav-links a[href="payments.php"]) footer {
    background: transparent !important;
    color: #555555 !important;
    border-top: 0 !important;
    text-align: center !important;
    padding: 34px 20px !important;
}

body:has(.nav-links a[href="payments.php"]) footer h3,
body:has(.nav-links a[href="payments.php"]) footer p {
    color: #333333 !important;
}

@media (max-width: 980px) {
    body:has(.nav-links a[href="payments.php"]) .nav {
        min-height: auto !important;
        padding: 20px 5% !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 14px !important;
    }

    body:has(.nav-links a[href="payments.php"]) .nav-links {
        width: 100% !important;
        flex-wrap: wrap !important;
        gap: 8px 18px !important;
    }

    body:has(.nav-links a[href="payments.php"]) .nav-links a {
        padding: 8px 0 10px !important;
    }

    body:has(.nav-links a[href="payments.php"]) .nav-links a::after {
        bottom: 2px !important;
    }

    body:has(.nav-links a[href="payments.php"]) .products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 680px) {
    body:has(.nav-links a[href="payments.php"]) .logo {
        font-size: 22px !important;
        letter-spacing: 6px !important;
    }

    body:has(.nav-links a[href="payments.php"]) .hero h2 {
        font-size: 34px !important;
    }

    body:has(.nav-links a[href="payments.php"]) .products,
    body:has(.nav-links a[href="payments.php"]) .admin-panel {
        width: 92% !important;
    }

    body:has(.nav-links a[href="payments.php"]) .products,
    body:has(.nav-links a[href="payments.php"]) .profile-view-grid,
    body:has(.nav-links a[href="payments.php"]) .admin-form,
    body:has(.nav-links a[href="payments.php"]) .profile-grid {
        grid-template-columns: 1fr !important;
    }

    body:has(.nav-links a[href="payments.php"]) .admin-panel {
        padding: 24px 20px !important;
        overflow-x: auto !important;
    }

    body:has(.nav-links a[href="payments.php"]) .form-actions,
    body:has(.nav-links a[href="payments.php"]) .hero-actions,
    body:has(.nav-links a[href="payments.php"]) .profile-actions {
        flex-direction: column !important;
    }

    body:has(.nav-links a[href="payments.php"]) .form-actions button,
    body:has(.nav-links a[href="payments.php"]) .form-actions a,
    body:has(.nav-links a[href="payments.php"]) .hero-actions button,
    body:has(.nav-links a[href="payments.php"]) .profile-actions button {
        width: 100% !important;
        text-align: center !important;
    }
}


/* =========================================================
   FINAL CORRECTED FASHION DASHBOARD + PLACEHOLDER UPGRADE
   No emojis used. Replace the SVG files below with your own images later:
   ../images/placeholder-customer-dashboard.svg
   ../images/placeholder-staff-fashion.svg
   ../images/placeholder-panel-fashion.svg
========================================================= */

/* Customer dashboard hero with correctly placed image placeholder */
.dashboard-hero {
    position: relative !important;
    width: 86% !important;
    max-width: 1220px !important;
    min-height: 380px !important;
    margin: 42px auto 28px !important;
    padding: clamp(32px, 5vw, 58px) !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    border: 1px solid rgba(216, 189, 124, 0.28) !important;
    background-image:
        linear-gradient(90deg, rgba(7, 7, 9, 0.98) 0%, rgba(7, 7, 9, 0.88) 52%, rgba(7, 7, 9, 0.34) 100%),
        url('../images/ban34.png') !important;
    background-size: cover !important;
    background-position: center !important;
    box-shadow: 0 26px 70px rgba(0, 0, 0, 0.38) !important;
}

.dashboard-hero::before {
    content: "" !important;
    position: absolute !important;
    inset: 22px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 22px !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

.dashboard-hero::after {
    content: "IMAGE PLACEHOLDER" !important;
    position: absolute !important;
    right: clamp(24px, 4vw, 52px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: min(34%, 360px) !important;
    height: 74% !important;
    min-height: 245px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px dashed rgba(216, 189, 124, 0.55) !important;
    border-radius: 24px !important;
    color: rgba(216, 189, 124, 0.92) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 3px !important;
    text-align: center !important;
    background: rgba(255, 255, 255, 0.035) !important;
    backdrop-filter: blur(2px) !important;
    z-index: 0 !important;
}

.dashboard-hero-content {
    position: relative !important;
    z-index: 2 !important;
    max-width: 690px !important;
    width: 58% !important;
}

.dashboard-hero h1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: clamp(42px, 5.4vw, 70px) !important;
    line-height: 0.95 !important;
    letter-spacing: -2px !important;
    margin: 8px 0 16px !important;
}

.dashboard-subtitle {
    color: rgba(255, 255, 255, 0.82) !important;
    max-width: 640px !important;
}

.dashboard-badge {
    color: #d8bd7c !important;
    letter-spacing: 4px !important;
}

/* Customer dashboard statistic icons without emoji */
.dashboard-stats {
    width: 86% !important;
    max-width: 1220px !important;
    grid-template-columns: repeat(5, minmax(150px, 1fr)) !important;
    gap: 16px !important;
}

.stat-card {
    position: relative !important;
    min-height: 180px !important;
    padding: 78px 22px 24px !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.095), rgba(255,255,255,0.045)) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
}

.stat-card::before {
    position: absolute !important;
    left: 22px !important;
    top: 22px !important;
    width: 44px !important;
    height: 44px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #d8bd7c, #8f6e2f) !important;
    color: #090909 !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    letter-spacing: 0.7px !important;
    box-shadow: 0 14px 28px rgba(216, 189, 124, 0.18) !important;
}

.stat-card:nth-child(1)::before { content: "BAG" !important; }
.stat-card:nth-child(2)::before { content: "ORD" !important; }
.stat-card:nth-child(3)::before { content: "PEN" !important; }
.stat-card:nth-child(4)::before { content: "PAY" !important; }
.stat-card:nth-child(5)::before { content: "RM" !important; }

.stat-card::after {
    content: "" !important;
    position: absolute !important;
    right: -36px !important;
    top: -36px !important;
    width: 115px !important;
    height: 115px !important;
    border: 1px solid rgba(216, 189, 124, 0.14) !important;
    border-radius: 50% !important;
}

.stat-label {
    color: #d8bd7c !important;
}

/* Quick action cards with clean label icons */
.dashboard-panel {
    position: relative !important;
    overflow: hidden !important;
    border: 1px solid rgba(216, 189, 124, 0.16) !important;
}

.quick-link-box {
    position: relative !important;
    min-height: 102px !important;
    padding: 22px 20px 20px 82px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
}

.quick-link-box::before {
    position: absolute !important;
    left: 20px !important;
    top: 22px !important;
    width: 42px !important;
    height: 42px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 14px !important;
    background: rgba(216, 189, 124, 0.14) !important;
    border: 1px solid rgba(216, 189, 124, 0.32) !important;
    color: #d8bd7c !important;
    font-size: 9px !important;
    font-weight: 950 !important;
    letter-spacing: 0.8px !important;
}

.quick-link-box:nth-child(1)::before { content: "SHOP" !important; }
.quick-link-box:nth-child(2)::before { content: "CART" !important; }
.quick-link-box:nth-child(3)::before { content: "HIST" !important; }
.quick-link-box:nth-child(4)::before { content: "PAY" !important; }

/* Decorative placeholder for the recent order panel */
.dashboard-grid .dashboard-panel:nth-child(2)::before,
.wide-panel::before {
    content: "STYLE IMAGE PLACEHOLDER" !important;
    display: block !important;
    min-height: 86px !important;
    margin-bottom: 20px !important;
    border-radius: 18px !important;
    border: 1px dashed rgba(216, 189, 124, 0.42) !important;
    background-image:
        linear-gradient(135deg, rgba(216,189,124,0.12), rgba(255,255,255,0.035)),
        url('../images/pp.png') !important;
    background-size: cover !important;
    background-position: center !important;
    color: rgba(216, 189, 124, 0.9) !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    letter-spacing: 2px !important;
    display: grid !important;
    place-items: center !important;
    text-align: center !important;
}

/* Staff pages: corrected non-emoji icons and fashion image placeholder */
body:has(.nav-links a[href="payments.php"]) .hero {
    width: 86% !important;
    max-width: 1180px !important;
    min-height: 230px !important;
    margin: 34px auto 24px !important;
    padding: 34px clamp(24px, 4vw, 44px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(230px, 340px) !important;
    align-items: center !important;
    gap: 26px !important;
    text-align: left !important;
    background: #ffffff !important;
    border: 1px solid var(--staff-border) !important;
    box-shadow: var(--staff-shadow) !important;
    position: relative !important;
    overflow: hidden !important;
}

body:has(.nav-links a[href="payments.php"]) .hero::before {
    content: "STAFF IMAGE PLACEHOLDER" !important;
    grid-column: 2 !important;
    grid-row: 1 / span 3 !important;
    min-height: 160px !important;
    height: 100% !important;
    border-radius: 12px !important;
    border: 1px dashed rgba(139, 105, 20, 0.42) !important;
    background-image:
        linear-gradient(180deg, rgba(0,0,0,0.08), rgba(0,0,0,0.44)),
        url('../images/placeholder-staff-fashion.svg') !important;
    background-size: cover !important;
    background-position: center !important;
    color: #ffffff !important;
    display: grid !important;
    place-items: center !important;
    text-align: center !important;
    padding: 20px !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    letter-spacing: 2px !important;
}

body:has(.nav-links a[href="payments.php"]) .hero h2 {
    margin: 0 !important;
    text-align: left !important;
}

body:has(.nav-links a[href="payments.php"]) .hero h2::after {
    left: 0 !important;
    transform: none !important;
}

body:has(.nav-links a[href="payments.php"]) .tagline {
    margin: 22px 0 0 !important;
    max-width: 650px !important;
}

body:has(.nav-links a[href="payments.php"]) .products > .card:not(:has(.product-img))::before {
    font-size: 10px !important;
    font-weight: 950 !important;
    letter-spacing: 0.7px !important;
    text-align: center !important;
}

body:has(.nav-links a[href="payments.php"]) .products > .card:nth-child(1):not(:has(.product-img))::before { content: "ALL" !important; }
body:has(.nav-links a[href="payments.php"]) .products > .card:nth-child(2):not(:has(.product-img))::before { content: "PEN" !important; }
body:has(.nav-links a[href="payments.php"]) .products > .card:nth-child(3):not(:has(.product-img))::before { content: "PAID" !important; }
body:has(.nav-links a[href="payments.php"]) .products > .card:nth-child(4):not(:has(.product-img))::before { content: "SHIP" !important; }

/* Staff profile information cards: readable text and clean icons */
body:has(.nav-links a[href="payments.php"]) .profile-info-card {
    position: relative !important;
    padding: 22px 20px 22px 82px !important;
    min-height: 108px !important;
}

body:has(.nav-links a[href="payments.php"]) .profile-info-card::before {
    position: absolute !important;
    left: 20px !important;
    top: 24px !important;
    width: 42px !important;
    height: 42px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 8px !important;
    background: rgba(201, 168, 64, 0.15) !important;
    border: 1px solid rgba(201, 168, 64, 0.35) !important;
    color: var(--staff-primary-dark) !important;
    font-size: 9px !important;
    font-weight: 950 !important;
    letter-spacing: 0.7px !important;
}

body:has(.nav-links a[href="payments.php"]) .profile-info-card:nth-child(1)::before { content: "ID" !important; }
body:has(.nav-links a[href="payments.php"]) .profile-info-card:nth-child(2)::before { content: "NAME" !important; }
body:has(.nav-links a[href="payments.php"]) .profile-info-card:nth-child(3)::before { content: "MAIL" !important; }
body:has(.nav-links a[href="payments.php"]) .profile-info-card:nth-child(4)::before { content: "ROLE" !important; }

@media (max-width: 1080px) {
    .dashboard-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }

    .dashboard-hero-content {
        width: 62% !important;
    }
}

@media (max-width: 900px) {
    .dashboard-hero {
        padding-bottom: 300px !important;
    }

    .dashboard-hero-content {
        width: 100% !important;
        max-width: none !important;
    }

    .dashboard-hero::after {
        left: 28px !important;
        right: 28px !important;
        top: auto !important;
        bottom: 28px !important;
        transform: none !important;
        width: auto !important;
        height: 230px !important;
        min-height: 230px !important;
    }

    body:has(.nav-links a[href="payments.php"]) .hero {
        grid-template-columns: 1fr !important;
        text-align: left !important;
    }

    body:has(.nav-links a[href="payments.php"]) .hero::before {
        grid-column: 1 !important;
        grid-row: auto !important;
        min-height: 190px !important;
    }
}

@media (max-width: 680px) {
    .dashboard-hero,
    .dashboard-stats,
    .dashboard-grid,
    .wide-panel {
        width: 92% !important;
    }

    .dashboard-stats {
        grid-template-columns: 1fr !important;
    }

    .quick-link-box {
        padding-left: 76px !important;
    }

    .dashboard-hero h1 {
        font-size: 38px !important;
    }

    body:has(.nav-links a[href="payments.php"]) .profile-info-card {
        padding-left: 76px !important;
    }
}


/* =========================================================
   CUSTOMER UI FINAL FIXES - readable dashboard, normal wishlist,
   clean CSS icons, and non-emoji image placeholders
========================================================= */

/* Non-emoji navigation icons */
.nav-links a.nav-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    white-space: nowrap !important;
}

.nav-icon {
    width: 19px !important;
    height: 19px !important;
    min-width: 19px !important;
    display: inline-grid !important;
    place-items: center !important;
    border: 1px solid rgba(17, 17, 17, 0.32) !important;
    background: #ffffff !important;
    color: #111111 !important;
    font-size: 7px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    letter-spacing: 0.3px !important;
}

.nav-shop .nav-icon::before { content: "SH" !important; }
.nav-dashboard .nav-icon::before { content: "DB" !important; }
.nav-cart .nav-icon::before { content: "CT" !important; }
.nav-wishlist .nav-icon::before { content: "WL" !important; }
.nav-orders .nav-icon::before { content: "OR" !important; }
.nav-payment .nav-icon::before { content: "PY" !important; }
.nav-logout .nav-icon::before { content: "LO" !important; }

.nav-links a.nav-link:hover .nav-icon {
    background: #111111 !important;
    color: #ffffff !important;
    border-color: #111111 !important;
}

/* Dashboard hero action visibility */
.dashboard-hero .dashboard-outline-btn {
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.72) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: none !important;
}

.dashboard-hero .dashboard-outline-btn:hover {
    color: #111111 !important;
    background: #d8bd7c !important;
    border-color: #d8bd7c !important;
}

/* Latest Order Summary text readability */
.latest-order-box .latest-order-row strong,
.dashboard-panel .latest-order-row strong,
.latest-order-row strong {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-weight: 950 !important;
}

.latest-order-box .latest-order-row span,
.dashboard-panel .latest-order-row span,
.latest-order-row span {
    color: #4f4f4f !important;
    -webkit-text-fill-color: #4f4f4f !important;
}

.latest-order-actions .dashboard-outline-btn {
    color: #111111 !important;
    border: 1px solid #111111 !important;
    background: transparent !important;
}

.latest-order-actions .dashboard-outline-btn:hover {
    color: #ffffff !important;
    background: #111111 !important;
}

/* Customer inner pages: orders, payment, wishlist */
.customer-page-hero {
    width: min(89%, 1180px) !important;
    margin: 42px auto 28px !important;
    padding: 42px clamp(24px, 5vw, 58px) !important;
    min-height: 290px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 380px) !important;
    gap: 28px !important;
    align-items: center !important;
    text-align: left !important;
    background: #ffffff !important;
    border: 1px solid var(--k-line) !important;
    box-shadow: var(--k-shadow) !important;
    position: relative !important;
    overflow: hidden !important;
}

.customer-page-hero::after {
    content: "STYLE IMAGE PLACEHOLDER" !important;
    grid-column: 2 !important;
    grid-row: 1 / span 4 !important;
    min-height: 210px !important;
    height: 100% !important;
    border: 1px dashed rgba(139, 105, 20, 0.42) !important;
    background-image: linear-gradient(135deg, rgba(216,189,124,0.18), rgba(255,255,255,0.04)) !important;
    color: #9a762e !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    letter-spacing: 2.2px !important;
    text-align: center !important;
    display: grid !important;
    place-items: center !important;
    padding: 18px !important;
}

.orders-page-hero::after { content: "ORDERS IMAGE PLACEHOLDER" !important; }
.payment-page-hero::after { content: "PAYMENT IMAGE PLACEHOLDER" !important; }
.wishlist-page-hero::after { content: "WISHLIST IMAGE PLACEHOLDER" !important; }

.customer-page-hero .status,
.customer-page-hero .status-purple {
    color: var(--k-accent) !important;
    text-shadow: none !important;
    margin-bottom: 12px !important;
}

.customer-page-hero h1,
.customer-page-hero h2,
.customer-page-hero .outline-text {
    text-align: left !important;
}

.customer-page-hero h1 {
    font-size: clamp(48px, 7vw, 92px) !important;
}

.customer-page-hero h2,
.customer-page-hero .outline-text {
    font-size: clamp(38px, 5vw, 72px) !important;
    color: transparent !important;
    -webkit-text-stroke: 1.4px #111111 !important;
    filter: none !important;
    margin-top: 0 !important;
}

.customer-page-hero .tagline {
    color: #555555 !important;
    margin: 18px 0 0 !important;
}

/* Wishlist should look normal, not black background */
.wishlist-page-wrapper,
.wishlist-page-wrapper.normal-page-wrapper {
    min-height: 100vh !important;
    width: 100% !important;
    padding: 0 0 58px !important;
    background: var(--k-bg) !important;
    color: var(--k-ink) !important;
    align-items: stretch !important;
    text-align: initial !important;
}

.wishlist-page-wrapper .products {
    width: 89% !important;
    margin: 24px auto 60px !important;
}

.wishlist-page-wrapper .catalog-summary {
    width: 89% !important;
    margin: 18px auto !important;
}

.wishlist-page-wrapper .empty-message {
    color: #555555 !important;
    background: #ffffff !important;
    border: 1px dashed var(--k-line) !important;
}

.wishlist-page-wrapper .btn-gradient,
.wishlist-page-wrapper .btn-outline-dark {
    border-radius: 0 !important;
    box-shadow: none !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
}

.wishlist-page-wrapper .btn-gradient {
    background: #111111 !important;
    border: 1px solid #111111 !important;
    color: #ffffff !important;
}

.wishlist-page-wrapper .btn-outline-dark {
    background: transparent !important;
    color: #111111 !important;
    border: 1px solid #111111 !important;
}

.wishlist-page-wrapper .btn-gradient:hover,
.wishlist-page-wrapper .btn-outline-dark:hover {
    background: var(--k-accent) !important;
    border-color: var(--k-accent) !important;
    color: #111111 !important;
    transform: translateY(-2px) !important;
}

/* Product image placeholders without emojis */
.product-img:has(.product-img-placeholder) {
    background: #f7f7f5 !important;
    border: 1px dashed rgba(139, 105, 20, 0.36) !important;
}

.product-img-placeholder {
    width: 100% !important;
    height: 100% !important;
    min-height: 170px !important;
    display: grid !important;
    place-items: center !important;
    color: #9a762e !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    letter-spacing: 2px !important;
    text-align: center !important;
    background-image: linear-gradient(135deg, rgba(216,189,124,0.14), rgba(255,255,255,0.04)) !important;
}

/* Customer tables/actions polish */
.admin-panel .checkout-btn.small-btn,
.card-actions .checkout-btn.small-btn,
.card-actions .wishlist-remove {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    text-decoration: none !important;
}

.card-actions .wishlist-remove {
    border: 1px solid #b42318 !important;
    background: #ffffff !important;
    color: #b42318 !important;
    border-radius: 0 !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
}

.card-actions .wishlist-remove:hover {
    background: #b42318 !important;
    color: #ffffff !important;
}

@media (max-width: 900px) {
    .customer-page-hero {
        grid-template-columns: 1fr !important;
        text-align: left !important;
    }

    .customer-page-hero::after {
        grid-column: 1 !important;
        grid-row: auto !important;
        min-height: 190px !important;
    }
}

@media (max-width: 700px) {
    .nav-links a.nav-link {
        gap: 5px !important;
    }

    .nav-icon {
        width: 17px !important;
        height: 17px !important;
        min-width: 17px !important;
        font-size: 6px !important;
    }

    .customer-page-hero,
    .wishlist-page-wrapper .products,
    .wishlist-page-wrapper .catalog-summary {
        width: 92% !important;
    }
}

/* =========================================================
   Customer Cart / Orders / Payment Refresh - no emoji icons
   ========================================================= */
.krylo-customer-nav .nav-links a,
.krylo-customer-nav .nav-link {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    white-space: nowrap !important;
}

.krylo-customer-nav .nav-icon {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.krylo-customer-nav .nav-icon svg {
    width: 18px !important;
    height: 18px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.cx-body {
    background: #f6f2ea !important;
    color: #151515 !important;
}

.cx-body::before,
.cx-body::after {
    display: none !important;
}

.cx-page {
    width: min(1180px, 91%) !important;
    margin: 34px auto 72px !important;
}

.cx-kicker {
    margin: 0 0 9px !important;
    color: #9a7428 !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: 2.2px !important;
    text-transform: uppercase !important;
}

.cx-hero {
    min-height: 320px !important;
    margin-bottom: 28px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr) !important;
    gap: 28px !important;
    align-items: stretch !important;
    position: relative !important;
}

.cx-hero-copy {
    padding: clamp(30px, 5vw, 58px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.cx-hero-copy h1,
.cx-section-heading h2,
.cx-summary-card h2,
.cx-bank-card h2,
.cx-upload-card h2 {
    margin: 0 !important;
    color: #111111 !important;
    font-weight: 950 !important;
    letter-spacing: -1.5px !important;
    line-height: 1.02 !important;
}

.cx-hero-copy h1 {
    max-width: 640px !important;
    font-size: clamp(42px, 6vw, 78px) !important;
}

.cx-hero-copy p:not(.cx-kicker) {
    max-width: 560px !important;
    margin-top: 18px !important;
    color: #5f5a52 !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
}

.cx-hero-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-top: 28px !important;
}

.cx-btn {
    min-height: 46px !important;
    padding: 0 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    border: 1px solid #151515 !important;
    text-decoration: none !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease !important;
}

.cx-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 14px 24px rgba(0,0,0,0.12) !important;
}

.cx-btn-dark {
    background: #111111 !important;
    color: #ffffff !important;
}

.cx-btn-light {
    background: #ffffff !important;
    color: #111111 !important;
}

.cx-full-btn {
    width: 100% !important;
}

.cx-icon-wrap,
.cx-file-icon {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    border-radius: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #111111 !important;
    color: #ffffff !important;
}

.cx-icon-wrap svg,
.cx-file-icon svg {
    width: 25px !important;
    height: 25px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.8 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.cx-section-heading {
    margin-bottom: 18px !important;
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.cx-section-heading h2 {
    font-size: clamp(28px, 3vw, 42px) !important;
}

.cx-cart-hero {
    overflow: hidden !important;
    border-radius: 34px !important;
    background: linear-gradient(135deg, #fffaf0 0%, #efe3cf 55%, #d9bd7c 100%) !important;
    border: 1px solid rgba(154, 116, 40, 0.18) !important;
    box-shadow: 0 24px 60px rgba(65, 46, 13, 0.12) !important;
}

.cx-visual-frame {
    margin: 24px !important;
    min-height: 260px !important;
    border: 1px dashed rgba(17, 17, 17, 0.25) !important;
    border-radius: 28px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.62), rgba(255,255,255,0.18)),
        repeating-linear-gradient(45deg, rgba(17,17,17,0.035) 0 10px, transparent 10px 20px) !important;
    color: #151515 !important;
    text-align: center !important;
}

.cx-visual-label,
.cx-visual-subtitle {
    font-size: 10px !important;
    font-weight: 950 !important;
    letter-spacing: 2px !important;
    color: #77561a !important;
}

.cx-visual-title {
    margin: 12px 0 !important;
    font-size: clamp(46px, 7vw, 88px) !important;
    font-weight: 950 !important;
    letter-spacing: 8px !important;
    -webkit-text-stroke: 1.2px #151515 !important;
    color: transparent !important;
}

.cx-cart-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 340px !important;
    gap: 24px !important;
    align-items: start !important;
}

.cx-cart-list,
.cx-summary-card,
.cx-upload-card,
.cx-bank-card {
    border: 1px solid rgba(17,17,17,0.08) !important;
    background: #ffffff !important;
    box-shadow: 0 24px 55px rgba(36, 26, 5, 0.08) !important;
}

.cx-cart-list {
    padding: clamp(18px, 3vw, 30px) !important;
    border-radius: 30px !important;
}

.cx-cart-card {
    display: grid !important;
    grid-template-columns: 118px minmax(0, 1fr) auto !important;
    gap: 18px !important;
    align-items: center !important;
    padding: 16px !important;
    margin-top: 14px !important;
    border: 1px solid rgba(17,17,17,0.08) !important;
    border-radius: 24px !important;
    background: #fbfaf7 !important;
}

.cx-product-image {
    width: 118px !important;
    height: 128px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    border: 1px dashed rgba(154, 116, 40, 0.34) !important;
    background: #efe7d9 !important;
    display: grid !important;
    place-items: center !important;
}

.cx-product-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.cx-product-image span,
.cx-empty-visual,
.cx-order-placeholder,
.cx-payment-preview span {
    padding: 12px !important;
    color: #8b6914 !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    letter-spacing: 1.7px !important;
    text-align: center !important;
    text-transform: uppercase !important;
}

.cx-cart-info h3 {
    margin: 8px 0 10px !important;
    color: #111111 !important;
    font-size: 22px !important;
    font-weight: 950 !important;
}

.cx-pill,
.cx-status-pill {
    width: max-content !important;
    max-width: 100% !important;
    padding: 7px 12px !important;
    border-radius: 999px !important;
    background: #efe3cf !important;
    color: #7d5d19 !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    letter-spacing: 1.1px !important;
    text-transform: uppercase !important;
}

.cx-cart-meta {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.cx-cart-meta span {
    padding: 8px 10px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #555047 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

.cx-remove-link {
    color: #b42318 !important;
    border: 1px solid rgba(180,35,24,0.28) !important;
    border-radius: 999px !important;
    padding: 10px 14px !important;
    text-decoration: none !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}

.cx-remove-link:hover {
    background: #b42318 !important;
    color: #ffffff !important;
}

.cx-summary-card {
    position: sticky !important;
    top: 96px !important;
    padding: 26px !important;
    border-radius: 30px !important;
}

.cx-summary-card h2 {
    margin-bottom: 20px !important;
    font-size: 40px !important;
}

.cx-summary-line,
.cx-bank-line {
    padding: 14px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    border-top: 1px solid rgba(17,17,17,0.08) !important;
}

.cx-summary-line span,
.cx-bank-line span,
.cx-selected-order span,
.cx-order-details span {
    color: #736c61 !important;
    font-size: 12px !important;
    font-weight: 850 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.9px !important;
}

.cx-summary-line strong,
.cx-bank-line strong,
.cx-selected-order strong,
.cx-order-details strong {
    color: #111111 !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    text-align: right !important;
}

.cx-summary-note,
.cx-bank-note {
    margin: 16px 0 20px !important;
    padding: 14px !important;
    border-radius: 18px !important;
    background: #f6f2ea !important;
    color: #5f5a52 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}

.cx-empty-card {
    min-height: 300px !important;
    padding: 30px !important;
    border-radius: 26px !important;
    border: 1px dashed rgba(154,116,40,0.38) !important;
    background: #fbfaf7 !important;
    display: grid !important;
    place-items: center !important;
    text-align: center !important;
}

.cx-empty-card h3 {
    color: #111111 !important;
    font-size: 28px !important;
    margin: 16px 0 8px !important;
}

.cx-empty-card p {
    color: #5f5a52 !important;
    margin-bottom: 18px !important;
}

.cx-empty-visual {
    width: min(100%, 360px) !important;
    min-height: 140px !important;
    border-radius: 22px !important;
    border: 1px dashed rgba(154, 116, 40, 0.35) !important;
    background: #efe7d9 !important;
    display: grid !important;
    place-items: center !important;
}

.cx-orders-hero {
    grid-template-columns: minmax(0, 1fr) 360px !important;
    border-radius: 34px !important;
    overflow: hidden !important;
    background: #121212 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    box-shadow: 0 26px 60px rgba(0,0,0,0.22) !important;
}

.cx-orders-hero .cx-hero-copy h1,
.cx-orders-hero .cx-hero-copy p:not(.cx-kicker) {
    color: #ffffff !important;
}

.cx-orders-hero .cx-hero-copy p:not(.cx-kicker) {
    color: rgba(255,255,255,0.72) !important;
}

.cx-order-stats-panel {
    margin: 24px !important;
    padding: 18px !important;
    border-radius: 28px !important;
    background:
        linear-gradient(135deg, rgba(216,189,124,0.26), rgba(255,255,255,0.06)),
        repeating-linear-gradient(45deg, rgba(255,255,255,0.06) 0 9px, transparent 9px 18px) !important;
    display: grid !important;
    align-content: center !important;
    gap: 14px !important;
}

.cx-order-stats-panel div {
    padding: 18px !important;
    border-radius: 20px !important;
    background: rgba(255,255,255,0.92) !important;
}

.cx-order-stats-panel span {
    display: block !important;
    color: #111111 !important;
    font-size: 24px !important;
    font-weight: 950 !important;
}

.cx-order-stats-panel small {
    color: #7d5d19 !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}

.cx-order-board {
    padding: clamp(18px, 3vw, 30px) !important;
    border-radius: 34px !important;
    background: #151515 !important;
    box-shadow: 0 28px 65px rgba(0,0,0,0.20) !important;
}

.cx-light-heading h2 {
    color: #ffffff !important;
}

.cx-order-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)) !important;
    gap: 18px !important;
}

.cx-order-card {
    padding: 18px !important;
    border-radius: 26px !important;
    background: #ffffff !important;
    box-shadow: 0 18px 40px rgba(0,0,0,0.10) !important;
}

.cx-order-top {
    display: flex !important;
    align-items: start !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

.cx-order-top h3 {
    margin: 0 !important;
    color: #111111 !important;
    font-size: 34px !important;
    font-weight: 950 !important;
}

.cx-order-placeholder {
    min-height: 132px !important;
    margin: 18px 0 !important;
    border-radius: 22px !important;
    border: 1px dashed rgba(154,116,40,0.38) !important;
    background: linear-gradient(135deg, #f5ead7, #ffffff) !important;
    display: grid !important;
    place-items: center !important;
}

.cx-order-details {
    display: grid !important;
    gap: 10px !important;
}

.cx-order-details div {
    padding: 12px !important;
    border-radius: 16px !important;
    background: #f6f2ea !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 12px !important;
}

.cx-proof-under-tracking {
    margin-top: 8px !important;
    min-height: 54px !important;
    border-radius: 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 13px !important;
    letter-spacing: 0.8px !important;
    box-shadow: 0 14px 30px rgba(17,17,17,0.18) !important;
}

.cx-mini-timeline {
    margin: 18px 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
}

.cx-mini-timeline span {
    height: 6px !important;
    border-radius: 999px !important;
    background: #e4ded3 !important;
}

.cx-mini-timeline span.active {
    background: #d8bd7c !important;
}

.cx-status-submitted,
.cx-status-paid,
.cx-status-approved,
.cx-status-completed {
    background: #e5f4ec !important;
    color: #137547 !important;
}

.cx-status-rejected,
.cx-status-failed,
.cx-status-cancelled {
    background: #fbe7e5 !important;
    color: #b42318 !important;
}

.cx-payment-hero {
    border-radius: 34px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1px solid rgba(17,17,17,0.08) !important;
    box-shadow: 0 24px 55px rgba(36, 26, 5, 0.08) !important;
}

.cx-payment-hero .cx-hero-copy {
    background: linear-gradient(135deg, #ffffff 0%, #f6f2ea 100%) !important;
}

.cx-payment-preview {
    margin: 24px !important;
    border-radius: 30px !important;
    border: 1px dashed rgba(17,17,17,0.25) !important;
    background:
        linear-gradient(135deg, rgba(216,189,124,0.20), rgba(255,255,255,0.78)),
        repeating-linear-gradient(0deg, rgba(17,17,17,0.04) 0 1px, transparent 1px 14px) !important;
    display: grid !important;
    place-items: center !important;
    min-height: 260px !important;
}

.cx-payment-layout {
    display: grid !important;
    grid-template-columns: 360px minmax(0, 1fr) !important;
    gap: 24px !important;
    align-items: start !important;
}

.cx-bank-card,
.cx-upload-card {
    border-radius: 30px !important;
    padding: clamp(22px, 3vw, 32px) !important;
}

.cx-bank-card {
    position: sticky !important;
    top: 96px !important;
    color: #ffffff !important;
    background: linear-gradient(135deg, #111111 0%, #2d2414 100%) !important;
}

.cx-bank-card h2,
.cx-bank-card .cx-bank-line strong {
    color: #ffffff !important;
}

.cx-bank-card .cx-bank-line {
    border-color: rgba(255,255,255,0.14) !important;
}

.cx-bank-card .cx-bank-line span {
    color: rgba(255,255,255,0.66) !important;
}

.cx-bank-card .cx-bank-note {
    color: rgba(255,255,255,0.74) !important;
    background: rgba(255,255,255,0.08) !important;
}

.cx-selected-order {
    margin: 14px 0 18px !important;
    padding: 16px !important;
    border-radius: 20px !important;
    background: #f6f2ea !important;
    display: grid !important;
    gap: 6px !important;
}

.cx-selected-order strong {
    text-align: left !important;
    font-size: 18px !important;
}

.cx-selected-order small {
    color: #736c61 !important;
    font-weight: 800 !important;
}

.cx-message {
    margin: 0 0 16px !important;
    padding: 14px 16px !important;
    border-radius: 16px !important;
    font-size: 14px !important;
    font-weight: 850 !important;
}

.cx-message-success {
    background: #e5f4ec !important;
    color: #137547 !important;
}

.cx-message-error {
    background: #fbe7e5 !important;
    color: #b42318 !important;
}

.cx-payment-form {
    display: grid !important;
    gap: 13px !important;
}

.cx-payment-form label {
    color: #111111 !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: 1.1px !important;
    text-transform: uppercase !important;
}

.cx-payment-form select,
.cx-payment-form input[type="file"] {
    width: 100% !important;
    min-height: 50px !important;
    padding: 12px 14px !important;
    border: 1px solid rgba(17,17,17,0.16) !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    color: #111111 !important;
    font-size: 14px !important;
}

.cx-file-drop {
    padding: 18px !important;
    border-radius: 22px !important;
    border: 1px dashed rgba(154,116,40,0.38) !important;
    background: #fbfaf7 !important;
    display: grid !important;
    gap: 12px !important;
}

.cx-file-drop small {
    color: #736c61 !important;
    font-weight: 750 !important;
}

.cx-empty-orders {
    background: rgba(255,255,255,0.96) !important;
}

@media (max-width: 980px) {
    .cx-hero,
    .cx-orders-hero,
    .cx-cart-layout,
    .cx-payment-layout {
        grid-template-columns: 1fr !important;
    }

    .cx-summary-card,
    .cx-bank-card {
        position: relative !important;
        top: auto !important;
    }
}

@media (max-width: 680px) {
    .cx-page {
        width: 94% !important;
        margin-top: 22px !important;
    }

    .cx-hero-copy {
        padding: 26px !important;
    }

    .cx-hero-copy h1 {
        font-size: 38px !important;
    }

    .cx-cart-card {
        grid-template-columns: 1fr !important;
    }

    .cx-cart-check-select {
        min-height: auto !important;
        flex-direction: row !important;
        justify-content: flex-start !important;
    }

    .cx-product-image {
        width: 100% !important;
        height: 190px !important;
    }

    .cx-remove-link {
        text-align: center !important;
    }
}

/* =========================================================
   FINAL PATCH: customer cart/order/payment background + image/order fixes
   ========================================================= */
body.cx-cart-body,
body.cx-orders-body,
body.cx-payment-body {
    background: var(--k-bg) !important;
    color: var(--k-ink) !important;
}

body.cx-cart-body::before,
body.cx-cart-body::after,
body.cx-orders-body::before,
body.cx-orders-body::after,
body.cx-payment-body::before,
body.cx-payment-body::after {
    display: none !important;
}

.cx-cart-page,
.cx-orders-page,
.cx-payment-page {
    background: transparent !important;
}

.cx-cart-list,
.cx-summary-card,
.cx-bank-card,
.cx-upload-card,
.cx-order-board,
.cx-order-card,
.cx-empty-card,
.cx-selected-order {
    color: #111111 !important;
}

.cx-order-board {
    background: #ffffff !important;
    border: 1px solid var(--k-line) !important;
    box-shadow: var(--k-shadow) !important;
}

.cx-light-heading h2 {
    color: #111111 !important;
}

.cx-orders-hero {
    background: #ffffff !important;
    border: 1px solid var(--k-line) !important;
    box-shadow: var(--k-shadow) !important;
}

.cx-orders-hero .cx-hero-copy h1 {
    color: #111111 !important;
}

.cx-orders-hero .cx-hero-copy p:not(.cx-kicker) {
    color: #555555 !important;
}

/* Product images: always stay inside the box and show the full product */
.product-img,
.product-main-image,
.similar-image,
.cx-product-image,
.cx-order-product-tile,
.cx-selected-product-mini {
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.product-img img,
.product-main-image img,
.similar-image img,
.cx-product-image img,
.cx-order-product-tile img,
.cx-selected-product-mini img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    display: block !important;
    margin: 0 auto !important;
    border-radius: inherit !important;
    transform: none !important;
}

.product-img img {
    padding: 10px !important;
}

.product-main-image img {
    padding: 18px !important;
}

.similar-image img,
.cx-product-image img,
.cx-order-product-tile img,
.cx-selected-product-mini img {
    padding: 8px !important;
}

.card:hover .product-img img,
.card:hover .similar-image img {
    transform: none !important;
}

.product-img-placeholder,
.cx-product-image span,
.cx-order-product-tile span,
.cx-selected-product-mini span {
    width: 100% !important;
    height: 100% !important;
    min-height: 92px !important;
    display: grid !important;
    place-items: center !important;
    border: 1px dashed rgba(139, 105, 20, 0.36) !important;
    background: #f7f7f3 !important;
    color: #9a762e !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    letter-spacing: 1.4px !important;
    text-align: center !important;
}

/* Orders page: supports up to five products neatly in one order card */
.cx-order-products {
    margin: 18px 0 !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(82px, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch !important;
}

.cx-order-product-tile {
    min-width: 0 !important;
    min-height: 132px !important;
    padding: 8px !important;
    border-radius: 18px !important;
    border: 1px solid var(--k-line) !important;
    background: #fbfaf7 !important;
    display: grid !important;
    grid-template-rows: 78px auto !important;
    gap: 7px !important;
}

.cx-order-product-tile img,
.cx-order-product-tile span {
    width: 100% !important;
    height: 78px !important;
    border-radius: 14px !important;
    background: #f7f7f3 !important;
}

.cx-order-product-tile small {
    color: #4f4f4f !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    text-align: center !important;
    overflow: hidden !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
}

.cx-order-more,
.cx-selected-product-more {
    min-height: 132px !important;
    border-radius: 18px !important;
    border: 1px dashed rgba(139, 105, 20, 0.42) !important;
    background: #f7f7f3 !important;
    color: #7d5d19 !important;
    font-size: 22px !important;
    font-weight: 950 !important;
    display: grid !important;
    place-items: center !important;
}

/* Payment selected order product strip */
.cx-selected-order-products {
    margin-top: 10px !important;
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(64px, 82px)) !important;
    gap: 10px !important;
    align-items: center !important;
}

.cx-selected-product-mini,
.cx-selected-product-more {
    width: 76px !important;
    height: 76px !important;
    min-height: 76px !important;
    border-radius: 16px !important;
    border: 1px solid var(--k-line) !important;
    background: #fbfaf7 !important;
    display: grid !important;
    place-items: center !important;
}

.cx-selected-product-more {
    border-style: dashed !important;
    font-size: 18px !important;
}

.cx-selected-product-mini img,
.cx-selected-product-mini span {
    width: 100% !important;
    height: 100% !important;
    border-radius: 14px !important;
}

@media (max-width: 680px) {
    .cx-order-products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .cx-selected-order-products {
        grid-template-columns: repeat(4, 64px) !important;
    }
}

/* =========================================================
   FINAL HOME PRODUCT IMAGE FIX
   Keeps catalog product images visually consistent in size.
   This overrides the earlier global image rule that stretched
   some products to 100% of the image box.
   ========================================================= */
.products .card .product-img {
    height: 255px !important;
    min-height: 255px !important;
    padding: 22px !important;
    display: grid !important;
    place-items: center !important;
    background: #f7f7f3 !important;
    overflow: hidden !important;
}

.products .card .product-img img {
    width: auto !important;
    height: 210px !important;
    max-width: 88% !important;
    max-height: 210px !important;
    object-fit: contain !important;
    object-position: center center !important;
    padding: 0 !important;
    margin: 0 auto !important;
    display: block !important;
    transform: none !important;
}

.products .card:hover .product-img img {
    transform: none !important;
}

.products .card .product-img .product-placeholder,
.products .card .product-img span {
    width: 138px !important;
    height: 138px !important;
    min-height: 138px !important;
    border-radius: 50% !important;
    display: grid !important;
    place-items: center !important;
    background: #ffffff !important;
    border: 1px solid var(--k-line) !important;
    color: #111111 !important;
    font-size: 14px !important;
    letter-spacing: 0 !important;
}

@media (max-width: 900px) {
    .products .card .product-img {
        height: 230px !important;
        min-height: 230px !important;
    }

    .products .card .product-img img {
        height: 185px !important;
        max-height: 185px !important;
    }
}

/* =========================================================
   PATCH: product details main image render fix
   Makes the product details image use a real visible frame and
   prevents the background layer from covering the product picture.
   ========================================================= */
.product-visual-card {
    isolation: isolate !important;
}

.product-visual-card::before {
    z-index: 0 !important;
    pointer-events: none !important;
}

.product-detail-badge,
.product-main-image,
.product-code {
    position: relative !important;
    z-index: 2 !important;
}

.product-detail-badge {
    position: absolute !important;
}

.product-code {
    position: absolute !important;
}

.product-main-image {
    width: min(86%, 430px) !important;
    height: 430px !important;
    display: grid !important;
    place-items: center !important;
    background: #f7f7f3 !important;
    border: 1px solid var(--k-line) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.65) !important;
    overflow: hidden !important;
}

.product-main-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    padding: 26px !important;
    display: block !important;
}

.similar-image {
    height: 170px !important;
    display: grid !important;
    place-items: center !important;
    background: #f7f7f3 !important;
}

.similar-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 12px !important;
}

@media (max-width: 700px) {
    .product-main-image {
        width: 92% !important;
        height: 320px !important;
    }

    .product-main-image img {
        padding: 18px !important;
    }
}

/* =========================================================
   FINAL IMAGE QUALITY + FULL IMAGE VISIBILITY FIX
   12 May 2026
   - Stops low-resolution product photos from being stretched too big
   - Shows full similar-product/catalog images without half-cropping
   ========================================================= */
.product-main-image {
    width: min(82%, 360px) !important;
    height: 360px !important;
    padding: 22px !important;
    display: grid !important;
    place-items: center !important;
    background: #f7f7f3 !important;
    border: 1px solid var(--k-line) !important;
    overflow: hidden !important;
}

.product-main-image img {
    width: auto !important;
    height: auto !important;
    max-width: 280px !important;
    max-height: 300px !important;
    object-fit: contain !important;
    object-position: center center !important;
    padding: 0 !important;
    display: block !important;
    margin: auto !important;
    image-rendering: auto !important;
}

.similar-card .similar-image {
    width: 100% !important;
    height: 190px !important;
    min-height: 190px !important;
    padding: 16px !important;
    display: grid !important;
    place-items: center !important;
    background: #f7f7f3 !important;
    border: 1px solid var(--k-line) !important;
    overflow: hidden !important;
}

.similar-card .similar-image img {
    width: auto !important;
    height: auto !important;
    max-width: 92% !important;
    max-height: 155px !important;
    object-fit: contain !important;
    object-position: center center !important;
    padding: 0 !important;
    display: block !important;
    margin: auto !important;
    transform: none !important;
}

.products .card .product-img {
    height: 245px !important;
    min-height: 245px !important;
    padding: 20px !important;
    display: grid !important;
    place-items: center !important;
    background: #f7f7f3 !important;
    border: 1px solid var(--k-line) !important;
    overflow: hidden !important;
}

.products .card .product-img img {
    width: auto !important;
    height: auto !important;
    max-width: 86% !important;
    max-height: 190px !important;
    object-fit: contain !important;
    object-position: center center !important;
    padding: 0 !important;
    display: block !important;
    margin: auto !important;
    transform: none !important;
}

.products .card:hover .product-img img,
.similar-card:hover .similar-image img,
.card:hover .similar-image img {
    transform: none !important;
}

@media (max-width: 900px) {
    .product-main-image {
        width: min(90%, 330px) !important;
        height: 330px !important;
    }

    .product-main-image img {
        max-width: 250px !important;
        max-height: 270px !important;
    }

    .products .card .product-img {
        height: 225px !important;
        min-height: 225px !important;
    }

    .products .card .product-img img {
        max-height: 170px !important;
    }
}

@media (max-width: 700px) {
    .product-main-image {
        width: 92% !important;
        height: 300px !important;
    }

    .product-main-image img {
        max-width: 230px !important;
        max-height: 245px !important;
    }

    .similar-card .similar-image {
        height: 175px !important;
        min-height: 175px !important;
    }

    .similar-card .similar-image img {
        max-height: 140px !important;
    }
}


/* ===== Krylo Enhancements: Password Toggle, Validation and Product Compare ===== */
.password-field {
    position: relative !important;
    width: 100% !important;
    margin: 10px 0 !important;
}

.auth-box .password-field input {
    margin: 0 !important;
    padding-right: 52px !important;
}

.toggle-password {
    position: absolute !important;
    top: 50% !important;
    right: 12px !important;
    transform: translateY(-50%) !important;
    width: 34px !important;
    height: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50% !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    background: rgba(255,255,255,0.08) !important;
    color: #ffffff !important;
    cursor: pointer !important;
    display: grid !important;
    place-items: center !important;
    font-size: 14px !important;
}

.password-rules {
    display: grid !important;
    gap: 5px !important;
    margin: 4px 0 10px !important;
    text-align: left !important;
    color: rgba(255,255,255,0.72) !important;
    font-size: 12px !important;
}

.password-rules span.valid {
    color: #22c55e !important;
}

.compare-catalog-form {
    width: 100% !important;
}

.compare-toolbar {
    width: 84% !important;
    margin: 0 auto 20px !important;
    padding: 18px 22px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 16px !important;
    background: #ffffff !important;
    border: 1px solid var(--k-line) !important;
    box-shadow: var(--k-shadow) !important;
}

.compare-toolbar strong {
    display: block !important;
    color: #111111 !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.compare-toolbar span {
    display: block !important;
    color: #666666 !important;
    margin-top: 4px !important;
    font-size: 13px !important;
}

.compare-toolbar-actions {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.compare-clear-btn {
    min-height: 42px !important;
    padding: 0 18px !important;
    border: 1px solid #111111 !important;
    background: #ffffff !important;
    color: #111111 !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
}

.compare-select {
    position: absolute !important;
    left: 14px !important;
    top: 14px !important;
    z-index: 4 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 8px 10px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.95) !important;
    color: #111111 !important;
    border: 1px solid var(--k-line) !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    cursor: pointer !important;
}

.compare-select input {
    accent-color: #111111 !important;
    cursor: pointer !important;
}

.compare-select:has(input:checked) {
    background: #111111 !important;
    color: #ffffff !important;
}

.compare-hero {
    width: 84% !important;
    margin: 45px auto 22px !important;
    padding: 38px !important;
    background: #111111 !important;
    color: #ffffff !important;
    box-shadow: var(--k-shadow) !important;
}

.compare-hero h1 {
    font-size: clamp(34px, 5vw, 74px) !important;
    line-height: 0.95 !important;
    margin: 8px 0 !important;
    text-transform: uppercase !important;
    letter-spacing: -2px !important;
}

.compare-page-wrap {
    width: 84% !important;
    margin: 0 auto 60px !important;
}

.compare-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px !important;
}

.compare-card,
.compare-empty-card {
    background: #ffffff !important;
    border: 1px solid var(--k-line) !important;
    box-shadow: var(--k-shadow) !important;
    padding: 22px !important;
}

.compare-image-box {
    min-height: 300px !important;
    background: #f6f1e8 !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    margin-bottom: 16px !important;
}

.compare-image-box img {
    width: 100% !important;
    height: 300px !important;
    object-fit: contain !important;
    display: block !important;
}

.compare-image-box span {
    font-weight: 950 !important;
    letter-spacing: 4px !important;
    color: #9a762e !important;
}

.compare-badge {
    display: inline-block !important;
    padding: 6px 10px !important;
    background: #f2e4c7 !important;
    color: #7a5315 !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.compare-card h2 {
    color: #111111 !important;
    margin: 12px 0 6px !important;
    font-size: 28px !important;
    line-height: 1.05 !important;
}

.compare-price {
    display: block !important;
    color: #111111 !important;
    margin-bottom: 16px !important;
    font-size: 24px !important;
}

.compare-table {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-top: 14px !important;
}

.compare-table th,
.compare-table td {
    border-top: 1px solid var(--k-line) !important;
    padding: 12px 10px !important;
    color: #222222 !important;
    vertical-align: top !important;
    text-align: left !important;
}

.compare-table th {
    width: 34% !important;
    color: #777777 !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.9px !important;
}

.compare-actions,
.compare-footer-actions {
    display: flex !important;
    gap: 10px !important;
    margin-top: 18px !important;
    flex-wrap: wrap !important;
}

.compare-actions .dashboard-main-btn,
.compare-actions .dashboard-outline-btn,
.compare-footer-actions .dashboard-outline-btn {
    flex: 1 1 160px !important;
    text-align: center !important;
}

.compare-empty-card {
    text-align: center !important;
    padding: 48px !important;
}

.compare-empty-card h2,
.compare-empty-card p {
    color: #111111 !important;
}

button:disabled,
.checkout-btn:disabled {
    opacity: 0.48 !important;
    cursor: not-allowed !important;
}

@media (max-width: 900px) {
    .compare-toolbar,
    .compare-hero,
    .compare-page-wrap {
        width: 92% !important;
    }

    .compare-toolbar,
    .compare-toolbar-actions {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .compare-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   FINAL COMPARE UI POLISH
   Cleaner product-card compare pill + premium compare bar.
   ========================================================= */
.section-heading + .compare-catalog-form {
    margin-top: 34px !important;
}

.compare-catalog-form {
    width: 100% !important;
}

.compare-toolbar {
    width: 89% !important;
    margin: 0 auto 34px !important;
    padding: 22px 26px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 22px !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 24px !important;
    background: linear-gradient(135deg, #111111 0%, #252014 58%, #c5a15a 145%) !important;
    border: 1px solid rgba(197,161,90,0.55) !important;
    box-shadow: 0 18px 42px rgba(0,0,0,0.14) !important;
}

.compare-toolbar::before {
    content: "" !important;
    position: absolute !important;
    inset: -80px -120px auto auto !important;
    width: 260px !important;
    height: 260px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(255,255,255,0.24), transparent 64%) !important;
    pointer-events: none !important;
}

.compare-toolbar::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 7px !important;
    background: linear-gradient(180deg, #d9bd75, #8a6723) !important;
}

.compare-toolbar > * {
    position: relative !important;
    z-index: 1 !important;
}

.compare-toolbar strong {
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
    letter-spacing: 2.2px !important;
}

.compare-toolbar span {
    color: rgba(255,255,255,0.78) !important;
    margin-top: 7px !important;
    font-size: 13px !important;
    letter-spacing: 0.2px !important;
}

.compare-toolbar-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-shrink: 0 !important;
}

.compare-clear-btn,
.compare-toolbar-actions .checkout-btn.small-btn {
    width: auto !important;
    min-height: 44px !important;
    border-radius: 999px !important;
    padding: 0 22px !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.compare-clear-btn {
    border: 1px solid rgba(255,255,255,0.45) !important;
    background: rgba(255,255,255,0.08) !important;
    color: #ffffff !important;
    backdrop-filter: blur(12px) !important;
}

.compare-clear-btn:hover {
    background: rgba(255,255,255,0.18) !important;
    transform: translateY(-1px) !important;
}

.compare-toolbar-actions .checkout-btn.small-btn {
    min-width: 158px !important;
    border: 1px solid rgba(255,255,255,0.35) !important;
    background: linear-gradient(135deg, #d8bc73, #9b762c) !important;
    color: #111111 !important;
    box-shadow: 0 12px 25px rgba(0,0,0,0.22) !important;
}

.compare-toolbar-actions .checkout-btn.small-btn:disabled {
    background: rgba(255,255,255,0.18) !important;
    color: rgba(255,255,255,0.70) !important;
    border-color: rgba(255,255,255,0.28) !important;
    box-shadow: none !important;
    opacity: 1 !important;
}

.compare-select {
    position: absolute !important;
    top: 16px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 6 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 34px !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.88) !important;
    color: #111111 !important;
    border: 1px solid rgba(0,0,0,0.12) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,0.13) !important;
    backdrop-filter: blur(12px) !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.1px !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.compare-select:hover {
    transform: translateX(-50%) translateY(-2px) !important;
    background: #fffaf0 !important;
    border-color: rgba(181,139,54,0.55) !important;
    box-shadow: 0 16px 34px rgba(0,0,0,0.18) !important;
}

.compare-select input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.compare-select span {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    line-height: 1 !important;
}

.compare-select span::before {
    content: "" !important;
    width: 13px !important;
    height: 13px !important;
    display: inline-grid !important;
    place-items: center !important;
    border-radius: 4px !important;
    border: 1.7px solid #b58b36 !important;
    background: #ffffff !important;
    color: #111111 !important;
    font-size: 10px !important;
    font-weight: 950 !important;
}

.compare-select:has(input:checked) {
    background: #111111 !important;
    color: #ffffff !important;
    border-color: #111111 !important;
    box-shadow: 0 16px 34px rgba(0,0,0,0.24) !important;
}

.compare-select:has(input:checked) span::before {
    content: "✓" !important;
    background: linear-gradient(135deg, #d8bc73, #a57c2d) !important;
    border-color: #d8bc73 !important;
}

.compare-select:focus-within {
    outline: 3px solid rgba(216,188,115,0.38) !important;
    outline-offset: 3px !important;
}

@media (max-width: 900px) {
    .section-heading + .compare-catalog-form {
        margin-top: 24px !important;
    }

    .compare-toolbar {
        width: 92% !important;
        padding: 20px !important;
        margin-bottom: 26px !important;
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .compare-toolbar-actions {
        width: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .compare-clear-btn,
    .compare-toolbar-actions .checkout-btn.small-btn {
        width: 100% !important;
    }

    .compare-select {
        top: 14px !important;
        min-height: 32px !important;
        font-size: 9px !important;
    }
}

/* =========================================================
   FIX 2026-05-14: card compare button at bottom + admin sales card
   ========================================================= */
.products .card .card-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    align-items: stretch !important;
}

.products .card .card-actions .checkout-btn.small-btn,
.products .card .card-actions .disabled-btn {
    width: 100% !important;
    margin: 0 !important;
}

.products .card .card-actions .compare-select.compare-action-btn {
    grid-column: 1 / -1 !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    min-height: 42px !important;
    padding: 0 16px !important;
    border-radius: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #ffffff !important;
    color: #111111 !important;
    border: 1px solid #111111 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    cursor: pointer !important;
}

.products .card .card-actions .compare-select.compare-action-btn:hover {
    transform: translateY(-2px) !important;
    background: #111111 !important;
    color: #ffffff !important;
    border-color: #111111 !important;
    box-shadow: none !important;
}

.products .card .card-actions .compare-select.compare-action-btn input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.products .card .card-actions .compare-select.compare-action-btn span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.products .card .card-actions .compare-select.compare-action-btn span::before {
    content: "" !important;
    width: 14px !important;
    height: 14px !important;
    display: inline-grid !important;
    place-items: center !important;
    border: 1.7px solid #b3913f !important;
    background: #ffffff !important;
    color: #111111 !important;
    font-size: 10px !important;
    font-weight: 950 !important;
}

.products .card .card-actions .compare-select.compare-action-btn:has(input:checked) {
    background: #111111 !important;
    color: #ffffff !important;
    border-color: #111111 !important;
}

.products .card .card-actions .compare-select.compare-action-btn:has(input:checked) span::before {
    content: "✓" !important;
    background: #b3913f !important;
    border-color: #b3913f !important;
    color: #ffffff !important;
}

.admin-dashboard-cards {
    width: 89% !important;
    grid-template-columns: repeat(5, minmax(170px, 1fr)) !important;
    gap: 20px !important;
}

.admin-dashboard-cards .card {
    min-height: 210px !important;
}

.admin-dashboard-cards .sales-total {
    font-size: clamp(24px, 2.3vw, 34px) !important;
    line-height: 1.15 !important;
    letter-spacing: -1px !important;
}

@media (max-width: 1200px) {
    .admin-dashboard-cards {
        grid-template-columns: repeat(3, minmax(180px, 1fr)) !important;
    }
}

@media (max-width: 700px) {
    .products .card .card-actions,
    .admin-dashboard-cards {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   FIX 2026-05-14 V2: Final index subcategory + compare button polish
   Compare is kept at the bottom of the product card, not over the image.
   ========================================================= */
.products .card {
    display: flex !important;
    flex-direction: column !important;
}

.products .card .card-actions {
    margin-top: 16px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.products .card .card-actions .compare-select.compare-action-btn {
    grid-column: 1 / -1 !important;
    position: static !important;
    transform: none !important;
    margin-top: 2px !important;
    min-height: 46px !important;
    width: 100% !important;
    border-radius: 8px !important;
    border: 1px solid #b3913f !important;
    background: linear-gradient(135deg, #fffaf0, #f1dfb4) !important;
    color: #111111 !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.45) !important;
    letter-spacing: 1.3px !important;
}

.products .card .card-actions .compare-select.compare-action-btn:hover {
    transform: translateY(-2px) !important;
    background: #111111 !important;
    border-color: #111111 !important;
    color: #ffffff !important;
}

.products .card .card-actions .compare-select.compare-action-btn:has(input:checked) {
    background: #111111 !important;
    border-color: #111111 !important;
    color: #ffffff !important;
}

.products .card .card-actions .compare-select.compare-action-btn span::before {
    border-radius: 4px !important;
}

@media (max-width: 700px) {
    .products .card .card-actions {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   CUSTOMER DASHBOARD FIX
   - removes large hero image placeholder
   - changes stat/quick-action text badges into real image boxes
   - icon image files are in: assets/images/dashboard-icons/
========================================================= */

/* 1) Remove the big IMAGE PLACEHOLDER box from dashboard banner */
.dashboard-hero::after {
    display: none !important;
    content: none !important;
}

.dashboard-hero-content {
    width: min(100%, 760px) !important;
    max-width: 760px !important;
}

/* 2) Hide old CSS text badges: BAG, ORD, PEN, PAY, RM and SHOP, CART, HIST, PAY */
.stat-card::before,
.quick-link-box::before {
    display: none !important;
    content: none !important;
}

/* Shared image box */
.dashboard-icon {
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    flex: 0 0 auto !important;
}

.dashboard-icon img {
    width: 58% !important;
    height: 58% !important;
    object-fit: contain !important;
    display: block !important;
}

/* Stats icon box */
.stat-icon {
    position: absolute !important;
    left: 22px !important;
    top: 22px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, #d8bd7c, #8f6e2f) !important;
    box-shadow: 0 14px 28px rgba(216, 189, 124, 0.18) !important;
    z-index: 2 !important;
}

/* Quick action icon box */
.quick-icon {
    position: absolute !important;
    left: 20px !important;
    top: 22px !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    background: rgba(216, 189, 124, 0.14) !important;
    border: 1px solid rgba(216, 189, 124, 0.32) !important;
    z-index: 2 !important;
}

/* Keep text aligned beside real icon */
.quick-link-box {
    padding-left: 82px !important;
}

/* Mobile adjustment */
@media (max-width: 768px) {
    .dashboard-hero-content {
        width: 100% !important;
    }

    .dashboard-stats {
        grid-template-columns: 1fr !important;
    }
}
/* Remove STYLE IMAGE PLACEHOLDER text but keep the image banner */
.dashboard-grid .dashboard-panel:nth-child(2)::before,
.wide-panel::before {
    content: "" !important;
    color: transparent !important;
    font-size: 0 !important;
    letter-spacing: 0 !important;
}
/* =========================================================
   CART PAGE IMAGE PATCH: real images instead of text placeholders
   ========================================================= */
.cx-cart-visual {
    padding: 0 !important;
    overflow: hidden !important;
    position: relative !important;
    border: 1px dashed rgba(154, 116, 40, 0.38) !important;
    background: #efe7d9 !important;
}

.cx-cart-visual-img {
    width: 100% !important;
    height: 100% !important;
    min-height: 260px !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
}

.cx-empty-visual {
    padding: 0 !important;
    overflow: hidden !important;
    background: #efe7d9 !important;
}

.cx-empty-visual img {
    width: 100% !important;
    height: 100% !important;
    min-height: 140px !important;
    display: block !important;
    object-fit: contain !important;
    object-position: center center !important;
    padding: 10px !important;
    box-sizing: border-box !important;
}


/* =========================================================
   WISHLIST + PAYMENT PLACEHOLDER IMAGE FIX
   - adds real image links instead of text placeholders
   - improves empty wishlist view
   ========================================================= */
.wishlist-page-hero::after,
.cx-payment-preview span {
    display: none !important;
    content: none !important;
}

.wishlist-page-hero {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 420px) !important;
}

.wishlist-hero-visual {
    grid-column: 2 !important;
    grid-row: 1 / span 5 !important;
    min-height: 240px !important;
    height: 100% !important;
    border-radius: 30px !important;
    overflow: hidden !important;
    border: 1px solid rgba(139, 105, 20, 0.24) !important;
    background: #111111 !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05) !important;
}

.wishlist-hero-visual img,
.wishlist-empty-visual img,
.cx-payment-preview-img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.wishlist-hero-visual img,
.cx-payment-preview-img {
    object-fit: cover !important;
    object-position: center center !important;
}

.wishlist-empty-card {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    padding: clamp(18px, 3vw, 30px) !important;
    display: grid !important;
    grid-template-columns: minmax(260px, 0.88fr) minmax(0, 1.12fr) !important;
    gap: clamp(18px, 3vw, 34px) !important;
    align-items: center !important;
    border-radius: 34px !important;
    border: 1px solid var(--k-line) !important;
    background: #ffffff !important;
    box-shadow: var(--k-shadow) !important;
}

.wishlist-empty-visual {
    min-height: 260px !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    background: #f7f7f3 !important;
    border: 1px solid rgba(139, 105, 20, 0.16) !important;
}

.wishlist-empty-visual img {
    object-fit: cover !important;
    object-position: center center !important;
}

.wishlist-empty-content h3 {
    margin: 0 0 14px !important;
    color: #111111 !important;
    font-size: clamp(34px, 4vw, 58px) !important;
    font-weight: 950 !important;
    letter-spacing: -1.4px !important;
    line-height: 1.02 !important;
}

.wishlist-empty-content p:not(.cx-kicker) {
    max-width: 570px !important;
    color: #5f5a52 !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
}

.wishlist-empty-actions {
    margin-top: 22px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

.wishlist-style-tips {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
}

.wishlist-tip-card {
    min-height: 152px !important;
    padding: 22px !important;
    border-radius: 26px !important;
    border: 1px solid var(--k-line) !important;
    background: linear-gradient(135deg, #ffffff, #fbf7ee) !important;
    box-shadow: 0 16px 32px rgba(36, 26, 5, 0.06) !important;
}

.wishlist-tip-card span {
    display: inline-grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    margin-bottom: 16px !important;
    border-radius: 14px !important;
    background: #111111 !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: 1px !important;
}

.wishlist-tip-card strong {
    display: block !important;
    color: #111111 !important;
    font-size: 17px !important;
    font-weight: 950 !important;
    margin-bottom: 7px !important;
}

.wishlist-tip-card p {
    margin: 0 !important;
    color: #5f5a52 !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
}

.cx-payment-preview {
    padding: 0 !important;
    overflow: hidden !important;
    border-style: solid !important;
    background: #f6f2ea !important;
}

.cx-payment-preview-img {
    min-height: 260px !important;
}

@media (max-width: 900px) {
    .wishlist-page-hero {
        grid-template-columns: 1fr !important;
    }

    .wishlist-hero-visual {
        grid-column: 1 !important;
        grid-row: auto !important;
        min-height: 220px !important;
    }

    .wishlist-empty-card {
        grid-template-columns: 1fr !important;
    }

    .wishlist-style-tips {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   CHECKOUT + PAYMENT ORDER + SUCCESS PAGE POLISH
   ========================================================= */
.cx-checkout-body,
.cx-order-success-body {
    background: #f6f2ea !important;
}

.cx-checkout-hero,
.cx-success-hero {
    overflow: hidden !important;
    border-radius: 38px !important;
    border: 1px solid rgba(139, 105, 20, 0.16) !important;
    background:
        radial-gradient(circle at 16% 20%, rgba(216, 189, 124, 0.32), transparent 28%),
        linear-gradient(135deg, #ffffff 0%, #f6f1e8 56%, #151515 56%, #151515 100%) !important;
    box-shadow: 0 28px 70px rgba(36, 26, 5, 0.12) !important;
}

.cx-success-hero {
    background:
        radial-gradient(circle at 14% 24%, rgba(216, 189, 124, 0.30), transparent 30%),
        linear-gradient(135deg, #ffffff 0%, #fbf7ef 58%, #111111 58%, #111111 100%) !important;
}

.cx-checkout-hero .cx-hero-copy,
.cx-success-hero .cx-hero-copy {
    z-index: 1 !important;
}

.cx-checkout-visual,
.cx-success-visual {
    min-height: 330px !important;
    height: 100% !important;
    margin: 24px !important;
    border-radius: 30px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    box-shadow: 0 24px 50px rgba(0,0,0,0.18) !important;
    background: #f6f2ea !important;
}

.cx-checkout-visual img,
.cx-success-visual img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
}

.cx-checkout-hero-meta,
.cx-success-actions {
    margin-top: 26px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

.cx-checkout-hero-meta span {
    padding: 10px 14px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(139, 105, 20, 0.18) !important;
    background: #ffffff !important;
    color: #7d5d19 !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}

.cx-checkout-layout,
.cx-success-layout {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 360px !important;
    gap: 24px !important;
    align-items: start !important;
}

.cx-success-layout {
    grid-template-columns: 380px minmax(0, 1fr) !important;
}

.cx-checkout-main-card,
.cx-checkout-side-card,
.cx-success-card {
    padding: clamp(20px, 3vw, 32px) !important;
    border-radius: 34px !important;
    border: 1px solid rgba(17,17,17,0.08) !important;
    background: #ffffff !important;
    box-shadow: 0 24px 55px rgba(36, 26, 5, 0.08) !important;
}

.cx-checkout-side-card {
    position: sticky !important;
    top: 96px !important;
}

.cx-checkout-side-card h2,
.cx-success-card h2 {
    margin: 0 0 20px !important;
    color: #111111 !important;
    font-size: clamp(28px, 3vw, 42px) !important;
    font-weight: 950 !important;
    letter-spacing: -1px !important;
    line-height: 1.05 !important;
}

.cx-checkout-table-wrap {
    width: 100% !important;
    overflow-x: auto !important;
}

.cx-checkout-table {
    margin-top: 20px !important;
}

.cx-checkout-table th {
    background: #f6f2ea !important;
}

.cx-checkout-table td,
.cx-checkout-table th {
    vertical-align: middle !important;
}

.cx-checkout-product-cell {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    min-width: 230px !important;
}

.cx-checkout-product-img {
    width: 72px !important;
    height: 82px !important;
    min-width: 72px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    border: 1px solid rgba(139, 105, 20, 0.15) !important;
    background: #f7f3eb !important;
    display: grid !important;
    place-items: center !important;
}

.cx-checkout-product-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}

.cx-checkout-product-cell strong {
    display: block !important;
    color: #111111 !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    line-height: 1.25 !important;
}

.cx-checkout-product-cell small,
.cx-soft-note {
    display: block !important;
    color: #6c665d !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.5 !important;
}

.cx-checkout-total-box {
    margin: 22px 0 !important;
    padding: 20px !important;
    border-radius: 24px !important;
    background: linear-gradient(135deg, #111111, #2b2418) !important;
    color: #ffffff !important;
}

.cx-checkout-total-box span,
.cx-checkout-total-box small {
    display: block !important;
    color: rgba(255,255,255,0.70) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}

.cx-checkout-total-box strong {
    display: block !important;
    margin: 8px 0 !important;
    color: #ffffff !important;
    font-size: 34px !important;
    font-weight: 950 !important;
    letter-spacing: -0.5px !important;
}

.cx-selected-order-head {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 16px !important;
}

.cx-selected-order-link {
    white-space: nowrap !important;
    color: #7d5d19 !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
}

.cx-selected-order-products {
    grid-template-columns: repeat(auto-fit, minmax(94px, 1fr)) !important;
    gap: 12px !important;
}

.cx-selected-product-mini {
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 8px !important;
    grid-template-rows: 84px auto !important;
    gap: 7px !important;
    align-content: start !important;
}

.cx-selected-product-mini img,
.cx-selected-product-mini .cx-image-empty {
    width: 100% !important;
    height: 84px !important;
    object-fit: cover !important;
    object-position: center center !important;
}

.cx-selected-product-mini small {
    color: #4f4a43 !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    line-height: 1.25 !important;
    text-align: center !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

.cx-image-empty {
    display: block !important;
    border-radius: 14px !important;
    background:
        radial-gradient(circle at 50% 42%, rgba(216,189,124,0.30), transparent 34%),
        linear-gradient(135deg, #f8f4ed, #e7dcc8) !important;
}

.cx-success-items-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)) !important;
    gap: 14px !important;
}

.cx-success-item {
    padding: 12px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(139, 105, 20, 0.14) !important;
    background: #fbfaf7 !important;
}

.cx-success-item img,
.cx-success-item .cx-image-empty {
    width: 100% !important;
    height: 150px !important;
    margin-bottom: 12px !important;
    border-radius: 18px !important;
    object-fit: cover !important;
    object-position: center center !important;
}

.cx-success-item strong,
.cx-success-item small {
    display: block !important;
}

.cx-success-item strong {
    color: #111111 !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    line-height: 1.25 !important;
}

.cx-success-item small {
    margin-top: 5px !important;
    color: #6c665d !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

@media (max-width: 900px) {
    .cx-checkout-hero,
    .cx-success-hero,
    .cx-checkout-layout,
    .cx-success-layout {
        grid-template-columns: 1fr !important;
    }

    .cx-checkout-side-card {
        position: static !important;
    }

    .cx-checkout-visual,
    .cx-success-visual {
        min-height: 240px !important;
    }
}


/* =========================================================
   FINAL PATCH: checkout/success no-image hero + product image contain fixes
   ========================================================= */
.cx-checkout-visual.cx-fashion-placeholder,
.cx-success-visual.cx-fashion-placeholder {
    position: relative !important;
    min-height: 330px !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 18% 18%, rgba(255,255,255,0.92), transparent 28%),
        radial-gradient(circle at 78% 82%, rgba(191,146,48,0.20), transparent 30%),
        linear-gradient(135deg, #fbf7ef 0%, #efe2cf 52%, #141414 52%, #141414 100%) !important;
}

.cx-fashion-placeholder span {
    position: absolute !important;
    display: block !important;
    box-sizing: border-box !important;
}

.cx-fashion-bag {
    width: 34% !important;
    height: 48% !important;
    right: 10% !important;
    top: 17% !important;
    border-radius: 22px 22px 14px 14px !important;
    background: linear-gradient(145deg, #d8c1a2, #f4e7d4) !important;
    box-shadow: 0 28px 55px rgba(23, 17, 8, 0.20) !important;
}

.cx-fashion-bag::before {
    content: "" !important;
    position: absolute !important;
    width: 44% !important;
    height: 34% !important;
    left: 28% !important;
    top: -18% !important;
    border: 7px solid #9a7444 !important;
    border-bottom: 0 !important;
    border-radius: 999px 999px 0 0 !important;
}

.cx-fashion-card {
    width: 34% !important;
    height: 22% !important;
    left: 14% !important;
    bottom: 20% !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #c49a42, #f6d989) !important;
    box-shadow: 0 20px 45px rgba(23, 17, 8, 0.22) !important;
    transform: rotate(-4deg) !important;
}

.cx-fashion-card::before {
    content: "" !important;
    position: absolute !important;
    width: 22% !important;
    height: 30% !important;
    left: 12% !important;
    top: 34% !important;
    border-radius: 7px !important;
    border: 2px solid rgba(68,47,14,0.28) !important;
}

.cx-fashion-fold {
    width: 30% !important;
    height: 13% !important;
    right: 21% !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, #fff8ec, #d2b99a) !important;
    box-shadow: 0 16px 32px rgba(23, 17, 8, 0.14) !important;
}

.cx-fashion-fold-one {
    bottom: 23% !important;
}

.cx-fashion-fold-two {
    bottom: 12% !important;
    background: linear-gradient(135deg, #b2906d, #5c4534) !important;
}

.cx-fashion-check {
    width: 96px !important;
    height: 96px !important;
    left: 43% !important;
    bottom: 15% !important;
    border: 5px solid #c69b42 !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.18) !important;
    box-shadow: 0 18px 36px rgba(23,17,8,0.20) !important;
}

.cx-fashion-check::before {
    content: "" !important;
    position: absolute !important;
    width: 48% !important;
    height: 26% !important;
    left: 23% !important;
    top: 32% !important;
    border-left: 8px solid #c69b42 !important;
    border-bottom: 8px solid #c69b42 !important;
    transform: rotate(-45deg) !important;
    border-radius: 3px !important;
}

.cx-checkout-visual img,
.cx-success-visual img {
    object-fit: contain !important;
    padding: 16px !important;
    background: #f7f2ea !important;
}

.cx-checkout-product-img,
.cx-selected-product-mini,
.cx-success-item {
    background: #fbfaf7 !important;
}

.cx-checkout-product-img img,
.cx-selected-product-mini img,
.cx-success-item img,
.cx-order-product-tile img,
.cx-product-image img {
    object-fit: contain !important;
    object-position: center center !important;
    background: #fbfaf7 !important;
    padding: 8px !important;
    transform: none !important;
}

.cx-checkout-product-img .cx-image-empty,
.cx-selected-product-mini .cx-image-empty,
.cx-success-item .cx-image-empty,
.cx-order-product-tile .cx-image-empty,
.cx-product-image .cx-image-empty,
.cx-product-image span,
.cx-order-product-tile span,
.product-img-placeholder {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 78px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(139,105,20,0.16) !important;
    background:
        radial-gradient(circle at 50% 30%, rgba(255,255,255,0.95), transparent 28%),
        linear-gradient(135deg, #fbf7ef, #e2d2ba) !important;
    color: transparent !important;
    font-size: 0 !important;
    letter-spacing: 0 !important;
    overflow: hidden !important;
}

.cx-checkout-product-img .cx-image-empty::before,
.cx-selected-product-mini .cx-image-empty::before,
.cx-success-item .cx-image-empty::before,
.cx-order-product-tile .cx-image-empty::before,
.cx-product-image .cx-image-empty::before,
.cx-product-image span::before,
.cx-order-product-tile span::before,
.product-img-placeholder::before {
    content: "" !important;
    position: absolute !important;
    width: 40% !important;
    height: 46% !important;
    left: 30% !important;
    bottom: 20% !important;
    border-radius: 12px 12px 7px 7px !important;
    background: linear-gradient(145deg, #d8bd93, #f3e4cd) !important;
    box-shadow: 0 10px 24px rgba(71, 47, 15, 0.12) !important;
}

.cx-checkout-product-img .cx-image-empty::after,
.cx-selected-product-mini .cx-image-empty::after,
.cx-success-item .cx-image-empty::after,
.cx-order-product-tile .cx-image-empty::after,
.cx-product-image .cx-image-empty::after,
.cx-product-image span::after,
.cx-order-product-tile span::after,
.product-img-placeholder::after {
    content: "" !important;
    position: absolute !important;
    width: 18% !important;
    height: 18% !important;
    left: 41% !important;
    top: 22% !important;
    border: 3px solid #a77a2e !important;
    border-bottom: 0 !important;
    border-radius: 999px 999px 0 0 !important;
}

.cx-selected-order-products {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 14px !important;
    margin-top: 18px !important;
}

.cx-selected-product-mini {
    width: 156px !important;
    min-width: 156px !important;
    height: auto !important;
    min-height: 150px !important;
    padding: 10px !important;
    border-radius: 22px !important;
    border: 1px solid rgba(139,105,20,0.15) !important;
    display: grid !important;
    grid-template-rows: 104px auto !important;
    gap: 8px !important;
    place-items: stretch !important;
    overflow: hidden !important;
}

.cx-selected-product-mini img,
.cx-selected-product-mini .cx-image-empty {
    width: 100% !important;
    height: 104px !important;
    border-radius: 16px !important;
}

.cx-selected-product-mini small {
    font-size: 11px !important;
    line-height: 1.3 !important;
}

.cx-success-item img,
.cx-success-item .cx-image-empty {
    height: 170px !important;
}

@media (max-width: 900px) {
    .cx-fashion-check {
        width: 76px !important;
        height: 76px !important;
    }

    .cx-fashion-bag {
        width: 38% !important;
        right: 8% !important;
    }

    .cx-selected-product-mini {
        width: 136px !important;
        min-width: 136px !important;
    }
}
.cx-checkout-hero,
.cx-success-hero {
    grid-template-columns: 1fr !important;
}

.cx-checkout-hero .cx-hero-copy,
.cx-success-hero .cx-hero-copy {
    max-width: 100% !important;
}

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

body {
    background:
        radial-gradient(circle at 12% 18%, rgba(0, 0, 0, 0.08), transparent 28%),
        radial-gradient(circle at 90% 10%, rgba(160, 160, 160, 0.20), transparent 25%),
        linear-gradient(135deg, #ffffff 0%, #f4f4f4 40%, #e7e7e7 100%) !important;
    background-attachment: fixed;
}

/* Luxury subtle fashion texture */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(45deg, rgba(0,0,0,0.025) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(0,0,0,0.018) 25%, transparent 25%);
    background-size: 90px 90px;
    opacity: 0.28;
    z-index: -1;
}

/* Make page containers transparent so the background can show */
main,
.page,
.dashboard-page,
cart-page,
.wishlist-page,
.orders-page,
.payment-page,
.checkout-page {
    background: transparent !important;
}
.checkout-page::before,
.payment-page::before,
.wishlist-page::before,
.cart-page::before {
    content: "";
    position: fixed;
    right: -120px;
    top: 160px;
    width: 420px;
    height: 420px;
    background: rgba(191, 146, 64, 0.12);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
}
/* =========================================================
   CART QUANTITY + ORDER TRACKING PATCH
   ========================================================= */
.cx-qty-form {
    margin-top: 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 7px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    border: 1px solid rgba(17,17,17,0.08) !important;
}

.cx-qty-btn {
    width: 34px !important;
    height: 34px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #111111 !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    cursor: pointer !important;
}

.cx-qty-btn:hover {
    background: #7d5d19 !important;
}

.cx-qty-number {
    min-width: 34px !important;
    text-align: center !important;
    color: #111111 !important;
    font-size: 14px !important;
    font-weight: 950 !important;
}

.cx-tracking-box {
    margin: 14px 0 4px !important;
    padding: 14px !important;
    border-radius: 18px !important;
    background: #f6f2ea !important;
    border: 1px solid rgba(154,116,40,0.15) !important;
    display: grid !important;
    gap: 4px !important;
}

.cx-tracking-box span {
    color: #7d5d19 !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
}

.cx-tracking-box strong {
    color: #111111 !important;
    font-size: 16px !important;
    font-weight: 950 !important;
    letter-spacing: 0.6px !important;
    word-break: break-word !important;
}

.cx-tracking-box small {
    color: #736c61 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.45 !important;
}

.cx-mini-timeline-five {
    grid-template-columns: repeat(5, 1fr) !important;
}

.cx-track-labels {
    margin: -8px 0 18px !important;
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 8px !important;
}

.cx-track-labels span {
    color: #736c61 !important;
    font-size: 9px !important;
    font-weight: 900 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
}

.staff-order-sync-form {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
}

.staff-tracking-input,
.staff-status-select {
    padding: 8px !important;
    border-radius: 8px !important;
    background: rgba(0,0,0,0.3) !important;
    color: white !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
    font-size: 12px !important;
}

.staff-tracking-input {
    min-width: 150px !important;
}

@media (max-width: 680px) {
    .cx-qty-form {
        width: max-content !important;
    }

    .staff-order-sync-form {
        display: grid !important;
    }
}

/* =========================================================
   STAFF FASHION STORE UI
   ========================================================= */
body.staff-page {
    color: #171717 !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.86), rgba(247,242,233,0.94)),
        radial-gradient(circle at 82% 12%, rgba(190,148,70,0.20), transparent 30%),
        #f5f1ea !important;
}

body.staff-page::before {
    background-image:
        linear-gradient(90deg, rgba(17,17,17,0.035) 1px, transparent 1px),
        linear-gradient(rgba(17,17,17,0.025) 1px, transparent 1px) !important;
    background-size: 52px 52px !important;
    opacity: 0.45 !important;
}

body.staff-page::after {
    display: none !important;
}

.staff-page .staff-nav {
    min-height: 78px !important;
    background: rgba(255,255,255,0.88) !important;
    border-bottom: 1px solid rgba(17,17,17,0.08) !important;
    box-shadow: 0 14px 34px rgba(45,35,19,0.08) !important;
}

.staff-page .logo {
    color: #111111 !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    letter-spacing: 7px !important;
    font-size: 24px !important;
}

.staff-page .nav-links a {
    color: #27211a !important;
    font-weight: 850 !important;
}

.staff-page .nav-links a:hover,
.staff-page .nav-links .bag {
    color: #8b681d !important;
}

.staff-fashion-hero {
    width: min(1180px, 92%);
    margin: 34px auto 24px;
    min-height: 420px;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    align-items: stretch;
    overflow: hidden;
    border-radius: 34px;
    background:
        linear-gradient(110deg, #ffffff 0%, #fbf7ef 55%, #151515 55%, #151515 100%);
    border: 1px solid rgba(17,17,17,0.08);
    box-shadow: 0 28px 70px rgba(42,31,12,0.13);
}

.staff-fashion-hero.compact {
    min-height: 310px;
}

.staff-hero-copy {
    padding: clamp(30px, 5vw, 58px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.staff-kicker,
.staff-panel-head span,
.staff-stat-card span,
.staff-action-card span {
    color: #8b681d;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.staff-hero-copy h1 {
    margin: 10px 0 16px;
    color: #111111;
    font-size: clamp(44px, 7vw, 92px);
    line-height: 0.9;
    font-weight: 950;
    letter-spacing: 0;
}

.staff-hero-copy p {
    max-width: 680px;
    color: #514b43;
    font-size: 16px;
    line-height: 1.7;
    font-weight: 650;
}

.staff-hero-actions {
    margin-top: 26px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.staff-primary-btn,
.staff-secondary-btn {
    display: inline-block;
    padding: 13px 20px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 950;
    transition: 0.22s ease;
}

.staff-primary-btn {
    background: #111111;
    color: #ffffff;
    box-shadow: 0 16px 34px rgba(17,17,17,0.18);
}

.staff-secondary-btn {
    color: #111111;
    background: #ffffff;
    border: 1px solid rgba(17,17,17,0.10);
}

.staff-primary-btn:hover,
.staff-secondary-btn:hover {
    transform: translateY(-2px);
}

.staff-hero-visual {
    position: relative;
    min-height: 100%;
    background:
        radial-gradient(circle at 18% 22%, rgba(255,255,255,0.16), transparent 24%),
        linear-gradient(135deg, #1a1a1a, #2b241a);
}

.staff-compact-visual {
    min-height: 310px;
}

.staff-rack,
.staff-hanger,
.staff-tag-card {
    position: absolute;
    display: block;
}

.staff-rack {
    left: 12%;
    right: 10%;
    top: 33%;
    height: 5px;
    border-radius: 999px;
    background: #d4b15b;
    box-shadow: 0 20px 55px rgba(0,0,0,0.28);
}

.staff-rack::before,
.staff-rack::after {
    content: "";
    position: absolute;
    top: 0;
    width: 5px;
    height: 180px;
    background: #d4b15b;
}

.staff-rack::before {
    left: 5%;
}

.staff-rack::after {
    right: 5%;
}

.staff-hanger {
    width: 116px;
    height: 142px;
    top: 36%;
    border-radius: 20px 20px 8px 8px;
    background: linear-gradient(145deg, #f8efe0, #b89358);
    box-shadow: 0 22px 45px rgba(0,0,0,0.22);
}

.staff-hanger::before {
    content: "";
    position: absolute;
    left: 42%;
    top: -34px;
    width: 34px;
    height: 34px;
    border-top: 5px solid #d4b15b;
    border-left: 5px solid #d4b15b;
    border-radius: 28px 0 0 0;
    transform: rotate(28deg);
}

.staff-hanger-one {
    left: 21%;
    transform: rotate(-3deg);
}

.staff-hanger-two {
    right: 18%;
    top: 43%;
    background: linear-gradient(145deg, #ffffff, #d4c2aa);
    transform: rotate(4deg);
}

.staff-tag-card {
    right: 12%;
    top: 14%;
    width: 150px;
    padding: 18px;
    border-radius: 24px;
    background: #ffffff;
    color: #111111;
    box-shadow: 0 22px 45px rgba(0,0,0,0.20);
}

.staff-tag-card small,
.staff-tag-card em {
    display: block;
    color: #8b681d;
    font-size: 10px;
    font-style: normal;
    font-weight: 950;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.staff-tag-card strong {
    display: block;
    margin: 4px 0;
    color: #111111;
    font-size: 42px;
    font-weight: 950;
    line-height: 1;
}

.staff-stats,
.staff-grid {
    width: min(1180px, 92%);
    margin: 24px auto;
    display: grid;
    gap: 18px;
}

.staff-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.staff-grid {
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.65fr);
    align-items: start;
}

.staff-stat-card,
.staff-panel,
.staff-page .admin-panel {
    border-radius: 28px !important;
    background: rgba(255,255,255,0.86) !important;
    border: 1px solid rgba(17,17,17,0.08) !important;
    box-shadow: 0 22px 52px rgba(42,31,12,0.09) !important;
    backdrop-filter: blur(18px) !important;
}

.staff-stat-card {
    padding: 24px;
    transition: 0.22s ease;
}

.staff-stat-card:hover,
.staff-action-card:hover {
    transform: translateY(-4px);
    border-color: rgba(139,104,29,0.24) !important;
}

.staff-stat-card h3 {
    margin: 10px 0 8px;
    color: #111111;
    font-size: clamp(34px, 4vw, 54px);
    line-height: 1;
    font-weight: 950;
}

.staff-stat-card p,
.staff-action-card small,
.staff-summary-row span,
.staff-muted {
    color: #6b6258 !important;
    font-size: 13px !important;
    line-height: 1.5;
}

.staff-stat-card.urgent h3,
.staff-status-pill.bad {
    color: #b33434 !important;
}

.staff-stat-card.accent h3,
.staff-money {
    color: #8b681d !important;
}

.staff-panel,
.staff-page .admin-panel {
    width: min(1180px, 92%) !important;
    margin: 24px auto !important;
    padding: clamp(22px, 3vw, 32px) !important;
}

.staff-grid .staff-panel {
    width: 100% !important;
    margin: 0 !important;
}

.staff-panel-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.staff-panel-head h2,
.staff-page .admin-panel h2 {
    margin: 6px 0 0 !important;
    color: #111111 !important;
    background: none !important;
    -webkit-background-clip: initial !important;
    font-size: clamp(26px, 3vw, 40px) !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
}

.staff-action-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.staff-action-card,
.staff-summary-row,
.profile-info-card {
    border-radius: 22px !important;
    background: #fbfaf7 !important;
    border: 1px solid rgba(139,104,29,0.12) !important;
}

.staff-action-card {
    min-height: 170px;
    padding: 20px;
    color: #111111;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: 0.22s ease;
}

.staff-action-card strong {
    display: block;
    margin: 12px 0 8px;
    color: #111111;
    font-size: 24px;
    font-weight: 950;
}

.staff-summary-panel {
    display: grid;
    gap: 14px;
}

.staff-summary-row {
    padding: 17px 18px;
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
}

.staff-summary-row strong {
    color: #111111;
    font-size: 20px;
    font-weight: 950;
    text-align: right;
}

.staff-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.staff-page .admin-table {
    min-width: 860px;
}

.staff-page .admin-table th {
    color: #8b681d !important;
    background: #f6f1e8 !important;
    border-bottom: 1px solid rgba(139,104,29,0.12) !important;
}

.staff-page .admin-table td {
    color: #2b2824 !important;
    border-bottom: 1px solid rgba(17,17,17,0.07) !important;
}

.staff-order-id {
    color: #111111;
    font-weight: 950;
}

.staff-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 6px 10px;
    border-radius: 999px;
    color: #7d5d19 !important;
    background: #f5ead2;
    border: 1px solid rgba(139,104,29,0.14);
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    white-space: nowrap;
}

.staff-status-pill.good {
    color: #276a47 !important;
    background: #e3f3e9;
    border-color: rgba(39,106,71,0.16);
}

.staff-status-pill.warn {
    color: #9a6717 !important;
    background: #fff1d6;
}

.staff-status-pill.bad {
    background: #fbe7e7;
    border-color: rgba(179,52,52,0.16);
}

.staff-flash {
    display: inline-flex;
    width: fit-content;
    color: #276a47 !important;
    background: #e3f3e9 !important;
    border: 1px solid rgba(39,106,71,0.16) !important;
    border-radius: 999px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

.staff-order-sync-form {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: center !important;
}

.staff-tracking-input,
.staff-status-select,
.staff-page .admin-form input,
.staff-page .admin-form select {
    background: #ffffff !important;
    color: #111111 !important;
    border: 1px solid rgba(17,17,17,0.10) !important;
    border-radius: 14px !important;
}

.staff-sync-btn {
    margin: 0 !important;
    padding: 9px 14px !important;
    color: #ffffff !important;
    background: #111111 !important;
    box-shadow: none !important;
    font-size: 12px !important;
}

.staff-reject-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 34px !important;
    margin: 0 !important;
    padding: 9px 14px !important;
    border-radius: 999px !important;
    color: #ffffff !important;
    background: #b33434 !important;
    border: 1px solid rgba(179,52,52,0.18) !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
}

.staff-reject-btn:hover {
    background: #942727 !important;
    transform: translateY(-1px);
}

.staff-page .danger-link {
    color: #b33434 !important;
}

.staff-page .profile-info-card span,
.staff-page label,
.staff-page .form-note {
    color: #6b6258 !important;
}

.staff-page .profile-info-card strong {
    color: #111111 !important;
}

.staff-page .profile-actions button,
.staff-page .admin-form button {
    background: #111111 !important;
    color: #ffffff !important;
    box-shadow: 0 16px 34px rgba(17,17,17,0.15) !important;
}

.staff-page .profile-actions .outline,
.staff-page .cancel-btn {
    background: #ffffff !important;
    color: #111111 !important;
    border: 1px solid rgba(17,17,17,0.10) !important;
}

.staff-page footer {
    color: #6b6258 !important;
    border-top: 1px solid rgba(17,17,17,0.08) !important;
}

.staff-page footer h3 {
    color: #111111 !important;
}

@media (max-width: 1000px) {
    .staff-fashion-hero,
    .staff-grid {
        grid-template-columns: 1fr;
    }

    .staff-stats,
    .staff-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .staff-hero-visual {
        min-height: 280px;
    }
}

@media (max-width: 640px) {
    .staff-fashion-hero {
        width: 94%;
        border-radius: 24px;
    }

    .staff-stats,
    .staff-action-grid {
        grid-template-columns: 1fr;
    }

    .staff-hero-copy h1 {
        font-size: 42px;
    }

    .staff-page .logo {
        font-size: 20px !important;
        letter-spacing: 5px !important;
    }
}

/* =========================================================
   STAFF + ADMIN SECOND PASS: image placeholders and varied layouts
   ========================================================= */
body.staff-page,
body.admin-page {
    color: #181816 !important;
    background:
        radial-gradient(circle at 10% 16%, rgba(172, 87, 105, 0.12), transparent 24%),
        radial-gradient(circle at 92% 8%, rgba(72, 116, 112, 0.16), transparent 26%),
        linear-gradient(135deg, #ffffff 0%, #f5f2eb 42%, #eceff0 100%) !important;
}

body.staff-page::after,
body.admin-page::after {
    display: none !important;
}

.staff-page .staff-nav,
.admin-page .admin-nav {
    background: rgba(255,255,255,0.92) !important;
    border-bottom: 1px solid rgba(24,24,22,0.08) !important;
    box-shadow: 0 14px 34px rgba(47,43,35,0.08) !important;
}

.admin-page .logo,
.staff-page .logo {
    background: none !important;
    -webkit-background-clip: initial !important;
    color: #181816 !important;
}

.admin-page .nav-links a,
.staff-page .nav-links a {
    color: #2a2925 !important;
}

.admin-page .nav-links a:hover,
.admin-page .nav-links .bag,
.staff-page .nav-links a:hover,
.staff-page .nav-links .bag {
    color: #8a5f1c !important;
}

.staff-fashion-hero,
.admin-fashion-hero {
    background: #ffffff !important;
    border: 1px solid rgba(24,24,22,0.08) !important;
    box-shadow: 0 26px 64px rgba(45,39,30,0.12) !important;
}

.staff-image-placeholder,
.admin-image-placeholder {
    position: relative;
    display: grid;
    place-items: center;
    min-height: 280px;
    overflow: hidden;
    border-radius: 30px;
    margin: 24px;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.78), rgba(255,255,255,0.42)),
        repeating-linear-gradient(135deg, rgba(24,24,22,0.04) 0 1px, transparent 1px 18px),
        linear-gradient(135deg, #f8f2e7 0%, #e8eef0 48%, #f1e2e5 100%) !important;
    border: 1px dashed rgba(102,91,72,0.32);
}

.staff-image-placeholder::before,
.admin-image-placeholder::before {
    content: "";
    position: absolute;
    width: 54%;
    height: 44%;
    left: 23%;
    top: 26%;
    border-radius: 28px;
    background:
        radial-gradient(circle at 74% 25%, #d3ae56 0 10%, transparent 11%),
        linear-gradient(135deg, transparent 56%, rgba(72,116,112,0.32) 57% 72%, transparent 73%),
        linear-gradient(45deg, transparent 48%, rgba(172,87,105,0.26) 49% 68%, transparent 69%),
        rgba(255,255,255,0.62);
    border: 1px solid rgba(102,91,72,0.16);
    box-shadow: 0 18px 38px rgba(48,40,29,0.10);
}

.staff-image-placeholder::after,
.admin-image-placeholder::after {
    content: "";
    position: absolute;
    left: 18%;
    right: 18%;
    bottom: 20%;
    height: 12px;
    border-radius: 999px;
    background: rgba(24,24,22,0.08);
}

.placeholder-label,
.admin-image-placeholder > span {
    position: relative;
    z-index: 1;
    margin-top: 156px;
    padding: 9px 13px;
    border-radius: 999px;
    color: #6b5430;
    background: rgba(255,255,255,0.82);
    border: 1px solid rgba(102,91,72,0.14);
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.staff-image-placeholder .staff-rack,
.staff-image-placeholder .staff-hanger,
.staff-image-placeholder .staff-tag-card {
    display: none !important;
}

.staff-dashboard-hero .staff-rack,
.staff-dashboard-hero .staff-hanger,
.staff-dashboard-hero .staff-tag-card,
.staff-dashboard-image .staff-rack,
.staff-dashboard-image .staff-hanger,
.staff-dashboard-image .staff-tag-card {
    display: none !important;
}

.staff-dashboard-image {
    margin: 24px;
    border-radius: 30px;
    overflow: hidden;
    min-height: 280px;
    background: #f6f2ea !important;
}

.staff-dashboard-image img {
    width: 100%;
    height: 100%;
    min-height: 280px;
    display: block;
    object-fit: cover;
    object-position: center;
}

.staff-dashboard-hero {
    grid-template-columns: minmax(0, 1.08fr) minmax(330px, 0.92fr) !important;
}

.staff-orders-hero {
    grid-template-columns: minmax(290px, 0.72fr) minmax(0, 1.28fr) !important;
}

.staff-orders-hero .staff-hero-visual {
    order: -1;
}

.staff-payments-hero {
    grid-template-columns: minmax(0, 0.92fr) minmax(380px, 1.08fr) !important;
    border-radius: 22px !important;
}

.staff-payments-hero .staff-image-placeholder {
    min-height: 210px;
}

.staff-profile-hero {
    grid-template-columns: 1fr !important;
    text-align: center;
}

.staff-profile-hero .staff-hero-copy {
    align-items: center;
    padding-bottom: 22px;
}

.staff-profile-hero .staff-image-placeholder {
    width: min(620px, calc(100% - 48px));
    min-height: 190px;
    margin: 0 auto 26px;
}

.staff-edit-profile-hero {
    grid-template-columns: minmax(320px, 0.85fr) minmax(0, 1.15fr) !important;
}

.staff-edit-profile-hero .staff-hero-visual {
    order: -1;
}

.admin-page .nav {
    min-height: 78px;
}

.admin-page .logo {
    letter-spacing: 7px;
    font-size: 24px;
    text-decoration: none;
}

.admin-fashion-hero {
    width: min(1180px, 92%);
    margin: 34px auto 24px;
    min-height: 360px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.9fr);
    align-items: stretch;
    overflow: hidden;
    border-radius: 34px;
}

.admin-hero-copy {
    padding: clamp(30px, 5vw, 58px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.admin-kicker,
.admin-panel-head span,
.admin-metric-card .category {
    color: #8a5f1c !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
}

.admin-hero-copy h1 {
    margin: 10px 0 16px;
    color: #181816;
    font-size: clamp(44px, 6.6vw, 86px);
    line-height: 0.92;
    font-weight: 950;
}

.admin-hero-copy p {
    max-width: 660px;
    color: #575149;
    font-size: 16px;
    font-weight: 650;
    line-height: 1.7;
}

.admin-hero-actions {
    margin-top: 26px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.admin-primary-btn,
.admin-secondary-btn {
    display: inline-block;
    padding: 13px 20px;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 950;
}

.admin-primary-btn {
    color: #ffffff;
    background: #181816;
}

.admin-secondary-btn {
    color: #181816;
    background: #ffffff;
    border: 1px solid rgba(24,24,22,0.10);
}

.admin-products-hero,
.admin-profile-hero {
    grid-template-columns: minmax(320px, 0.86fr) minmax(0, 1.14fr);
}

.admin-products-hero .admin-hero-media,
.admin-profile-hero .admin-hero-media {
    order: -1;
}

.admin-categories-hero {
    grid-template-columns: minmax(0, 0.95fr) minmax(360px, 1.05fr);
    border-radius: 24px;
}

.admin-users-hero {
    grid-template-columns: 1fr;
}

.admin-users-hero .admin-hero-copy {
    padding-bottom: 18px;
}

.admin-users-hero .admin-hero-media {
    width: min(760px, calc(100% - 48px));
    min-height: 180px;
    margin: 0 auto 26px;
}

.admin-profile-hero {
    min-height: 300px;
}

.admin-metric-grid {
    width: min(1180px, 92%);
    margin: 24px auto;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 18px;
}

.admin-metric-card,
.admin-page .admin-panel {
    background: rgba(255,255,255,0.90) !important;
    border: 1px solid rgba(24,24,22,0.08) !important;
    box-shadow: 0 22px 52px rgba(45,39,30,0.09) !important;
    backdrop-filter: blur(18px) !important;
}

.admin-metric-card {
    min-height: 190px;
    padding: 22px;
    border-radius: 26px;
}

.admin-metric-card h3 {
    margin: 12px 0 8px;
    color: #181816;
    font-size: clamp(28px, 3.2vw, 44px);
    line-height: 1;
    font-weight: 950;
}

.admin-metric-card .rating {
    color: #696158 !important;
    line-height: 1.5;
}

.admin-metric-card.sales-card {
    grid-column: span 2;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.92), rgba(232,239,240,0.90)) !important;
}

.admin-page .admin-panel {
    width: min(1180px, 92%) !important;
    margin: 24px auto !important;
    padding: clamp(22px, 3vw, 32px) !important;
    border-radius: 28px !important;
}

.admin-panel-head {
    margin-bottom: 20px;
}

.admin-panel-head h2,
.admin-page .admin-panel h2 {
    margin: 6px 0 0 !important;
    color: #181816 !important;
    font-size: clamp(26px, 3vw, 40px) !important;
    font-weight: 950 !important;
    background: none !important;
    -webkit-background-clip: initial !important;
}

.admin-page .admin-form {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.admin-page .admin-form input,
.admin-page .admin-form select {
    color: #181816 !important;
    background: #ffffff !important;
    border: 1px solid rgba(24,24,22,0.10) !important;
    border-radius: 14px !important;
}

.admin-page .admin-form button,
.admin-page .hero-actions button,
.admin-page .admin-panel button {
    color: #ffffff !important;
    background: #181816 !important;
    box-shadow: 0 14px 30px rgba(24,24,22,0.14) !important;
}

.admin-page .hero-actions .outline,
.admin-page .admin-panel .outline {
    color: #181816 !important;
    background: #ffffff !important;
    border: 1px solid rgba(24,24,22,0.12) !important;
}

.admin-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.admin-page .admin-table {
    min-width: 860px;
}

.admin-page .admin-table th {
    color: #8a5f1c !important;
    background: #f4efe6 !important;
    border-bottom: 1px solid rgba(138,95,28,0.13) !important;
}

.admin-page .admin-table td {
    color: #2a2925 !important;
    border-bottom: 1px solid rgba(24,24,22,0.07) !important;
}

.admin-page .checkout-btn {
    background: #181816 !important;
    box-shadow: none !important;
}

.admin-page .clear-search {
    color: #8a5f1c !important;
}

.admin-page .danger-link {
    color: #b33434 !important;
}

@media (max-width: 1080px) {
    .admin-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .admin-metric-card.sales-card {
        grid-column: span 2;
    }
}

@media (max-width: 900px) {
    .staff-dashboard-hero,
    .staff-orders-hero,
    .staff-payments-hero,
    .staff-edit-profile-hero,
    .admin-fashion-hero,
    .admin-products-hero,
    .admin-categories-hero,
    .admin-profile-hero {
        grid-template-columns: 1fr !important;
    }

    .staff-orders-hero .staff-hero-visual,
    .staff-edit-profile-hero .staff-hero-visual,
    .admin-products-hero .admin-hero-media,
    .admin-profile-hero .admin-hero-media {
        order: 0;
    }

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

@media (max-width: 640px) {
    .admin-metric-grid {
        grid-template-columns: 1fr;
    }

    .admin-metric-card.sales-card {
        grid-column: span 1;
    }

    .staff-image-placeholder,
    .admin-image-placeholder {
        margin: 16px;
        min-height: 210px;
    }

    .admin-hero-copy h1,
    .staff-hero-copy h1 {
        font-size: 40px !important;
    }
}

/* =========================================================
   STAFF FINAL POLISH: real hero images, cleaner fashion UI
   ========================================================= */
.staff-page {
    --staff-ink: #111111;
    --staff-gold: #b9933d;
    --staff-blush: #d7b4b9;
    --staff-sage: #9fb3ad;
    --staff-paper: #fffdf8;
    --staff-soft: #f4efe7;
}

.staff-page .staff-fashion-hero {
    position: relative;
    isolation: isolate;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.98), rgba(250,246,238,0.94)) !important;
    border: 1px solid rgba(17,17,17,0.07) !important;
    box-shadow: 0 26px 70px rgba(45, 36, 22, 0.13) !important;
}

.staff-page .staff-fashion-hero::before {
    content: "";
    position: absolute;
    inset: 16px auto 16px 16px;
    width: 5px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--staff-gold), var(--staff-blush), var(--staff-sage));
    opacity: 0.82;
    z-index: -1;
}

.staff-page .staff-hero-copy {
    padding-left: clamp(42px, 6vw, 70px) !important;
}

.staff-page .staff-kicker {
    color: #5d554c !important;
}

.staff-page .staff-hero-copy h1 {
    max-width: 620px;
    color: var(--staff-ink) !important;
    text-wrap: balance;
}

.staff-page .staff-hero-copy p {
    max-width: 670px;
    color: #4e4840 !important;
    font-size: 17px !important;
}

.staff-hero-image {
    position: relative !important;
    min-height: 310px !important;
    margin: 24px !important;
    overflow: hidden !important;
    border-radius: 30px !important;
    background: var(--staff-soft) !important;
    border: 1px solid rgba(17,17,17,0.08) !important;
    box-shadow: 0 24px 50px rgba(52, 43, 31, 0.14) !important;
}

.staff-hero-image::before,
.staff-hero-image::after {
    content: none !important;
    display: none !important;
}

.staff-hero-image img {
    width: 100% !important;
    height: 100% !important;
    min-height: inherit !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
    border: 0 !important;
}

.staff-dashboard-image {
    min-height: 430px !important;
}

.staff-payment-image {
    min-height: 300px !important;
}

.staff-order-image {
    min-height: 360px !important;
}

.staff-profile-image {
    width: min(520px, calc(100% - 48px)) !important;
    min-height: 180px !important;
    max-height: 220px !important;
    margin: 0 auto 26px !important;
}

.staff-page .staff-stats {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.staff-page .staff-stat-card {
    position: relative;
    overflow: hidden;
    min-height: 190px;
    background:
        linear-gradient(145deg, rgba(255,255,255,0.96), rgba(249,244,235,0.92)) !important;
    border-color: rgba(185,147,61,0.18) !important;
}

.staff-page .staff-stat-card::after {
    content: "";
    position: absolute;
    right: -28px;
    top: -28px;
    width: 94px;
    height: 94px;
    border-radius: 999px;
    background: rgba(185,147,61,0.13);
}

.staff-page .staff-stat-card:nth-child(2)::after {
    background: rgba(179,52,52,0.10);
}

.staff-page .staff-stat-card:nth-child(3)::after {
    background: rgba(159,179,173,0.22);
}

.staff-page .staff-stat-card h3 {
    font-size: clamp(42px, 5vw, 62px) !important;
    letter-spacing: -1px;
}

.staff-page .staff-grid {
    align-items: stretch;
}

.staff-page .staff-panel {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(145deg, rgba(255,255,255,0.96), rgba(248,244,237,0.92)) !important;
}

.staff-page .staff-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-top: 4px solid rgba(185,147,61,0.42);
    pointer-events: none;
}

.staff-page .staff-action-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.staff-page .staff-action-card {
    min-height: 190px;
    background:
        linear-gradient(145deg, #ffffff, #f8f2e8) !important;
    border-color: rgba(185,147,61,0.18) !important;
    box-shadow: inset 0 -1px 0 rgba(17,17,17,0.04);
}

.staff-page .staff-action-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 44px rgba(54,43,25,0.12);
}

.staff-page .staff-action-card strong {
    font-size: 28px;
}

.staff-page .staff-summary-row {
    background: #ffffff !important;
}

.staff-page .staff-table-panel {
    background:
        linear-gradient(145deg, rgba(255,255,255,0.98), rgba(248,244,237,0.96)) !important;
}

.staff-page .admin-table th {
    color: #6d5420 !important;
}

.staff-page .admin-table tr:hover td {
    background: rgba(185,147,61,0.055) !important;
}

.staff-page .staff-primary-btn,
.staff-page .staff-sync-btn {
    background: var(--staff-ink) !important;
}

.staff-page .staff-secondary-btn {
    background: #ffffff !important;
    border-color: rgba(17,17,17,0.12) !important;
}

.staff-page .staff-reject-btn {
    background: #b33434 !important;
}

@media (max-width: 1000px) {
    .staff-page .staff-stats,
    .staff-page .staff-action-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .staff-page .staff-hero-copy {
        padding-left: 30px !important;
    }

    .staff-page .staff-stats,
    .staff-page .staff-action-grid {
        grid-template-columns: 1fr !important;
    }

    .staff-hero-image,
    .staff-dashboard-image,
    .staff-payment-image,
    .staff-order-image,
    .staff-profile-image {
        min-height: 220px !important;
        margin: 16px !important;
        border-radius: 22px !important;
    }
}
.krylo-chat-shell {
    width: min(1120px, calc(100% - 32px));
    margin: 32px auto;
    background: #fff;
    border: 1px solid #e6e1dc;
    border-radius: 8px;
    box-shadow: 0 20px 45px rgba(24, 24, 24, 0.08);
    overflow: hidden;
}

.krylo-chat-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 22px 24px;
    border-bottom: 1px solid #eee8e2;
    background: #faf8f5;
}

.krylo-chat-head span,
.krylo-chat-thread-list span {
    display: block;
    color: #8a6f5a;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.krylo-chat-head h2,
.krylo-chat-thread-list h2 {
    margin: 4px 0 0;
    color: #1f1b18;
    font-size: 1.35rem;
}

.krylo-chat-messages {
    height: 460px;
    overflow-y: auto;
    padding: 24px;
    background: #fffdfb;
}

.krylo-chat-bubble {
    width: fit-content;
    max-width: min(72%, 680px);
    margin-bottom: 14px;
    padding: 14px 16px;
    border: 1px solid #e5ded6;
    border-radius: 8px;
    background: #fff;
}

.krylo-chat-bubble.mine {
    margin-left: auto;
    background: #1f1b18;
    color: #fff;
    border-color: #1f1b18;
}

.krylo-chat-bubble strong {
    display: block;
    font-size: 0.86rem;
    margin-bottom: 6px;
}

.krylo-chat-bubble p {
    margin: 0;
    line-height: 1.5;
}

.krylo-chat-bubble small {
    display: block;
    margin-top: 8px;
    opacity: 0.7;
}

.krylo-chat-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px;
    padding: 20px 24px;
    border-top: 1px solid #eee8e2;
    background: #faf8f5;
}

.krylo-chat-form textarea {
    width: 100%;
    resize: vertical;
    min-height: 78px;
    border: 1px solid #d8cec4;
    border-radius: 8px;
    padding: 12px;
    font: inherit;
}

.krylo-chat-form button {
    align-self: end;
    min-width: 120px;
}

.krylo-chat-admin-layout {
    width: min(1220px, calc(100% - 32px));
    margin: 32px auto;
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 20px;
}

.krylo-chat-admin-layout .krylo-chat-shell {
    width: 100%;
    margin: 0;
}

.krylo-chat-thread-list {
    background: #fff;
    border: 1px solid #e6e1dc;
    border-radius: 8px;
    padding: 20px;
    align-self: start;
}

.krylo-chat-thread-list a {
    display: block;
    margin-top: 14px;
    padding: 14px;
    color: #24201d;
    text-decoration: none;
    border: 1px solid #eee8e2;
    border-radius: 8px;
    background: #fffdfb;
}

.krylo-chat-thread-list a.active {
    border-color: #1f1b18;
    background: #f2eee9;
}

.krylo-chat-thread-list strong,
.krylo-chat-thread-list small {
    display: block;
}

.krylo-chat-thread-list small {
    margin-top: 8px;
    color: #74685f;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 860px) {
    .krylo-chat-admin-layout,
    .krylo-chat-form {
        grid-template-columns: 1fr;
    }

    .krylo-chat-messages {
        height: 380px;
    }

    .krylo-chat-bubble {
        max-width: 92%;
    }
}

/* =========================================================
   KRYLO PROFESSIONAL STORE POLISH
   Navigation, checkout selection, reviews, and support chat
   ========================================================= */
.admin-nav .nav-links,
.staff-nav .nav-links,
.krylo-customer-nav .nav-links {
    flex-wrap: wrap !important;
    row-gap: 10px !important;
}

.admin-nav .nav-links a,
.staff-nav .nav-links a {
    border-radius: 999px !important;
    padding: 10px 14px !important;
}

.cx-selection-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    margin: 22px 0 6px !important;
    padding: 14px 16px !important;
    border: 1px solid rgba(139, 105, 20, 0.16) !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #fffaf2, #f3eadb) !important;
}

.cx-selection-toolbar label,
.cx-check-select {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #1f1b18 !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
}

.cx-selection-toolbar span {
    color: #7d5d19 !important;
    font-size: 12px !important;
    font-weight: 950 !important;
}

.cx-check-select input,
.cx-selection-toolbar input {
    width: 18px !important;
    height: 18px !important;
    accent-color: #111111 !important;
}

.cx-check-select span {
    color: #7d5d19 !important;
    font-size: 11px !important;
    font-weight: 950 !important;
}

.cx-cancel-order-btn {
    margin-top: 12px !important;
    border: 1px solid rgba(17,17,17,0.18) !important;
    background: #ffffff !important;
    color: #1f1b18 !important;
}

.cx-checkout-main-card,
.cx-checkout-side-card,
.product-reviews-panel,
.krylo-chat-shell,
.krylo-chat-thread-list {
    border-radius: 18px !important;
}

.product-reviews-panel {
    background: #fffaf2 !important;
    border: 1px solid rgba(139, 105, 20, 0.18) !important;
    box-shadow: 0 24px 55px rgba(36, 26, 5, 0.08) !important;
}

.product-reviews-panel h2,
.review-form-card h3,
.customer-review-card h3 {
    color: #16120f !important;
}

.review-summary-text,
.review-form-card p,
.review-comment-text,
.empty-review-card p {
    color: #5d5348 !important;
}

.customer-review-card,
.review-form-card {
    background: #ffffff !important;
    border: 1px solid rgba(139, 105, 20, 0.14) !important;
    border-radius: 16px !important;
    box-shadow: 0 14px 34px rgba(36, 26, 5, 0.06) !important;
}

.review-card-top span {
    background: #16120f !important;
    color: #f4dfae !important;
    border-radius: 999px !important;
}

.review-alert {
    background: #111111 !important;
    color: #f4dfae !important;
    border-color: rgba(244, 223, 174, 0.32) !important;
}

.krylo-chat-shell,
.krylo-chat-thread-list {
    border-color: rgba(139, 105, 20, 0.16) !important;
    box-shadow: 0 24px 55px rgba(36, 26, 5, 0.08) !important;
}

.krylo-chat-head,
.krylo-chat-form {
    background: #f6f0e7 !important;
}

.krylo-chat-bubble {
    border-radius: 16px !important;
}

.krylo-chat-bubble strong {
    color: #7d5d19 !important;
}

.krylo-chat-bubble.mine strong {
    color: #f4dfae !important;
}

@media (max-width: 700px) {
    .cx-selection-toolbar {
        align-items: flex-start !important;
        flex-direction: column !important;
    }
}

/* =========================================================
   CART SELECTION + LOW STOCK + SINGLE ROW ADMIN NAV
   ========================================================= */
.admin-nav {
    flex-wrap: nowrap !important;
    gap: 14px !important;
    align-items: center !important;
}

.admin-nav .logo {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

.admin-nav .nav-links {
    flex: 1 1 auto !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    scrollbar-width: none !important;
}

.admin-nav .nav-links::-webkit-scrollbar {
    display: none !important;
}

.admin-nav .nav-links a {
    flex: 0 0 auto !important;
    padding: 8px 10px !important;
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
    border-radius: 999px !important;
}

.admin-nav .nav-links a.bag,
.admin-nav .nav-links a:hover {
    background: #111111 !important;
    color: #f4dfae !important;
}

.cx-cart-selection-toolbar {
    margin-bottom: 18px !important;
}

.cx-cart-card {
    grid-template-columns: 72px 118px minmax(0, 1fr) auto !important;
}

.cx-cart-check-select {
    min-height: 92px !important;
    width: 100% !important;
    justify-content: center !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px 8px !important;
    border-radius: 18px !important;
    background: #fffaf2 !important;
    border: 1px solid rgba(139, 105, 20, 0.18) !important;
    text-align: center !important;
}

.cx-cart-check-select input {
    width: 20px !important;
    height: 20px !important;
}

.cx-cart-check-select input:disabled + span {
    color: #9b9388 !important;
}

.cx-stock-alert {
    margin: 12px 0 0 !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.45 !important;
}

.cx-stock-warning {
    background: #fff4d7 !important;
    border: 1px solid rgba(178, 121, 0, 0.28) !important;
    color: #7a5100 !important;
}

.cx-stock-danger {
    background: #fff0ee !important;
    border: 1px solid rgba(185, 28, 28, 0.20) !important;
    color: #9f1d1d !important;
}

.cx-cart-stock-low {
    border-color: rgba(178, 121, 0, 0.24) !important;
}

.cx-cart-stock-problem {
    border-color: rgba(185, 28, 28, 0.24) !important;
}

.cart-checkout-submit:disabled {
    opacity: 0.48 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

@media (max-width: 920px) {
    .admin-nav {
        align-items: flex-start !important;
    }

    .admin-nav .nav-links {
        justify-content: flex-start !important;
    }
}

/* =========================================================
   INDEX PAGE FASHION STORE ADDITIONS
   Scoped to body.index-fashion-home only
   ========================================================= */
.index-fashion-home .index-promo-strip {
    width: 89%;
    margin: 20px auto 0;
    min-height: 54px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--k-line);
    background: #111111;
    color: #f8e8c8;
    box-shadow: var(--k-shadow);
}

.index-fashion-home .index-promo-strip span {
    min-height: 54px;
    padding: 12px 18px;
    display: grid;
    place-items: center;
    border-right: 1px solid rgba(255,255,255,0.14);
    text-align: center;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.index-fashion-home .index-promo-strip span:last-child {
    border-right: 0;
}

.index-fashion-home .fashion-hero-copy {
    position: relative;
    overflow: hidden;
}

.index-fashion-home .fashion-hero-copy::after {
    content: none;
    display: none;
}

.index-fashion-home .fashion-hero .hero-actions {
    width: 100%;
    max-width: 840px;
    display: grid;
    grid-template-columns: minmax(118px, 1fr) minmax(150px, 1.18fr) minmax(118px, 1fr) repeat(2, minmax(110px, 0.95fr));
    gap: 12px;
    align-items: stretch;
}

.index-fashion-home .fashion-hero .hero-actions a {
    display: block;
    min-width: 0;
}

.index-fashion-home .fashion-hero .hero-actions button {
    width: 100%;
    min-width: 0;
    min-height: 56px;
    padding: 0 16px;
    border-radius: 2px !important;
    white-space: nowrap;
}

.index-fashion-home .fashion-hero .hero-actions a:nth-child(1) button,
.index-fashion-home .fashion-hero .hero-actions a:nth-child(2) button,
.index-fashion-home .fashion-hero .hero-actions a:nth-child(3) button {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.12), transparent 42%),
        #b3913f !important;
}

.index-fashion-home .fashion-hero .hero-actions a:nth-child(1) button::after,
.index-fashion-home .fashion-hero .hero-actions a:nth-child(2) button::after,
.index-fashion-home .fashion-hero .hero-actions a:nth-child(3) button::after {
    content: "";
    position: absolute;
    inset: auto 12px 10px 12px;
    height: 2px;
    background: rgba(255,255,255,0.42);
    pointer-events: none;
}

.index-fashion-home .fashion-hero-copy > * {
    position: relative;
    z-index: 1;
}

.index-fashion-home .fashion-hero .hero-actions .outline {
    background: #ffffff !important;
    color: #111111 !important;
}

.index-fashion-home .fashion-hero .hero-actions .outline:hover {
    background: #111111 !important;
    color: #ffffff !important;
}

.index-fashion-home .fashion-moodboard .mood-card,
.index-fashion-home .fashion-category-cards .department-card {
    min-height: 270px;
    transition: transform 0.24s ease, box-shadow 0.24s ease, filter 0.24s ease;
}

.index-fashion-home .fashion-moodboard .mood-card:hover,
.index-fashion-home .fashion-category-cards .department-card:hover {
    transform: translateY(-6px);
    filter: saturate(1.06) contrast(1.03);
    box-shadow: 0 26px 56px rgba(0,0,0,0.18);
}

.index-fashion-home .mood-card::after,
.index-fashion-home .department-card::after {
    content: "";
    position: absolute;
    inset: 16px;
    border: 1px solid rgba(255,255,255,0.36);
    pointer-events: none;
}

.index-new-arrivals {
    width: 89%;
    margin: 34px auto 28px;
}

.index-section-title {
    margin-bottom: 18px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
}

.index-section-title p {
    margin: 0 0 8px;
    color: var(--k-accent);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 3px;
    text-transform: uppercase;
}

.index-section-title h2 {
    margin: 0;
    color: #111111;
    font-size: clamp(30px, 4vw, 52px);
    font-weight: 950;
    line-height: 0.94;
    letter-spacing: -1.4px;
}

.index-section-title a {
    color: #111111;
    text-decoration: underline;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.index-arrival-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.arrival-card {
    position: relative;
    background: #ffffff;
    border: 1px solid var(--k-line);
    box-shadow: 0 14px 30px rgba(0,0,0,0.05);
    overflow: hidden;
    transition: 0.22s ease;
}

.arrival-card::before {
    content: "NEW";
    position: absolute;
    left: 14px;
    top: 14px;
    z-index: 2;
    padding: 7px 10px;
    background: #111111;
    color: #f7dfaa;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 1.7px;
}

.arrival-card:hover {
    transform: translateY(-5px);
    border-color: #111111;
    box-shadow: 0 22px 48px rgba(0,0,0,0.12);
}

.arrival-image {
    height: 282px;
    display: grid;
    place-items: center;
    background:
        linear-gradient(135deg, rgba(179,145,63,0.08), transparent 34%),
        #ffffff;
    border-bottom: 1px solid var(--k-line);
    overflow: hidden;
    text-decoration: none;
}

.arrival-image img {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    object-position: center;
    padding: 18px;
    transition: transform 0.35s ease;
}

.arrival-card:hover .arrival-image img {
    transform: scale(1.035);
}

.arrival-image span {
    color: #111111;
    font-size: 22px;
    font-weight: 950;
    letter-spacing: 4px;
}

.arrival-copy {
    padding: 18px;
}

.arrival-copy small {
    display: block;
    margin-bottom: 8px;
    color: var(--k-accent);
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.arrival-copy h3 {
    min-height: 44px;
    margin: 0 0 14px;
    color: #111111;
    font-size: 18px;
    font-weight: 950;
    line-height: 1.2;
}

.arrival-copy strong {
    color: #111111;
    font-size: 17px;
    font-weight: 950;
}

.index-fashion-home .products .card .product-img {
    background:
        linear-gradient(135deg, rgba(179,145,63,0.08), transparent 34%),
        #ffffff !important;
}

.index-fashion-home .products .card .product-img img {
    object-fit: contain !important;
    padding: 16px !important;
    background: transparent !important;
}

.index-fashion-home .products .card:hover .product-img img {
    transform: scale(1.035) !important;
}

.index-fashion-home .catalog-summary {
    padding: 14px 18px;
    border-left: 5px solid #b3913f;
    background: rgba(255,255,255,0.68);
}

@media (max-width: 1000px) {
    .index-fashion-home .fashion-hero .hero-actions {
        grid-template-columns: repeat(3, minmax(130px, 1fr));
    }

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

@media (max-width: 700px) {
    .index-fashion-home .index-promo-strip,
    .index-new-arrivals {
        width: 92%;
    }

    .index-fashion-home .index-promo-strip,
    .index-arrival-grid {
        grid-template-columns: 1fr;
    }

    .index-fashion-home .fashion-hero .hero-actions {
        grid-template-columns: 1fr;
    }

    .index-fashion-home .index-promo-strip span {
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,0.14);
    }

    .index-fashion-home .index-promo-strip span:last-child {
        border-bottom: 0;
    }

    .index-section-title {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================================================
   CUSTOMER PAGE UI ENHANCEMENTS
   ========================================================= */
.dashboard-shop-buttons,
.dashboard-welcome-strip,
.dashboard-status-grid,
.dashboard-recommend-row,
.wishlist-controls,
.wishlist-select-toolbar,
.cx-addon-row,
.cx-order-filters,
.cx-payment-status-grid,
.cx-payment-timeline,
.krylo-quick-replies {
    width: min(1120px, calc(100% - 32px));
    margin-left: auto;
    margin-right: auto;
}

.dashboard-shop-buttons {
    margin-top: 18px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.dashboard-shop-buttons a,
.dashboard-status-card,
.wishlist-controls select,
.wishlist-select-toolbar,
.cx-order-filters a,
.krylo-quick-replies button {
    border-radius: 999px;
}

.dashboard-shop-buttons a {
    padding: 10px 18px;
    color: #111;
    background: #fff;
    text-decoration: none;
    font-weight: 950;
}

.dashboard-welcome-strip {
    margin-top: 26px;
    display: grid;
    grid-template-columns: 1.5fr repeat(4, 1fr);
    gap: 12px;
}

.dashboard-welcome-strip div,
.dashboard-status-card,
.dashboard-activity-item,
.dashboard-recommend-card,
.wishlist-controls,
.wishlist-select-toolbar,
.cx-addon-section,
.cx-addon-card,
.cx-payment-status-card,
.krylo-order-context-card {
    background: #ffffff;
    border: 1px solid rgba(17,17,17,0.08);
    box-shadow: 0 18px 40px rgba(36,26,5,0.08);
}

.dashboard-welcome-strip div,
.dashboard-status-card {
    padding: 18px;
    border-radius: 20px;
}

.dashboard-welcome-strip span,
.dashboard-status-card span,
.dashboard-activity-item span,
.dashboard-recommend-card small,
.cx-payment-status-card span,
.krylo-order-context-card span {
    display: block;
    color: #7d5d19;
    font-size: 11px;
    font-weight: 950;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.dashboard-welcome-strip strong,
.dashboard-status-card strong,
.dashboard-activity-item strong,
.dashboard-recommend-card strong,
.cx-payment-status-card strong,
.krylo-order-context-card strong {
    display: block;
    margin-top: 6px;
    color: #111;
    font-weight: 950;
}

.dashboard-status-grid {
    margin-top: 18px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.dashboard-status-card {
    text-decoration: none;
}

.dashboard-status-card strong {
    font-size: 30px;
}

.dashboard-activity-grid {
    margin-top: 26px !important;
}

.dashboard-activity-list,
.dashboard-recommend-row {
    display: grid;
    gap: 12px;
}

.dashboard-activity-item {
    padding: 14px;
    border-radius: 16px;
}

.dashboard-activity-item small,
.dashboard-muted {
    color: #736c61;
}

.dashboard-recommend-row {
    width: 100%;
    margin: 0;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dashboard-recommend-card,
.cx-addon-card {
    padding: 12px;
    border-radius: 18px;
    color: #111;
    text-decoration: none;
}

.dashboard-recommend-card img,
.cx-addon-card img {
    width: 100%;
    height: 118px;
    object-fit: contain;
    padding: 10px;
    border-radius: 14px;
    background: #f7f2e9;
}

.wishlist-controls {
    margin-top: 18px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.wishlist-controls label {
    color: #111;
    font-size: 12px;
    font-weight: 950;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.wishlist-controls select {
    min-width: 210px;
    padding: 12px 14px;
    border: 1px solid rgba(17,17,17,0.12);
    background: #fffaf2;
    color: #111;
    font-weight: 850;
}

.wishlist-select-toolbar {
    margin-top: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.wishlist-select-toolbar label {
    color: #111;
    font-weight: 900;
}

.wishlist-products .card {
    overflow: hidden;
}

.wishlist-select-check {
    display: none;
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 4;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 999px;
    background: #111;
}

.wishlist-select-check input {
    width: 18px;
    height: 18px;
}

.wishlist-selecting .wishlist-select-check {
    display: grid;
}

.wishlist-stock-badge {
    position: absolute;
    top: 58px;
    left: 18px;
    z-index: 3;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.wishlist-stock-badge.in-stock {
    background: #e5f4ec;
    color: #137547;
}

.wishlist-stock-badge.low-stock {
    background: #fff4d7;
    color: #7a5100;
}

.wishlist-stock-badge.sold-out {
    background: #fbe7e5;
    color: #b42318;
}

.wishlist-hover-actions {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    gap: 8px;
    background: rgba(17,17,17,0.72);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.product-img:hover .wishlist-hover-actions {
    opacity: 1;
}

.wishlist-hover-actions a {
    min-width: 138px;
    padding: 9px 12px;
    border-radius: 999px;
    background: #fff;
    color: #111;
    text-align: center;
    text-decoration: none;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.cx-cart-actions {
    display: grid;
    gap: 8px;
}

.cx-save-link {
    color: #7d5d19 !important;
    border: 1px solid rgba(125,93,25,0.28) !important;
    border-radius: 999px !important;
    padding: 10px 14px !important;
    text-align: center;
    text-decoration: none !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}

.checkout-progress {
    margin-bottom: 22px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.checkout-progress span {
    padding: 10px;
    border-radius: 999px;
    background: #f1eadf;
    color: #736c61;
    text-align: center;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.checkout-progress span.active {
    background: #111;
    color: #f4dfae;
}

.cx-addon-section {
    width: min(1120px, calc(100% - 32px));
    margin: 24px auto 0;
    padding: 24px;
    border-radius: 30px;
}

.cx-addon-row {
    width: 100%;
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.cx-order-filters {
    margin: 18px 0 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cx-order-filters a {
    padding: 10px 14px;
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 950;
}

.cx-order-filters a.active {
    background: #f4dfae;
    color: #111;
}

.cx-order-badges {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.cx-order-actions {
    margin-top: 16px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.cx-order-actions .cx-btn {
    width: 100%;
    min-height: 42px;
    padding: 10px;
    text-align: center;
    border: 0;
    cursor: pointer;
}

.cx-empty-visual img {
    width: 100%;
    max-height: 180px;
    object-fit: contain;
}

.cx-payment-status-grid {
    width: 100%;
    margin: 0 0 18px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.cx-payment-status-card {
    padding: 14px;
    border-radius: 16px;
}

.cx-payment-status-card strong {
    font-size: 26px;
}

.cx-payment-timeline {
    width: 100%;
    margin: 16px 0 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
}

.cx-payment-timeline span {
    padding: 9px 7px;
    border-radius: 999px;
    background: #f1eadf;
    color: #736c61;
    text-align: center;
    font-size: 10px;
    font-weight: 950;
    text-transform: uppercase;
}

.cx-payment-timeline span.active {
    background: #111;
    color: #f4dfae;
}

.cx-rejection-box {
    margin-top: 14px;
    padding: 14px;
    border-radius: 16px;
    background: #fff0ee;
    border: 1px solid rgba(185,28,28,0.2);
}

.cx-rejection-box strong,
.cx-rejection-box p {
    color: #9f1d1d !important;
}

.cx-proof-preview-img {
    display: none;
    width: 100%;
    max-height: 260px;
    margin-top: 14px;
    object-fit: contain;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(17,17,17,0.08);
}

.krylo-chat-status-stack {
    display: grid;
    justify-items: end;
    gap: 6px;
}

.krylo-chat-status {
    width: max-content;
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 950;
    text-transform: uppercase;
}

.krylo-chat-status.online {
    background: #e5f4ec;
    color: #137547;
}

.krylo-chat-status.closed {
    background: #f1eadf;
    color: #736c61;
}

.krylo-unread-badge {
    padding: 6px 10px;
    border-radius: 999px;
    background: #111;
    color: #f4dfae;
    font-size: 11px;
}

.krylo-quick-replies {
    width: 100%;
    margin: 0;
    padding: 14px 24px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    border-bottom: 1px solid #eee8e2;
    background: #fffdfb;
}

.krylo-quick-replies button {
    border: 1px solid #d8cec4;
    background: #fff;
    color: #1f1b18;
    padding: 9px 12px;
    font-weight: 900;
    cursor: pointer;
}

.krylo-order-context-card {
    margin: 16px 24px 0;
    padding: 14px;
    border-radius: 16px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 14px;
    align-items: center;
}

.krylo-order-context-card select {
    width: 100%;
    padding: 11px;
    border: 1px solid #d8cec4;
    border-radius: 10px;
}

.krylo-typing-indicator {
    display: none;
    padding: 0 24px 12px;
    color: #7d5d19;
    font-weight: 950;
}

.krylo-attachment-field {
    display: grid;
    gap: 8px;
}

.krylo-attachment-field label {
    color: #1f1b18;
    font-size: 12px;
    font-weight: 950;
}

.krylo-attachment-field img {
    display: none;
    width: 120px;
    height: 86px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid #d8cec4;
}

.krylo-message-attachment {
    display: block;
    width: min(260px, 100%);
    max-height: 220px;
    margin-top: 10px;
    object-fit: contain;
    border-radius: 14px;
    background: rgba(255,255,255,0.85);
}

.arrival-image {
    min-height: 282px !important;
}

.arrival-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 24px !important;
    transform: none !important;
}

.arrival-card:hover .arrival-image img {
    transform: none !important;
}

@media (max-width: 1000px) {
    .dashboard-welcome-strip,
    .dashboard-status-grid,
    .dashboard-recommend-row,
    .cx-addon-row,
    .cx-payment-status-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cx-order-actions,
    .krylo-order-context-card {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .dashboard-welcome-strip,
    .dashboard-status-grid,
    .dashboard-recommend-row,
    .cx-addon-row,
    .cx-payment-status-grid,
    .cx-payment-timeline,
    .checkout-progress {
        grid-template-columns: 1fr;
    }

    .wishlist-controls,
    .wishlist-select-toolbar,
    .krylo-chat-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================================================
   CUSTOMER UI REFINEMENT PASS
   richer dashboard, centered timelines, contained buttons
   ========================================================= */
@keyframes krylo-soft-rise {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes krylo-sheen {
    from {
        transform: translateX(-120%) rotate(10deg);
    }
    to {
        transform: translateX(150%) rotate(10deg);
    }
}

.dashboard-hero {
    border-radius: 34px !important;
    border: 1px solid rgba(244, 223, 174, 0.34) !important;
    background-image:
        linear-gradient(105deg, rgba(8, 8, 10, 0.98) 0%, rgba(24, 18, 35, 0.91) 48%, rgba(118, 76, 25, 0.34) 100%),
        url('../images/ban34.png') !important;
    box-shadow:
        0 30px 80px rgba(0, 0, 0, 0.44),
        inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
}

.dashboard-hero::before {
    border-color: rgba(244, 223, 174, 0.24) !important;
}

.dashboard-hero::after {
    content: "KRYLO EDIT" !important;
    border: 1px solid rgba(244, 223, 174, 0.32) !important;
    background:
        linear-gradient(135deg, rgba(244,223,174,0.22), rgba(34,211,238,0.08)),
        url('../images/pp.png') center / cover no-repeat !important;
    color: #fff5d8 !important;
    box-shadow: 0 24px 60px rgba(0,0,0,0.28) !important;
}

.dashboard-hero-content,
.dashboard-welcome-strip,
.dashboard-stats,
.dashboard-status-grid,
.dashboard-grid,
.wide-panel {
    animation: krylo-soft-rise 0.55s ease both;
}

.dashboard-hero h1 {
    background: linear-gradient(90deg, #ffffff, #f4dfae 48%, #22d3ee) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.dashboard-shop-buttons a {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #f4dfae, #ffffff) !important;
    color: #111 !important;
    box-shadow: 0 12px 26px rgba(244, 223, 174, 0.22);
}

.dashboard-shop-buttons a::after {
    content: "";
    position: absolute;
    inset: -30% auto -30% 0;
    width: 34%;
    background: rgba(255,255,255,0.56);
    animation: krylo-sheen 3.2s ease-in-out infinite;
}

.dashboard-welcome-strip div,
.dashboard-status-card,
.dashboard-recommend-card,
.dashboard-activity-item {
    position: relative;
    overflow: hidden;
    border-color: rgba(179,145,63,0.18) !important;
}

.dashboard-welcome-strip div::before,
.dashboard-status-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(179,145,63,0.12), transparent 52%);
    pointer-events: none;
}

.dashboard-welcome-strip div:nth-child(2),
.dashboard-status-card:nth-child(1) {
    background: linear-gradient(135deg, #fffaf2, #eef9f7) !important;
}

.dashboard-welcome-strip div:nth-child(3),
.dashboard-status-card:nth-child(2) {
    background: linear-gradient(135deg, #fff6e2, #ffffff) !important;
}

.dashboard-welcome-strip div:nth-child(4),
.dashboard-status-card:nth-child(3) {
    background: linear-gradient(135deg, #f3eeff, #ffffff) !important;
}

.dashboard-welcome-strip div:nth-child(5),
.dashboard-status-card:nth-child(4) {
    background: linear-gradient(135deg, #eaf8ff, #ffffff) !important;
}

.dashboard-stats {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
}

.stat-card {
    background:
        linear-gradient(160deg, rgba(255,255,255,0.14), rgba(255,255,255,0.05)),
        radial-gradient(circle at 82% 18%, rgba(34,211,238,0.14), transparent 28%) !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
}

.stat-card:hover,
.dashboard-status-card:hover,
.dashboard-recommend-card:hover,
.dashboard-activity-item:hover {
    transform: translateY(-5px);
    border-color: rgba(34,211,238,0.35) !important;
    box-shadow: 0 24px 56px rgba(34,211,238,0.10), 0 18px 42px rgba(0,0,0,0.12) !important;
}

.stat-card:nth-child(1)::before { content: "CART" !important; }
.stat-card:nth-child(2)::before { content: "WISH" !important; }
.stat-card:nth-child(3)::before { content: "ORD" !important; }
.stat-card:nth-child(4)::before { content: "PEND" !important; }
.stat-card:nth-child(5)::before { content: "PAY" !important; }
.stat-card:nth-child(6)::before { content: "OK" !important; }
.stat-card:nth-child(7)::before { content: "RM" !important; }

.checkout-flow-progress {
    width: min(1120px, calc(100% - 32px)) !important;
    margin: 24px auto !important;
    padding: 10px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.72) !important;
    border: 1px solid rgba(179,145,63,0.18) !important;
    box-shadow: 0 18px 42px rgba(36,26,5,0.08) !important;
}

.checkout-flow-progress span {
    min-height: 46px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: #f6efe2 !important;
}

.checkout-flow-progress span::before {
    width: 22px;
    height: 22px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: rgba(17,17,17,0.08);
    color: inherit;
    font-size: 11px;
}

.checkout-flow-progress span:nth-child(1)::before { content: "1"; }
.checkout-flow-progress span:nth-child(2)::before { content: "2"; }
.checkout-flow-progress span:nth-child(3)::before { content: "3"; }
.checkout-flow-progress span:nth-child(4)::before { content: "4"; }

.checkout-flow-progress span.active {
    background: linear-gradient(135deg, #111111, #5b4219) !important;
    color: #f4dfae !important;
}

.cx-checkout-hero,
.cx-payment-hero {
    background:
        radial-gradient(circle at 12% 18%, rgba(34,211,238,0.16), transparent 26%),
        radial-gradient(circle at 86% 22%, rgba(244,223,174,0.30), transparent 30%),
        linear-gradient(135deg, #ffffff 0%, #fff8ea 50%, #171312 100%) !important;
}

.cx-checkout-main-card,
.cx-checkout-side-card,
.cx-upload-card,
.cx-bank-card {
    border-color: rgba(179,145,63,0.18) !important;
    background:
        linear-gradient(180deg, rgba(255,250,242,0.96), rgba(255,255,255,0.98)) !important;
}

.cx-checkout-side-card,
.cx-bank-card {
    overflow: hidden;
}

.cx-checkout-side-card::before,
.cx-bank-card::before {
    content: "";
    display: block;
    height: 7px;
    margin: -26px -26px 20px;
    background: linear-gradient(90deg, #111, #b3913f, #22d3ee);
}

.cx-checkout-table th {
    background: #111111 !important;
    color: #f4dfae !important;
}

.cx-checkout-table td {
    background: #fffdf8 !important;
}

.cx-payment-status-card {
    background: linear-gradient(135deg, #ffffff, #fff3d7) !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.cx-payment-status-card:nth-child(2) {
    background: linear-gradient(135deg, #ffffff, #eaf8ff) !important;
}

.cx-payment-status-card:nth-child(3) {
    background: linear-gradient(135deg, #ffffff, #e5f4ec) !important;
}

.cx-payment-status-card:nth-child(4) {
    background: linear-gradient(135deg, #ffffff, #fff0ee) !important;
}

.cx-payment-status-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 44px rgba(36,26,5,0.10);
}

.cx-payment-timeline {
    width: 100% !important;
    margin: 18px 0 0 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px !important;
    align-items: stretch !important;
}

.cx-payment-timeline span {
    min-width: 0 !important;
    min-height: 66px !important;
    padding: 10px 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1.25 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    border-radius: 999px !important;
    letter-spacing: 1px !important;
}

.cx-payment-timeline span.active {
    background: linear-gradient(135deg, #111111, #5b4219) !important;
    box-shadow: inset 0 0 0 1px rgba(244,223,174,0.18), 0 10px 26px rgba(17,17,17,0.12) !important;
}

.cx-order-card {
    overflow: hidden !important;
}

.cx-order-actions {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
}

.cx-order-actions .cx-btn {
    min-width: 0 !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 11px 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.2 !important;
    white-space: normal !important;
    word-break: normal !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
}

@media (max-width: 820px) {
    .cx-payment-timeline {
        grid-template-columns: 1fr !important;
    }

    .cx-payment-timeline span {
        min-height: 48px !important;
        border-radius: 18px !important;
    }

    .checkout-flow-progress {
        border-radius: 24px !important;
    }
}

/* Final customer cleanup: remove text-prefix labels and add site background */
.cx-body,
.cx-cart-body,
.cx-orders-body,
.cx-payment-body,
.cx-checkout-body,
.cx-chat-body,
.index-fashion-home,
.wishlist-page-wrapper,
body:has(.dashboard-hero) {
    background:
        linear-gradient(135deg, rgba(246,242,234,0.94), rgba(255,250,242,0.92)),
        radial-gradient(circle at 12% 16%, rgba(34,211,238,0.18), transparent 28%),
        radial-gradient(circle at 86% 12%, rgba(179,145,63,0.22), transparent 30%),
        repeating-linear-gradient(45deg, rgba(17,17,17,0.035) 0 1px, transparent 1px 18px) !important;
    background-attachment: fixed !important;
}

.cx-page,
.dashboard-hero,
.dashboard-welcome-strip,
.dashboard-stats,
.dashboard-status-grid,
.dashboard-grid,
.wide-panel,
.wishlist-page-wrapper > section,
.wishlist-page-wrapper > form {
    position: relative;
    z-index: 1;
}

.cx-order-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.cx-order-actions .cx-btn {
    gap: 0 !important;
}

.cx-order-actions .cx-btn::before,
.cx-order-actions .cx-btn-dark::before,
.cx-order-actions .cx-btn-light::before,
.cx-order-actions a:nth-child(1)::before,
.cx-order-actions a:nth-child(2)::before,
.cx-order-actions button::before {
    content: none !important;
    display: none !important;
}

@media (max-width: 700px) {
    .cx-order-actions {
        grid-template-columns: 1fr !important;
    }
}

/* Customer visual repair pass: success, payment readability, wishlist, tables */
.cx-order-success-page .cx-success-hero {
    grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr) !important;
    align-items: stretch !important;
    background:
        radial-gradient(circle at 18% 20%, rgba(34,211,238,0.18), transparent 28%),
        radial-gradient(circle at 78% 20%, rgba(244,223,174,0.38), transparent 32%),
        linear-gradient(135deg, #ffffff 0%, #fff8ec 46%, #151515 46%, #151515 100%) !important;
}

.cx-success-visual.cx-fashion-placeholder {
    margin: 24px !important;
    min-height: 330px !important;
    border-radius: 30px !important;
    border: 1px solid rgba(244,223,174,0.26) !important;
    display: grid !important;
    place-items: center !important;
    align-content: center !important;
    gap: 10px !important;
    text-align: center !important;
    color: #f4dfae !important;
    box-shadow: 0 24px 56px rgba(0,0,0,0.22) !important;
}

.cx-success-visual span,
.cx-success-visual small {
    color: rgba(244,223,174,0.78) !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
}

.cx-success-visual strong {
    color: #ffffff !important;
    font-size: clamp(42px, 6vw, 78px) !important;
    font-weight: 950 !important;
    letter-spacing: 8px !important;
}

.cx-success-progress span:nth-child(4) {
    background: #f6efe2 !important;
    color: #736c61 !important;
}

.cx-success-layout {
    grid-template-columns: 390px minmax(0, 1fr) !important;
}

.cx-success-card {
    position: relative !important;
    overflow: hidden !important;
    background:
        linear-gradient(180deg, rgba(255,250,242,0.98), rgba(255,255,255,0.98)) !important;
    border-color: rgba(179,145,63,0.18) !important;
}

.cx-success-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 7px;
    background: linear-gradient(90deg, #111111, #b3913f, #22d3ee);
}

.cx-success-next-step {
    margin: 12px 0 !important;
    padding: 14px !important;
    border-radius: 18px !important;
    background: linear-gradient(135deg, #111111, #3a2a13) !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 4px 12px !important;
    align-items: center !important;
}

.cx-success-next-step span {
    grid-row: span 2;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #f4dfae;
    color: #111;
    font-size: 12px;
    font-weight: 950;
}

.cx-success-next-step strong {
    color: #ffffff !important;
    font-weight: 950 !important;
}

.cx-success-next-step small {
    color: rgba(255,255,255,0.70) !important;
    font-weight: 800 !important;
}

.cx-success-item {
    background:
        linear-gradient(180deg, #ffffff, #fff8ec) !important;
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
}

.cx-success-item:hover {
    transform: translateY(-5px);
    border-color: rgba(34,211,238,0.34) !important;
    box-shadow: 0 22px 48px rgba(36,26,5,0.12) !important;
}

.cx-payment-body .cx-upload-card,
.cx-payment-body .cx-selected-order,
.cx-payment-body .cx-selected-order *,
.cx-payment-body .cx-payment-form,
.cx-payment-body .cx-payment-form *,
.cx-payment-body .cx-file-drop,
.cx-payment-body .cx-file-drop * {
    color: #111111 !important;
}

.cx-payment-body .cx-selected-order small,
.cx-payment-body .cx-file-drop small,
.cx-payment-body .cx-soft-note {
    color: #5f5a52 !important;
}

.cx-payment-body .cx-upload-card h2,
.cx-payment-body .cx-selected-order strong,
.cx-payment-body .cx-payment-status-card strong {
    color: #111111 !important;
}

.cx-payment-body .cx-selected-order {
    background:
        linear-gradient(135deg, #ffffff, #fff3d7) !important;
    border: 1px solid rgba(179,145,63,0.18) !important;
}

.admin-table,
.dashboard-table,
.cx-checkout-table {
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
}

.admin-table th,
.dashboard-table th,
.cx-checkout-table th {
    background: linear-gradient(135deg, #111111, #3b2b15) !important;
    color: #f4dfae !important;
    border: 0 !important;
}

.admin-table td,
.dashboard-table td,
.cx-checkout-table td {
    background: rgba(255,255,255,0.96) !important;
    color: #111111 !important;
    border-top: 1px solid rgba(179,145,63,0.12) !important;
    border-bottom: 1px solid rgba(179,145,63,0.12) !important;
}

.admin-table tr,
.dashboard-table tr,
.cx-checkout-table tr {
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.admin-table tr:hover,
.dashboard-table tr:hover,
.cx-checkout-table tr:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(36,26,5,0.08);
}

.wishlist-page-wrapper,
.wishlist-page-wrapper.normal-page-wrapper {
    background:
        linear-gradient(135deg, rgba(17,17,17,0.92), rgba(45,36,20,0.86)),
        url('../images/wishlist_bg.png') center / cover fixed no-repeat !important;
    color: #ffffff !important;
}

.wishlist-page-wrapper .customer-page-hero {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.96), rgba(255,244,215,0.92)) !important;
    border: 1px solid rgba(244,223,174,0.28) !important;
    box-shadow: 0 28px 70px rgba(0,0,0,0.22) !important;
}

.wishlist-controls,
.wishlist-select-toolbar,
.wishlist-empty-card,
.wishlist-tip-card,
.wishlist-products .card {
    background:
        linear-gradient(180deg, rgba(255,255,255,0.97), rgba(255,248,236,0.97)) !important;
    border-color: rgba(244,223,174,0.24) !important;
    box-shadow: 0 22px 48px rgba(0,0,0,0.18) !important;
}

.wishlist-products .card {
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
}

.wishlist-products .card:hover {
    transform: translateY(-7px) !important;
    border-color: rgba(34,211,238,0.38) !important;
    box-shadow: 0 26px 58px rgba(34,211,238,0.12), 0 24px 54px rgba(0,0,0,0.22) !important;
}

.wishlist-empty-content h3,
.wishlist-tip-card strong,
.wishlist-tip-card p,
.wishlist-select-toolbar label,
.wishlist-controls label {
    color: #111111 !important;
}

.wishlist-tip-card span {
    color: #b3913f !important;
}

.dashboard-panel,
.stat-card,
.quick-link-box,
.cx-cart-card,
.cx-summary-card,
.cx-order-card,
.cx-bank-card,
.cx-upload-card {
    transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
}

.dashboard-panel:hover,
.quick-link-box:hover,
.cx-cart-card:hover,
.cx-summary-card:hover,
.cx-order-card:hover,
.cx-upload-card:hover {
    transform: translateY(-4px);
    border-color: rgba(34,211,238,0.28) !important;
    box-shadow: 0 24px 56px rgba(36,26,5,0.12) !important;
}

@media (max-width: 900px) {
    .cx-order-success-page .cx-success-hero,
    .cx-success-layout {
        grid-template-columns: 1fr !important;
    }
}

/* Krylo warm cleanup: customer dashboard, wishlist, checkout, payment, success */
:root {
    --krylo-ink: #111111;
    --krylo-coffee: #3f2d12;
    --krylo-gold: #b3913f;
    --krylo-soft-gold: #f4dfae;
    --krylo-cream: #fffaf0;
    --krylo-paper: #fffdf8;
    --krylo-line: rgba(92, 67, 25, 0.16);
}

.cx-body,
.cx-cart-body,
.cx-orders-body,
.cx-payment-body,
.cx-checkout-body,
.cx-order-success-body,
.wishlist-page-wrapper,
body:has(.dashboard-hero) {
    background:
        linear-gradient(135deg, rgba(255,250,240,0.96), rgba(247,239,224,0.94)),
        radial-gradient(circle at 12% 18%, rgba(179,145,63,0.16), transparent 30%),
        radial-gradient(circle at 86% 12%, rgba(17,17,17,0.06), transparent 28%),
        repeating-linear-gradient(45deg, rgba(92,67,25,0.035) 0 1px, transparent 1px 18px) !important;
    background-attachment: fixed !important;
}

.dashboard-hero {
    background:
        linear-gradient(105deg, rgba(17,17,17,0.94), rgba(63,45,18,0.82) 56%, rgba(255,250,240,0.2)),
        url('../images/ban34.png') center / cover no-repeat !important;
    border-color: rgba(244,223,174,0.34) !important;
    box-shadow: 0 28px 72px rgba(63,45,18,0.24) !important;
}

.dashboard-hero::after {
    background:
        linear-gradient(145deg, rgba(255,250,240,0.88), rgba(244,223,174,0.68)),
        url('../images/pp.png') center / cover no-repeat !important;
    color: var(--krylo-ink) !important;
    border-color: rgba(244,223,174,0.42) !important;
}

.dashboard-hero h1 {
    background: none !important;
    -webkit-text-fill-color: #ffffff !important;
    color: #ffffff !important;
}

.dashboard-stats {
    grid-template-columns: repeat(5, minmax(150px, 1fr)) !important;
    margin-top: 26px !important;
}

.stat-card,
.dashboard-panel,
.quick-link-box,
.dashboard-recommend-card,
.dashboard-activity-item {
    background: linear-gradient(180deg, rgba(255,253,248,0.98), rgba(255,250,240,0.96)) !important;
    border-color: var(--krylo-line) !important;
    box-shadow: 0 20px 44px rgba(63,45,18,0.10) !important;
}

.stat-card {
    min-height: 168px !important;
}

.stat-card::before {
    color: rgba(179,145,63,0.12) !important;
}

.stat-card:hover,
.dashboard-panel:hover,
.quick-link-box:hover,
.dashboard-recommend-card:hover,
.dashboard-activity-item:hover,
.cx-cart-card:hover,
.cx-summary-card:hover,
.cx-order-card:hover,
.cx-upload-card:hover,
.cx-success-item:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(179,145,63,0.32) !important;
    box-shadow: 0 24px 54px rgba(63,45,18,0.14) !important;
}

.dashboard-shop-buttons a,
.dashboard-main-btn,
.cx-btn-dark,
.checkout-btn {
    background: linear-gradient(135deg, var(--krylo-ink), var(--krylo-coffee)) !important;
    color: #ffffff !important;
    border-color: rgba(244,223,174,0.28) !important;
}

.dashboard-outline-btn,
.cx-btn-light,
.btn-outline-dark {
    background: #ffffff !important;
    color: var(--krylo-ink) !important;
    border-color: rgba(17,17,17,0.22) !important;
}

.cx-btn,
.dashboard-main-btn,
.dashboard-outline-btn,
.checkout-btn,
.btn-gradient,
.btn-outline-dark {
    box-shadow: none !important;
}

.cx-btn:hover,
.dashboard-main-btn:hover,
.dashboard-outline-btn:hover,
.checkout-btn:hover,
.btn-gradient:hover,
.btn-outline-dark:hover {
    background: linear-gradient(135deg, var(--krylo-gold), #7d5d19) !important;
    color: #ffffff !important;
    border-color: rgba(63,45,18,0.22) !important;
    transform: translateY(-2px) !important;
}

.cx-btn:hover *,
.dashboard-main-btn:hover *,
.dashboard-outline-btn:hover *,
.checkout-btn:hover * {
    color: inherit !important;
    stroke: currentColor !important;
}

.wishlist-page-wrapper,
.wishlist-page-wrapper.normal-page-wrapper {
    background:
        linear-gradient(135deg, rgba(255,250,240,0.96), rgba(247,239,224,0.94)),
        radial-gradient(circle at 12% 18%, rgba(179,145,63,0.16), transparent 30%),
        radial-gradient(circle at 86% 12%, rgba(17,17,17,0.06), transparent 28%),
        repeating-linear-gradient(45deg, rgba(92,67,25,0.035) 0 1px, transparent 1px 18px) !important;
    color: var(--krylo-ink) !important;
}

.wishlist-page-wrapper .customer-page-hero,
.wishlist-controls,
.wishlist-select-toolbar,
.wishlist-empty-card,
.wishlist-tip-card,
.wishlist-products .card {
    background: linear-gradient(180deg, rgba(255,253,248,0.98), rgba(255,250,240,0.96)) !important;
    border-color: var(--krylo-line) !important;
    box-shadow: 0 20px 44px rgba(63,45,18,0.10) !important;
}

.wishlist-page-wrapper .customer-page-hero {
    overflow: hidden !important;
}

.wishlist-page-wrapper .customer-page-hero::after {
    content: "";
    position: absolute;
    right: -80px;
    bottom: -110px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(179,145,63,0.12);
    pointer-events: none;
}

.wishlist-products .card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(179,145,63,0.34) !important;
    box-shadow: 0 24px 54px rgba(63,45,18,0.14) !important;
}

.wishlist-hover-actions,
.product-img:hover .wishlist-hover-actions {
    display: none !important;
    opacity: 0 !important;
}

.wishlist-stock-badge.in-stock {
    background: #eef8f0 !important;
    color: #17623b !important;
}

.wishlist-stock-badge.low-stock {
    background: #fff2cf !important;
    color: #7d5d19 !important;
}

.wishlist-stock-badge.sold-out {
    background: #f7e4df !important;
    color: #8b2318 !important;
}

.cx-checkout-hero,
.cx-payment-hero,
.cx-order-success-page .cx-success-hero {
    background: linear-gradient(135deg, #fffaf0 0%, #f3e5ca 58%, #d7bc7a 100%) !important;
    border: 1px solid rgba(179,145,63,0.22) !important;
    box-shadow: 0 24px 60px rgba(63,45,18,0.12) !important;
}

.cx-checkout-hero .cx-hero-copy h1,
.cx-payment-hero .cx-hero-copy h1,
.cx-success-hero .cx-hero-copy h1 {
    color: var(--krylo-ink) !important;
}

.cx-checkout-main-card,
.cx-checkout-side-card,
.cx-upload-card,
.cx-bank-card,
.cx-success-card {
    background: linear-gradient(180deg, rgba(255,253,248,0.99), rgba(255,250,240,0.98)) !important;
    border-color: var(--krylo-line) !important;
    box-shadow: 0 22px 50px rgba(63,45,18,0.11) !important;
}

.cx-checkout-side-card::before,
.cx-bank-card::before,
.cx-success-card::before {
    background: linear-gradient(90deg, var(--krylo-ink), var(--krylo-gold), var(--krylo-soft-gold)) !important;
}

.checkout-flow-progress,
.cx-payment-timeline {
    background: rgba(255,253,248,0.82) !important;
    border-color: var(--krylo-line) !important;
}

.checkout-flow-progress span,
.cx-payment-timeline span {
    background: #f1eadf !important;
    color: #665d50 !important;
}

.checkout-flow-progress span.active,
.cx-payment-timeline span.active {
    background: linear-gradient(135deg, var(--krylo-ink), var(--krylo-coffee)) !important;
    color: var(--krylo-soft-gold) !important;
}

.cx-payment-body .cx-upload-card,
.cx-payment-body .cx-upload-card *,
.cx-payment-body .cx-bank-card,
.cx-payment-body .cx-bank-card *,
.cx-payment-body .cx-selected-order,
.cx-payment-body .cx-selected-order *,
.cx-payment-body .cx-payment-form,
.cx-payment-body .cx-payment-form *,
.cx-payment-body .cx-file-drop,
.cx-payment-body .cx-file-drop * {
    color: var(--krylo-ink) !important;
}

.cx-payment-body .cx-btn-dark,
.cx-payment-body .cx-btn-dark *,
.cx-payment-body .cx-file-icon,
.cx-payment-body .cx-file-icon *,
.cx-payment-body .cx-icon-wrap,
.cx-payment-body .cx-icon-wrap * {
    color: #ffffff !important;
    stroke: currentColor !important;
}

.cx-payment-body .cx-btn-dark:hover,
.cx-payment-body .cx-btn-dark:hover * {
    color: #ffffff !important;
}

.cx-file-drop {
    background: #ffffff !important;
    border: 1px dashed rgba(179,145,63,0.38) !important;
}

.cx-file-drop input,
.cx-payment-form select {
    color: var(--krylo-ink) !important;
    background: #ffffff !important;
}

.admin-table th,
.dashboard-table th,
.cx-checkout-table th {
    background: linear-gradient(135deg, var(--krylo-ink), var(--krylo-coffee)) !important;
    color: var(--krylo-soft-gold) !important;
}

.admin-table tr:hover,
.dashboard-table tr:hover,
.cx-checkout-table tr:hover {
    transform: none !important;
    box-shadow: 0 12px 28px rgba(63,45,18,0.08) !important;
}

.cx-success-visual {
    margin: 24px !important;
    min-height: 330px !important;
    border-radius: 30px !important;
    border: 1px solid rgba(179,145,63,0.24) !important;
    display: grid !important;
    place-items: center !important;
    background: rgba(255,253,248,0.72) !important;
    box-shadow: 0 24px 56px rgba(63,45,18,0.14) !important;
    overflow: hidden !important;
}

.cx-success-visual img {
    width: 100% !important;
    height: 100% !important;
    max-height: 380px !important;
    object-fit: contain !important;
    padding: 28px !important;
}

.cx-success-next-step {
    background: linear-gradient(135deg, #fff7e4, #ffffff) !important;
    border: 1px solid rgba(179,145,63,0.18) !important;
}

.cx-success-next-step strong,
.cx-success-next-step small {
    color: var(--krylo-ink) !important;
}

.cx-success-next-step span {
    background: linear-gradient(135deg, var(--krylo-ink), var(--krylo-coffee)) !important;
    color: var(--krylo-soft-gold) !important;
}

.cx-success-progress span:nth-child(4) {
    background: #f1eadf !important;
    color: #665d50 !important;
}

@media (max-width: 1000px) {
    .dashboard-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 700px) {
    .dashboard-stats {
        grid-template-columns: 1fr !important;
    }

    .cx-success-visual {
        min-height: 240px !important;
    }
}

/* =========================================================
   Requested customer page color fixes
   ========================================================= */
.wishlist-page-wrapper .btn-gradient,
.wishlist-page-wrapper .cx-btn-dark,
.wishlist-page-wrapper .checkout-btn {
    background: linear-gradient(135deg, #6f451f, #a47734) !important;
    color: #fff7e7 !important;
    border: 1px solid rgba(244,223,174,0.36) !important;
}

.wishlist-page-wrapper .btn-outline-dark,
.wishlist-page-wrapper .cx-btn-light {
    background: #fff8ec !important;
    color: #3f2815 !important;
    border: 1px solid rgba(111,69,31,0.34) !important;
}

.wishlist-page-wrapper .card-actions .checkout-btn:nth-child(1) {
    background: linear-gradient(135deg, #2b2117, #5b3a1c) !important;
}

.wishlist-page-wrapper .card-actions .checkout-btn:nth-child(2) {
    background: linear-gradient(135deg, #8b5f24, #c59a4a) !important;
}

.wishlist-page-wrapper .wishlist-remove {
    display: inline-grid !important;
    place-items: center !important;
    min-height: 38px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    background: #fff0ea !important;
    color: #9a2f1f !important;
    border: 1px solid rgba(154,47,31,0.28) !important;
    text-decoration: none !important;
    font-weight: 900 !important;
}

.wishlist-page-wrapper .btn-gradient:hover,
.wishlist-page-wrapper .btn-outline-dark:hover,
.wishlist-page-wrapper .cx-btn:hover,
.wishlist-page-wrapper .checkout-btn:hover,
.wishlist-page-wrapper .wishlist-remove:hover {
    background: linear-gradient(135deg, #c59a4a, #4d2d14) !important;
    color: #ffffff !important;
}

.cx-orders-body {
    background:
        linear-gradient(135deg, rgba(53,35,20,0.08), rgba(255,248,233,0.94)),
        radial-gradient(circle at 10% 16%, rgba(185,147,61,0.28), transparent 28%),
        radial-gradient(circle at 88% 6%, rgba(111,69,31,0.16), transparent 26%),
        #f7ead6 !important;
}

.cx-orders-hero {
    background:
        linear-gradient(135deg, rgba(43,33,23,0.96), rgba(111,69,31,0.88) 48%, rgba(197,154,74,0.78)),
        url('../images/order.png') right center / contain no-repeat !important;
    border-color: rgba(197,154,74,0.36) !important;
}

.cx-orders-hero .cx-kicker,
.cx-orders-hero .cx-hero-copy h1,
.cx-orders-hero .cx-hero-copy p:not(.cx-kicker),
.cx-orders-hero .cx-order-stats-panel span,
.cx-orders-hero .cx-order-stats-panel small {
    color: #fff7e7 !important;
}

.cx-order-board {
    background: linear-gradient(180deg, rgba(255,250,240,0.94), rgba(244,226,195,0.86)) !important;
    border: 1px solid rgba(111,69,31,0.16) !important;
}

.cx-order-card {
    background:
        linear-gradient(180deg, #fffdf8 0%, #fff4df 100%) !important;
    border-color: rgba(111,69,31,0.18) !important;
}

.cx-order-card:nth-child(3n + 1) {
    background: linear-gradient(180deg, #fffaf0, #f5e5c8) !important;
}

.cx-order-card:nth-child(3n + 2) {
    background: linear-gradient(180deg, #fbf4ea, #e9d7b5) !important;
}

.cx-order-card:nth-child(3n) {
    background: linear-gradient(180deg, #fff7ed, #efd1bc) !important;
}

.cx-order-filters a {
    background: #fff8ec !important;
    color: #4d2d14 !important;
    border-color: rgba(111,69,31,0.22) !important;
}

.cx-order-filters a.active {
    background: linear-gradient(135deg, #4d2d14, #9b6f2d) !important;
    color: #fff7e7 !important;
}

.cx-payment-body .cx-bank-card,
.cx-payment-body .cx-bank-card .cx-bank-line,
.cx-payment-body .cx-bank-card .cx-bank-note {
    background: linear-gradient(180deg, #fffaf0, #f3e3c5) !important;
}

.cx-payment-body .cx-bank-card .cx-kicker,
.cx-payment-body .cx-bank-card h2,
.cx-payment-body .cx-bank-card .cx-bank-line span,
.cx-payment-body .cx-bank-card .cx-bank-line strong,
.cx-payment-body .cx-bank-card .cx-bank-note {
    color: #1b140d !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

.cx-payment-body .cx-bank-card .cx-bank-line {
    border: 1px solid rgba(111,69,31,0.14) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.62) !important;
}

.cx-checkout-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1.05fr) minmax(260px, 0.55fr) !important;
    gap: clamp(22px, 4vw, 58px) !important;
    align-items: center !important;
    background: linear-gradient(135deg, #fff7e8 0%, #f0d9a9 58%, #bd8f3c 100%) !important;
}

.cx-checkout-image-placeholder {
    min-height: clamp(230px, 26vw, 390px) !important;
    border-radius: 28px !important;
    border: 2px dashed rgba(77,45,20,0.28) !important;
    background: rgba(255,253,248,0.42) !important;
    overflow: hidden !important;
}

.cx-checkout-image-placeholder img {
    width: 100% !important;
    height: 100% !important;
    min-height: inherit !important;
    display: block !important;
    object-fit: cover !important;
}

@media (max-width: 900px) {
    .cx-checkout-hero {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   Payment and wishlist visual upgrade
   ========================================================= */
.cx-payment-body {
    background:
        linear-gradient(135deg, rgba(248,241,229,0.95), rgba(233,242,237,0.88)),
        radial-gradient(circle at 14% 18%, rgba(195,139,90,0.22), transparent 26%),
        radial-gradient(circle at 84% 12%, rgba(94,125,110,0.18), transparent 28%),
        #f4ecdf !important;
}

.cx-payment-hero {
    grid-template-columns: minmax(0, 0.95fr) minmax(280px, 0.62fr) !important;
    background:
        linear-gradient(135deg, rgba(38,30,23,0.96), rgba(113,77,44,0.90) 48%, rgba(94,125,110,0.82)),
        linear-gradient(45deg, rgba(210,168,87,0.36), transparent) !important;
    color: #fff7e7 !important;
}

.cx-payment-hero .cx-kicker,
.cx-payment-hero .cx-hero-copy h1,
.cx-payment-hero .cx-hero-copy p:not(.cx-kicker) {
    color: #fff7e7 !important;
}

.cx-payment-preview {
    min-height: 320px !important;
    border: 1px solid rgba(255,247,231,0.34) !important;
    background: rgba(255,247,231,0.16) !important;
    box-shadow: 0 22px 48px rgba(20,14,9,0.22) !important;
}

.cx-payment-preview-img,
.cx-payment-image-slot img,
.wishlist-hero-visual img,
.wishlist-empty-visual img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
}

.cx-payment-layout {
    align-items: start !important;
}

.cx-payment-body .cx-bank-card {
    background: linear-gradient(180deg, #fffaf0 0%, #f0dfc5 100%) !important;
    border-color: rgba(113,77,44,0.24) !important;
}

.cx-payment-body .cx-upload-card {
    background:
        linear-gradient(180deg, rgba(255,253,248,0.98), rgba(238,246,242,0.95)) !important;
    border-color: rgba(94,125,110,0.22) !important;
}

.cx-bank-line {
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) minmax(120px, auto) !important;
    gap: 12px !important;
    align-items: center !important;
}

.cx-line-icon,
.wishlist-tip-icon,
.wishlist-action-icon {
    display: inline-grid !important;
    place-items: center !important;
    flex: 0 0 auto !important;
}

.cx-line-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
    background: #2f4f45 !important;
    color: #fff7e7 !important;
}

.cx-line-icon svg,
.wishlist-tip-icon svg,
.wishlist-action-icon svg {
    width: 18px !important;
    height: 18px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.cx-payment-status-card:nth-child(1) {
    background: linear-gradient(135deg, #fff2d8, #ffffff) !important;
    border-color: rgba(196,139,45,0.24) !important;
}

.cx-payment-status-card:nth-child(2) {
    background: linear-gradient(135deg, #eaf5ee, #ffffff) !important;
    border-color: rgba(70,123,91,0.22) !important;
}

.cx-payment-status-card:nth-child(3) {
    background: linear-gradient(135deg, #edf1ff, #ffffff) !important;
    border-color: rgba(82,97,150,0.20) !important;
}

.cx-payment-status-card:nth-child(4) {
    background: linear-gradient(135deg, #fff0ec, #ffffff) !important;
    border-color: rgba(164,78,60,0.22) !important;
}

.cx-payment-image-slot {
    height: clamp(170px, 20vw, 260px) !important;
    margin: 22px 0 !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    border: 2px dashed rgba(94,125,110,0.32) !important;
    background: #f6ead7 !important;
}

.cx-file-drop {
    background: linear-gradient(135deg, #fffaf0, #eef6f2) !important;
}

.cx-payment-body .cx-btn-dark {
    background: linear-gradient(135deg, #2f4f45, #8f6a2f) !important;
}

.wishlist-page-wrapper,
.wishlist-page-wrapper.normal-page-wrapper {
    background:
        linear-gradient(135deg, rgba(255,248,236,0.94), rgba(236,245,239,0.88)),
        radial-gradient(circle at 14% 20%, rgba(202,151,70,0.24), transparent 28%),
        radial-gradient(circle at 86% 12%, rgba(167,83,67,0.16), transparent 24%),
        #f5ecdf !important;
}

.wishlist-page-wrapper .customer-page-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 0.86fr) minmax(280px, 0.58fr) !important;
    gap: clamp(20px, 4vw, 54px) !important;
    background:
        linear-gradient(135deg, rgba(35,28,22,0.96), rgba(104,66,35,0.88) 50%, rgba(94,125,110,0.78)) !important;
    color: #fff7e7 !important;
}

.wishlist-page-wrapper .customer-page-hero .status-purple,
.wishlist-page-wrapper .customer-page-hero h1,
.wishlist-page-wrapper .customer-page-hero .outline-text,
.wishlist-page-wrapper .customer-page-hero .tagline {
    color: #fff7e7 !important;
    -webkit-text-stroke-color: rgba(255,247,231,0.78) !important;
}

.wishlist-page-wrapper .hero-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

.wishlist-page-wrapper .hero-actions button,
.wishlist-page-wrapper .card-actions a,
.wishlist-page-wrapper .wishlist-empty-actions a,
.wishlist-page-wrapper .wishlist-select-toolbar button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.wishlist-action-icon {
    width: 22px !important;
    height: 22px !important;
}

.wishlist-hero-visual,
.wishlist-empty-visual {
    min-height: 320px !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    border: 2px dashed rgba(255,247,231,0.36) !important;
    background: rgba(255,247,231,0.14) !important;
}

.wishlist-controls,
.wishlist-select-toolbar {
    background: linear-gradient(135deg, #fffaf0, #eaf5ee) !important;
    border-color: rgba(94,125,110,0.20) !important;
}

.wishlist-products .card {
    background: linear-gradient(180deg, #fffdf8, #fff2df) !important;
}

.wishlist-products .card:nth-child(3n + 1) {
    background: linear-gradient(180deg, #fffdf8, #f0e1c3) !important;
}

.wishlist-products .card:nth-child(3n + 2) {
    background: linear-gradient(180deg, #fffdf8, #e6f0ea) !important;
}

.wishlist-products .card:nth-child(3n) {
    background: linear-gradient(180deg, #fffdf8, #f3dfd7) !important;
}

.wishlist-page-wrapper .btn-gradient,
.wishlist-page-wrapper .card-actions .checkout-btn:nth-child(2),
.wishlist-page-wrapper .wishlist-empty-actions .cx-btn-dark,
.wishlist-page-wrapper .wishlist-select-toolbar .cx-btn-dark {
    background: linear-gradient(135deg, #2f4f45, #9b7837) !important;
}

.wishlist-page-wrapper .btn-outline-dark,
.wishlist-page-wrapper .wishlist-empty-actions .cx-btn-light {
    background: #fff7e7 !important;
    color: #2f4f45 !important;
    border-color: rgba(47,79,69,0.32) !important;
}

.wishlist-page-wrapper .card-actions .checkout-btn:nth-child(1) {
    background: linear-gradient(135deg, #241c16, #6f451f) !important;
}

.wishlist-page-wrapper .wishlist-remove {
    background: #fff0ec !important;
    color: #9a2f1f !important;
    border-color: rgba(154,47,31,0.30) !important;
}

.wishlist-tip-card {
    background: linear-gradient(135deg, #fffdf8, #eef6f2) !important;
}

.wishlist-tip-icon {
    width: 42px !important;
    height: 42px !important;
    margin-bottom: 14px !important;
    border-radius: 14px !important;
    color: #fff7e7 !important;
    background: #2f4f45 !important;
}

.wishlist-tip-card:nth-child(2) .wishlist-tip-icon {
    background: #8f6a2f !important;
}

.wishlist-tip-card:nth-child(3) .wishlist-tip-icon {
    background: #9a4b3a !important;
}

@media (max-width: 900px) {
    .cx-payment-hero,
    .wishlist-page-wrapper .customer-page-hero {
        grid-template-columns: 1fr !important;
    }

    .cx-bank-line {
        grid-template-columns: 38px 1fr !important;
    }

    .cx-bank-line strong {
        grid-column: 2 !important;
    }
}

/* =========================================================
   Payment page final modern repair
   ========================================================= */
.cx-payment-page {
    --pay-ink: #16120d;
    --pay-coffee: #4b321f;
    --pay-gold: #b78a3f;
    --pay-sage: #315b50;
    --pay-rose: #ad624f;
    --pay-paper: #fffaf2;
    --pay-cream: #f4e6cf;
}

.cx-payment-body .cx-page {
    width: min(1420px, 94%) !important;
}

.cx-payment-hero {
    position: relative !important;
    isolation: isolate !important;
    display: grid !important;
    grid-template-columns: minmax(0, 0.98fr) minmax(320px, 0.62fr) !important;
    min-height: 440px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 28px !important;
    border: 1px solid rgba(75,50,31,0.18) !important;
    background:
        linear-gradient(90deg, rgba(255,250,242,0.98) 0%, rgba(255,250,242,0.98) 58%, rgba(49,91,80,0.94) 58%, rgba(75,50,31,0.94) 100%),
        radial-gradient(circle at 22% 18%, rgba(183,138,63,0.22), transparent 28%) !important;
    box-shadow: 0 30px 70px rgba(49,34,22,0.14) !important;
}

.cx-payment-hero::before,
.cx-payment-hero::after {
    content: none !important;
    display: none !important;
}

.cx-payment-hero .cx-hero-copy {
    min-width: 0 !important;
    padding: clamp(42px, 6vw, 72px) !important;
    background:
        radial-gradient(circle at 8% 18%, rgba(183,138,63,0.18), transparent 28%),
        linear-gradient(135deg, rgba(255,250,242,0.96), rgba(247,239,226,0.94)) !important;
}

.cx-payment-hero .cx-kicker {
    color: #8b642b !important;
    letter-spacing: 3px !important;
}

.cx-payment-hero .cx-hero-copy h1 {
    max-width: 720px !important;
    margin: 16px 0 22px !important;
    color: var(--pay-ink) !important;
    font-size: clamp(48px, 6.4vw, 92px) !important;
    line-height: 0.96 !important;
    letter-spacing: 0 !important;
}

.cx-payment-hero .cx-hero-copy p:not(.cx-kicker) {
    max-width: 680px !important;
    color: #5d5248 !important;
    font-size: 18px !important;
    line-height: 1.75 !important;
}

.cx-payment-preview {
    align-self: stretch !important;
    min-height: 360px !important;
    margin: 32px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(255,250,242,0.36) !important;
    background:
        linear-gradient(135deg, rgba(255,250,242,0.26), rgba(183,138,63,0.18)),
        repeating-linear-gradient(135deg, rgba(255,255,255,0.08) 0 1px, transparent 1px 18px) !important;
    box-shadow: 0 26px 54px rgba(18,14,10,0.24) !important;
}

.cx-payment-preview::before,
.cx-payment-image-slot::before {
    content: "" !important;
    position: absolute !important;
    inset: 18px !important;
    border: 1px dashed rgba(255,250,242,0.46) !important;
    border-radius: inherit !important;
    pointer-events: none !important;
}

.cx-payment-preview,
.cx-payment-image-slot {
    position: relative !important;
}

.cx-payment-preview-img,
.cx-payment-image-slot img {
    position: relative !important;
    z-index: 1 !important;
}

.cx-payment-layout {
    grid-template-columns: minmax(340px, 0.42fr) minmax(0, 1fr) !important;
    gap: 28px !important;
    margin-top: 34px !important;
}

.cx-payment-body .cx-bank-card {
    top: 88px !important;
    padding: clamp(24px, 3vw, 34px) !important;
    border-radius: 24px !important;
    background:
        linear-gradient(180deg, rgba(255,250,242,0.98), rgba(244,230,207,0.96)) !important;
    border: 1px solid rgba(75,50,31,0.16) !important;
    box-shadow: 0 24px 58px rgba(49,34,22,0.14) !important;
    color: var(--pay-ink) !important;
}

.cx-payment-body .cx-bank-card::before {
    height: 5px !important;
    background: linear-gradient(90deg, var(--pay-ink), var(--pay-sage), var(--pay-gold)) !important;
}

.cx-payment-body .cx-bank-card .cx-kicker {
    color: #7a5a29 !important;
    font-size: 11px !important;
}

.cx-payment-body .cx-bank-card h2 {
    margin: 10px 0 22px !important;
    color: var(--pay-ink) !important;
    font-size: clamp(28px, 3vw, 38px) !important;
}

.cx-payment-body .cx-bank-card .cx-bank-line {
    grid-template-columns: 44px minmax(0, 0.9fr) minmax(130px, 1fr) !important;
    margin-bottom: 12px !important;
    padding: 14px !important;
    border: 1px solid rgba(75,50,31,0.10) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,0.62) !important;
    box-shadow: none !important;
}

.cx-payment-body .cx-bank-card .cx-bank-line span:not(.cx-line-icon) {
    color: #66584c !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: 1.6px !important;
    line-height: 1.25 !important;
}

.cx-payment-body .cx-bank-card .cx-bank-line strong {
    min-width: 0 !important;
    color: var(--pay-ink) !important;
    font-size: clamp(16px, 1.5vw, 20px) !important;
    line-height: 1.2 !important;
    overflow-wrap: anywhere !important;
    text-align: right !important;
}

.cx-payment-body .cx-bank-card .cx-bank-line:nth-of-type(2) .cx-line-icon {
    background: var(--pay-sage) !important;
}

.cx-payment-body .cx-bank-card .cx-bank-line:nth-of-type(3) .cx-line-icon {
    background: var(--pay-gold) !important;
}

.cx-payment-body .cx-bank-card .cx-bank-line:nth-of-type(4) .cx-line-icon {
    background: var(--pay-rose) !important;
}

.cx-payment-body .cx-bank-card .cx-bank-note {
    margin: 20px 0 22px !important;
    padding: 18px 20px !important;
    border-radius: 18px !important;
    color: #3f352d !important;
    background: linear-gradient(135deg, #ffffff, #f5ead7) !important;
    border: 1px solid rgba(183,138,63,0.16) !important;
}

.cx-payment-body .cx-bank-card #copyAccountBtn {
    min-height: 54px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, var(--pay-sage), var(--pay-coffee)) !important;
    color: #fffaf2 !important;
    letter-spacing: 1.3px !important;
    box-shadow: 0 18px 36px rgba(49,91,80,0.22) !important;
}

.cx-payment-body .cx-upload-card {
    border-radius: 24px !important;
    background:
        linear-gradient(180deg, rgba(255,250,242,0.98), rgba(248,242,231,0.96)) !important;
    border: 1px solid rgba(49,91,80,0.16) !important;
}

.cx-payment-body .cx-upload-card,
.cx-payment-body .cx-upload-card *,
.cx-payment-body .cx-selected-order,
.cx-payment-body .cx-selected-order *,
.cx-payment-body .cx-payment-form,
.cx-payment-body .cx-payment-form * {
    color: var(--pay-ink) !important;
}

.cx-payment-body .cx-payment-status-grid {
    gap: 14px !important;
}

.cx-payment-body .cx-payment-status-card {
    min-height: 118px !important;
    border-radius: 18px !important;
    box-shadow: inset 0 -1px 0 rgba(22,18,13,0.05) !important;
}

.cx-payment-body .cx-payment-status-card span {
    color: #675b4f !important;
}

.cx-payment-body .cx-payment-status-card strong {
    color: var(--pay-ink) !important;
}

.cx-payment-image-slot {
    height: clamp(190px, 19vw, 285px) !important;
    border-radius: 22px !important;
    border: 1px solid rgba(49,91,80,0.18) !important;
    background:
        linear-gradient(135deg, rgba(49,91,80,0.12), rgba(183,138,63,0.22)),
        #f8efe0 !important;
}

.cx-payment-image-slot::before {
    border-color: rgba(49,91,80,0.34) !important;
}

.cx-payment-body .cx-icon-wrap,
.cx-payment-body .cx-file-icon {
    background: var(--pay-sage) !important;
    color: #fffaf2 !important;
}

.cx-payment-body .cx-icon-wrap *,
.cx-payment-body .cx-file-icon * {
    color: inherit !important;
    stroke: currentColor !important;
}

.cx-payment-body .cx-section-heading h2 {
    color: var(--pay-ink) !important;
}

.cx-payment-body .cx-section-heading .cx-kicker,
.cx-payment-body .cx-payment-form label {
    color: #7a5a29 !important;
}

.cx-payment-body .cx-selected-order {
    background: linear-gradient(135deg, #ffffff, #eef6f1) !important;
    border: 1px solid rgba(49,91,80,0.15) !important;
}

.cx-payment-body .cx-selected-order-link {
    color: var(--pay-sage) !important;
}

.cx-payment-body .cx-payment-timeline {
    background: #ffffff !important;
    border-color: rgba(75,50,31,0.10) !important;
}

.cx-payment-body .cx-payment-timeline span {
    background: #f0e6d5 !important;
    color: #5f5348 !important;
}

.cx-payment-body .cx-payment-timeline span.active {
    background: linear-gradient(135deg, var(--pay-sage), var(--pay-gold)) !important;
    color: #fffaf2 !important;
}

.cx-payment-body .cx-payment-form select,
.cx-payment-body .cx-file-drop {
    border-radius: 18px !important;
    border: 1px solid rgba(75,50,31,0.14) !important;
    background: #ffffff !important;
}

.cx-payment-body .cx-payment-form .cx-btn-dark {
    min-height: 54px !important;
    border-radius: 16px !important;
    background: linear-gradient(135deg, var(--pay-ink), var(--pay-sage)) !important;
    color: #fffaf2 !important;
}

@media (max-width: 980px) {
    .cx-payment-hero,
    .cx-payment-layout {
        grid-template-columns: 1fr !important;
    }

    .cx-payment-hero {
        background: linear-gradient(180deg, #fffaf2, #f4e6cf) !important;
    }

    .cx-payment-preview {
        margin-top: 0 !important;
    }
}

@media (max-width: 640px) {
    .cx-payment-hero .cx-hero-copy {
        padding: 32px 24px !important;
    }

    .cx-payment-body .cx-bank-card .cx-bank-line {
        grid-template-columns: 42px 1fr !important;
    }

    .cx-payment-body .cx-bank-card .cx-bank-line strong {
        grid-column: 2 !important;
        text-align: left !important;
    }
}

/* =========================================================
   Customer pages consistent palette repair
   ========================================================= */
.cx-orders-body,
.cx-payment-body,
.cx-checkout-body,
.cx-order-success-body,
.wishlist-page-wrapper,
.wishlist-page-wrapper.normal-page-wrapper {
    --krylo-ui-ink: #17110b;
    --krylo-ui-coffee: #4b321f;
    --krylo-ui-caramel: #9b6b2f;
    --krylo-ui-gold: #b78a3f;
    --krylo-ui-sage: #315b50;
    --krylo-ui-paper: #fffaf2;
    --krylo-ui-cream: #f3e4cc;
    --krylo-ui-line: rgba(75,50,31,0.16);
    background:
        linear-gradient(135deg, rgba(255,250,242,0.96), rgba(243,228,204,0.92)),
        radial-gradient(circle at 12% 16%, rgba(183,138,63,0.16), transparent 28%),
        radial-gradient(circle at 86% 10%, rgba(49,91,80,0.10), transparent 26%) !important;
    color: var(--krylo-ui-ink) !important;
}

.cx-checkout-hero,
.cx-payment-hero,
.cx-orders-hero,
.wishlist-page-wrapper .customer-page-hero,
.cx-order-success-page .cx-success-hero {
    border-radius: 28px !important;
    border: 1px solid var(--krylo-ui-line) !important;
    box-shadow: 0 28px 68px rgba(49,34,22,0.13) !important;
}

.cx-orders-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.42fr) !important;
    min-height: 390px !important;
    padding: clamp(34px, 5vw, 58px) !important;
    gap: clamp(24px, 4vw, 54px) !important;
    align-items: center !important;
    background:
        linear-gradient(90deg, rgba(75,50,31,0.94), rgba(75,50,31,0.82) 50%, rgba(155,107,47,0.74)),
        url('../images/order.png') right center / cover no-repeat !important;
    overflow: hidden !important;
}

.cx-orders-hero .cx-hero-copy {
    padding: 0 !important;
    background: transparent !important;
}

.cx-orders-hero .cx-kicker,
.cx-orders-hero .cx-hero-copy h1,
.cx-orders-hero .cx-hero-copy p:not(.cx-kicker) {
    color: #fffaf2 !important;
    text-shadow: 0 2px 18px rgba(0,0,0,0.20) !important;
}

.cx-orders-hero .cx-hero-copy h1 {
    font-size: clamp(52px, 6.6vw, 96px) !important;
    line-height: 0.98 !important;
}

.cx-orders-hero .cx-hero-copy p:not(.cx-kicker) {
    max-width: 680px !important;
    font-size: 18px !important;
    line-height: 1.65 !important;
}

.cx-order-stats-panel {
    width: 100% !important;
    padding: 0 !important;
    display: grid !important;
    gap: 16px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.cx-order-stats-panel div {
    min-height: 104px !important;
    padding: 22px 24px !important;
    border-radius: 20px !important;
    background: rgba(255,250,242,0.94) !important;
    border: 1px solid rgba(255,250,242,0.42) !important;
    box-shadow: 0 20px 44px rgba(22,17,11,0.18) !important;
}

.cx-order-stats-panel span {
    display: block !important;
    color: var(--krylo-ui-ink) !important;
    text-shadow: none !important;
    font-size: clamp(28px, 3vw, 42px) !important;
    line-height: 1 !important;
}

.cx-order-stats-panel small {
    margin-top: 10px !important;
    display: block !important;
    color: #7a5a29 !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

.cx-order-board,
.cx-checkout-main-card,
.cx-checkout-side-card,
.cx-bank-card,
.cx-upload-card,
.cx-success-card,
.wishlist-controls,
.wishlist-select-toolbar,
.wishlist-products .card,
.wishlist-empty-card,
.wishlist-tip-card {
    background: linear-gradient(180deg, rgba(255,250,242,0.98), rgba(248,241,230,0.96)) !important;
    border-color: var(--krylo-ui-line) !important;
    box-shadow: 0 22px 50px rgba(49,34,22,0.10) !important;
}

.cx-order-board .cx-section-heading h2,
.cx-order-card h3,
.cx-order-details strong,
.cx-tracking-box strong,
.cx-track-labels span {
    color: var(--krylo-ui-ink) !important;
}

.cx-order-card,
.cx-order-card:nth-child(3n + 1),
.cx-order-card:nth-child(3n + 2),
.cx-order-card:nth-child(3n) {
    background: linear-gradient(180deg, #fffaf2, #f4e6cf) !important;
}

.cx-order-card .cx-kicker,
.cx-order-details span,
.cx-tracking-box span,
.cx-tracking-box small {
    color: #6a5a4a !important;
}

.cx-payment-body .cx-payment-layout {
    grid-template-columns: minmax(330px, 0.38fr) minmax(0, 1fr) !important;
    gap: 20px !important;
    margin-top: 24px !important;
}

.cx-payment-body .cx-payment-status-grid {
    gap: 10px !important;
}

.cx-payment-body .cx-payment-status-card {
    min-height: 96px !important;
    padding: 16px !important;
}

.cx-payment-body .cx-payment-image-slot {
    margin: 14px 0 !important;
}

.cx-payment-body .cx-selected-order {
    margin: 12px 0 !important;
}

.cx-payment-body .cx-payment-timeline {
    width: 100% !important;
    margin: 14px 0 0 !important;
    padding: 10px !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 8px !important;
    background: rgba(255,250,242,0.86) !important;
    border: 1px solid var(--krylo-ui-line) !important;
}

.cx-payment-body .cx-payment-timeline span {
    min-height: 54px !important;
    padding: 10px 8px !important;
    display: grid !important;
    place-items: center !important;
    text-align: center !important;
    white-space: normal !important;
    border-radius: 14px !important;
    font-size: 11px !important;
    line-height: 1.15 !important;
}

.cx-btn-dark,
.checkout-btn,
.btn-gradient {
    background: linear-gradient(135deg, var(--krylo-ui-ink), var(--krylo-ui-coffee)) !important;
    color: #fffaf2 !important;
}

.cx-btn-light,
.btn-outline-dark {
    background: #fffaf2 !important;
    color: var(--krylo-ui-ink) !important;
    border-color: var(--krylo-ui-line) !important;
}

@media (max-width: 980px) {
    .cx-orders-hero,
    .cx-payment-body .cx-payment-layout {
        grid-template-columns: 1fr !important;
    }

    .cx-payment-body .cx-payment-timeline {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 620px) {
    .cx-payment-body .cx-payment-timeline {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   Final customer background + order readability lock
   ========================================================= */
body.cx-body,
body.cx-dashboard-body,
body.cx-cart-body,
body.cx-orders-body,
body.cx-payment-body,
body.cx-checkout-body,
body.cx-order-success-body,
body.cx-chat-body {
    background:
        linear-gradient(135deg, #fffaf2 0%, #f7ecda 52%, #efe0c5 100%) !important;
    background-color: #f7ecda !important;
    color: #17110b !important;
}

body.cx-body::before,
body.cx-body::after,
body.cx-dashboard-body::before,
body.cx-dashboard-body::after,
body.cx-cart-body::before,
body.cx-cart-body::after,
body.cx-orders-body::before,
body.cx-orders-body::after,
body.cx-payment-body::before,
body.cx-payment-body::after,
body.cx-checkout-body::before,
body.cx-checkout-body::after,
body.cx-order-success-body::before,
body.cx-order-success-body::after,
body.cx-chat-body::before,
body.cx-chat-body::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

.wishlist-page-wrapper,
.wishlist-page-wrapper.normal-page-wrapper {
    background:
        linear-gradient(135deg, #fffaf2 0%, #f7ecda 52%, #efe0c5 100%) !important;
    background-color: #f7ecda !important;
}

body.cx-orders-body .cx-orders-hero .cx-order-stats-panel div {
    background: #fffaf2 !important;
    border: 1px solid rgba(75,50,31,0.18) !important;
}

body.cx-orders-body .cx-orders-hero .cx-order-stats-panel div span,
body.cx-orders-body .cx-orders-hero .cx-order-stats-panel div small,
body.cx-orders-body .cx-orders-hero .cx-order-stats-panel span,
body.cx-orders-body .cx-orders-hero .cx-order-stats-panel small {
    color: #17110b !important;
    -webkit-text-fill-color: #17110b !important;
    text-shadow: none !important;
    opacity: 1 !important;
    filter: none !important;
}

body.cx-orders-body .cx-orders-hero .cx-order-stats-panel div small,
body.cx-orders-body .cx-orders-hero .cx-order-stats-panel small {
    color: #7a5a29 !important;
    -webkit-text-fill-color: #7a5a29 !important;
}

body.cx-orders-body .cx-orders-hero .cx-hero-copy h1,
body.cx-orders-body .cx-orders-hero .cx-hero-copy p,
body.cx-orders-body .cx-orders-hero .cx-hero-copy .cx-kicker {
    color: #fffaf2 !important;
    -webkit-text-fill-color: #fffaf2 !important;
    opacity: 1 !important;
}

/* =========================================================
   Customer fashion store black/white theme lock
   ========================================================= */
:root {
    --fashion-black: #050505;
    --fashion-ink: #151515;
    --fashion-charcoal: #2c2c2c;
    --fashion-line: #dedede;
    --fashion-soft: #f5f5f5;
    --fashion-white: #ffffff;
}

body.index-fashion-home,
body.cx-body,
body.cx-dashboard-body,
body.cx-cart-body,
body.cx-orders-body,
body.cx-payment-body,
body.cx-checkout-body,
body.cx-order-success-body,
body.cx-chat-body,
.wishlist-page-wrapper,
.wishlist-page-wrapper.normal-page-wrapper {
    --krylo-ui-ink: var(--fashion-black);
    --krylo-ui-coffee: var(--fashion-ink);
    --krylo-ui-caramel: var(--fashion-charcoal);
    --krylo-ui-gold: var(--fashion-black);
    --krylo-ui-sage: var(--fashion-charcoal);
    --krylo-ui-paper: var(--fashion-white);
    --krylo-ui-cream: var(--fashion-soft);
    --krylo-ui-line: var(--fashion-line);
    background: var(--fashion-white) !important;
    background-color: var(--fashion-white) !important;
    color: var(--fashion-ink) !important;
}

body.index-fashion-home::before,
body.index-fashion-home::after {
    content: none !important;
    display: none !important;
}

.index-fashion-home .krylo-customer-nav,
body.cx-body .krylo-customer-nav,
body.cx-dashboard-body .krylo-customer-nav,
body.cx-cart-body .krylo-customer-nav,
body.cx-orders-body .krylo-customer-nav,
body.cx-payment-body .krylo-customer-nav,
body.cx-checkout-body .krylo-customer-nav,
body.cx-order-success-body .krylo-customer-nav,
body.cx-chat-body .krylo-customer-nav,
.krylo-customer-nav {
    background: rgba(255,255,255,0.96) !important;
    border-bottom: 1px solid var(--fashion-line) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,0.06) !important;
}

.index-fashion-home .krylo-customer-nav .logo,
.krylo-customer-nav .logo {
    background: none !important;
    color: var(--fashion-black) !important;
    -webkit-text-fill-color: var(--fashion-black) !important;
    letter-spacing: 8px !important;
}

.index-fashion-home .krylo-customer-nav .nav-links a,
.krylo-customer-nav .nav-links a {
    color: var(--fashion-black) !important;
}

.index-fashion-home .hero-actions button,
.index-fashion-home .promo button,
.index-fashion-home .bottom button,
.index-fashion-home .search-form button,
.checkout-btn,
.small-btn,
.cx-btn,
.cx-btn-dark,
.cx-btn-light,
.btn-gradient,
.btn-outline-dark,
.compare-clear-btn,
.compare-select,
.products .card .card-actions .compare-select.compare-action-btn,
.wishlist-page-wrapper .hero-actions button,
.wishlist-page-wrapper .card-actions a,
.wishlist-page-wrapper .wishlist-select-toolbar button,
.wishlist-page-wrapper .wishlist-empty-actions a,
.cart-checkout-submit {
    opacity: 1 !important;
    visibility: visible !important;
    color: var(--fashion-white) !important;
    -webkit-text-fill-color: var(--fashion-white) !important;
    background: var(--fashion-black) !important;
    border: 1px solid var(--fashion-black) !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-weight: 900 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
}

.index-fashion-home .hero-actions .outline,
.cx-btn-light,
.btn-outline-dark,
.compare-clear-btn,
.wishlist-page-wrapper .hero-actions .btn-outline-dark,
.wishlist-page-wrapper .wishlist-empty-actions .cx-btn-light {
    color: var(--fashion-black) !important;
    -webkit-text-fill-color: var(--fashion-black) !important;
    background: var(--fashion-white) !important;
    border: 1px solid var(--fashion-black) !important;
}

.checkout-btn:hover,
.small-btn:hover,
.cx-btn:hover,
.btn-gradient:hover,
.btn-outline-dark:hover,
.compare-clear-btn:hover,
.compare-select:hover,
.products .card .card-actions .compare-select.compare-action-btn:hover,
.wishlist-page-wrapper .card-actions a:hover,
.cart-checkout-submit:hover {
    color: var(--fashion-white) !important;
    -webkit-text-fill-color: var(--fashion-white) !important;
    background: var(--fashion-charcoal) !important;
    border-color: var(--fashion-charcoal) !important;
    transform: translateY(-1px) !important;
}

.checkout-btn:disabled,
.cx-btn:disabled,
.cart-checkout-submit:disabled,
.disabled-btn {
    color: #8b8b8b !important;
    -webkit-text-fill-color: #8b8b8b !important;
    background: #eeeeee !important;
    border-color: #d8d8d8 !important;
    cursor: not-allowed !important;
}

.index-fashion-home .tools input,
.index-fashion-home .tools select,
.wishlist-controls select,
.cx-payment-body input,
.cx-payment-body select,
.cx-payment-body textarea,
.cx-checkout-body input,
.cx-checkout-body select,
.cx-checkout-body textarea {
    background: var(--fashion-white) !important;
    color: var(--fashion-black) !important;
    border: 1px solid var(--fashion-line) !important;
}

.index-fashion-home .tools select option,
.wishlist-controls select option {
    background: var(--fashion-white) !important;
    color: var(--fashion-black) !important;
}

.index-fashion-home .fashion-hero,
.index-fashion-home .fashion-hero-panel,
.index-fashion-home .fashion-usp-bar,
.index-fashion-home .index-promo-strip,
.index-fashion-home .shop-filter-section,
.index-fashion-home .fashion-category-cards .department-card,
.index-fashion-home .arrival-card,
.index-fashion-home .catalog-summary,
.index-fashion-home .compare-toolbar,
.index-fashion-home .products .card,
.wishlist-products .card,
.wishlist-controls,
.wishlist-select-toolbar,
.wishlist-empty-card,
.wishlist-tip-card,
.cx-cart-layout,
.cx-cart-card,
.cx-summary-card,
.cx-empty-card,
.cx-selection-toolbar,
.cx-addon-section,
.cx-addon-card,
.cx-order-board,
.cx-order-card,
.cx-checkout-main-card,
.cx-checkout-side-card,
.cx-bank-card,
.cx-upload-card,
.cx-success-card,
.cx-payment-status-card,
.krylo-order-context-card {
    background: var(--fashion-white) !important;
    border: 1px solid var(--fashion-line) !important;
    box-shadow: 0 16px 34px rgba(0,0,0,0.07) !important;
}

.index-fashion-home .products .card,
.wishlist-products .card {
    border-radius: 0 !important;
    min-height: 420px !important;
    color: var(--fashion-black) !important;
    display: flex !important;
    flex-direction: column !important;
}

.index-fashion-home .products .card:hover,
.wishlist-products .card:hover,
.cx-cart-card:hover,
.cx-summary-card:hover,
.cx-addon-card:hover {
    border-color: var(--fashion-black) !important;
    box-shadow: 0 22px 44px rgba(0,0,0,0.12) !important;
}

.index-fashion-home .product-img,
.wishlist-products .product-img,
.cx-product-image,
.cx-addon-card img,
.dashboard-recommend-card img {
    background: var(--fashion-soft) !important;
    border: 1px solid #ececec !important;
    border-radius: 0 !important;
}

.index-fashion-home .product-img img,
.wishlist-products .product-img img {
    min-height: 180px !important;
    max-height: 210px !important;
    padding: 14px !important;
}

.index-fashion-home .card h3,
.wishlist-products .card h3,
.cx-cart-info h3,
.cx-section-heading h2,
.cx-summary-card h2,
.cx-addon-card strong,
.index-section-title h2,
.section-heading h2 {
    color: var(--fashion-black) !important;
    -webkit-text-fill-color: var(--fashion-black) !important;
}

.index-fashion-home .category,
.index-fashion-home .rating,
.index-fashion-home .tagline,
.wishlist-products .category,
.wishlist-products .rating,
.cx-cart-meta span,
.cx-summary-line span,
.cx-kicker,
.status,
.status-purple,
.catalog-summary p,
.compare-toolbar span,
.arrival-copy small {
    color: #666666 !important;
    -webkit-text-fill-color: #666666 !important;
}

.index-fashion-home .badge,
.wishlist-products .badge,
.cx-pill,
.wishlist-stock-badge,
.cx-icon-wrap {
    background: var(--fashion-black) !important;
    color: var(--fashion-white) !important;
    -webkit-text-fill-color: var(--fashion-white) !important;
    border: 1px solid var(--fashion-black) !important;
}

.index-fashion-home .heart {
    background: var(--fashion-white) !important;
    color: var(--fashion-black) !important;
    -webkit-text-fill-color: var(--fashion-black) !important;
    border: 1px solid var(--fashion-black) !important;
}

.index-fashion-home .card-actions,
.wishlist-products .card-actions {
    margin-top: auto !important;
}

.index-fashion-home .card-actions .checkout-btn,
.wishlist-products .card-actions .checkout-btn,
.wishlist-products .wishlist-remove {
    flex: 1 1 145px !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    text-align: center !important;
}

.compare-select input,
.products .card .card-actions .compare-select.compare-action-btn input,
.cx-check-select input,
.cx-selection-toolbar input,
.wishlist-select-check input {
    accent-color: var(--fashion-black) !important;
}

.compare-select:has(input:checked),
.products .card .card-actions .compare-select.compare-action-btn:has(input:checked),
.cx-check-select:has(input:checked) {
    background: var(--fashion-white) !important;
    color: var(--fashion-black) !important;
    -webkit-text-fill-color: var(--fashion-black) !important;
    border-color: var(--fashion-black) !important;
}

.cx-cart-hero,
.wishlist-page-wrapper .customer-page-hero,
.cx-checkout-hero,
.cx-payment-hero,
.cx-orders-hero,
.cx-order-success-page .cx-success-hero {
    background-color: var(--fashion-black) !important;
    border: 1px solid var(--fashion-black) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.cx-cart-hero .cx-kicker,
.cx-cart-hero h1,
.cx-cart-hero p,
.wishlist-page-wrapper .customer-page-hero .status-purple,
.wishlist-page-wrapper .customer-page-hero h1,
.wishlist-page-wrapper .customer-page-hero h2,
.wishlist-page-wrapper .customer-page-hero .tagline {
    color: var(--fashion-white) !important;
    -webkit-text-fill-color: var(--fashion-white) !important;
    text-shadow: none !important;
}

.cx-cart-visual,
.wishlist-hero-visual,
.wishlist-empty-visual,
.cx-empty-visual {
    background: rgba(255,255,255,0.12) !important;
    border: 1px solid rgba(255,255,255,0.35) !important;
    border-radius: 0 !important;
}

.cx-cart-selection-toolbar {
    background: var(--fashion-black) !important;
    border-color: var(--fashion-black) !important;
}

.cx-cart-selection-toolbar label,
.cx-cart-selection-toolbar span {
    color: var(--fashion-white) !important;
    -webkit-text-fill-color: var(--fashion-white) !important;
}

.cx-save-link,
.cx-remove-link,
.danger-link {
    color: var(--fashion-black) !important;
    -webkit-text-fill-color: var(--fashion-black) !important;
    background: var(--fashion-white) !important;
    border: 1px solid var(--fashion-black) !important;
}

.cx-remove-link,
.wishlist-remove {
    color: var(--fashion-white) !important;
    -webkit-text-fill-color: var(--fashion-white) !important;
    background: var(--fashion-black) !important;
}

.checkout-progress span,
.cx-payment-timeline span {
    background: var(--fashion-soft) !important;
    color: var(--fashion-black) !important;
}

.checkout-progress span.active,
.cx-payment-timeline span.active {
    background: var(--fashion-black) !important;
    color: var(--fashion-white) !important;
}

.cx-summary-note,
.cx-message,
.cx-stock-alert {
    background: var(--fashion-soft) !important;
    color: var(--fashion-black) !important;
    border-color: var(--fashion-line) !important;
}

body.cx-orders-body .cx-order-board,
body.cx-orders-body .cx-order-card,
body.cx-orders-body .cx-order-card:nth-child(3n + 1),
body.cx-orders-body .cx-order-card:nth-child(3n + 2),
body.cx-orders-body .cx-order-card:nth-child(3n),
body.cx-orders-body .cx-tracking-box,
body.cx-orders-body .cx-order-details div,
body.cx-orders-body .cx-order-product-tile,
body.cx-orders-body .cx-empty-card {
    background: var(--fashion-white) !important;
    color: var(--fashion-black) !important;
    border-color: var(--fashion-line) !important;
    box-shadow: 0 16px 34px rgba(0,0,0,0.07) !important;
}

body.cx-orders-body .cx-order-card h3,
body.cx-orders-body .cx-order-details strong,
body.cx-orders-body .cx-tracking-box strong,
body.cx-orders-body .cx-track-labels span,
body.cx-orders-body .cx-order-product-tile small {
    color: var(--fashion-black) !important;
    -webkit-text-fill-color: var(--fashion-black) !important;
}

body.cx-orders-body .cx-order-card .cx-kicker,
body.cx-orders-body .cx-order-details span,
body.cx-orders-body .cx-tracking-box span,
body.cx-orders-body .cx-tracking-box small,
body.cx-orders-body .cx-order-product-tile span {
    color: #666666 !important;
    -webkit-text-fill-color: #666666 !important;
}

body.cx-orders-body .cx-order-product-tile img,
body.cx-orders-body .cx-order-product-tile span,
body.cx-orders-body .cx-order-placeholder,
body.cx-orders-body .cx-order-more {
    background: var(--fashion-soft) !important;
    border-color: var(--fashion-line) !important;
}

body.cx-orders-body .cx-status-pill,
body.cx-orders-body .cx-order-filters a.active,
body.cx-orders-body .cx-mini-timeline span.active {
    background: var(--fashion-black) !important;
    color: var(--fashion-white) !important;
    -webkit-text-fill-color: var(--fashion-white) !important;
    border-color: var(--fashion-black) !important;
}

body.cx-orders-body .cx-order-filters a,
body.cx-orders-body .cx-mini-timeline span {
    background: var(--fashion-white) !important;
    color: var(--fashion-black) !important;
    -webkit-text-fill-color: var(--fashion-black) !important;
    border-color: var(--fashion-line) !important;
}

@media (max-width: 760px) {
    .index-fashion-home .card-actions .checkout-btn,
    .wishlist-products .card-actions .checkout-btn,
    .wishlist-products .wishlist-remove,
    .products .card .card-actions .compare-select.compare-action-btn {
        flex-basis: 100% !important;
        width: 100% !important;
    }
}

/* =========================================================
   Final UI-only customer black/white lock
   This layer keeps every existing image source untouched.
   ========================================================= */
body.index-fashion-home,
body.cx-body,
body.cx-dashboard-body,
body.cx-cart-body,
body.cx-wishlist-body,
body.cx-orders-body,
body.cx-payment-body,
body.cx-checkout-body,
body.cx-order-success-body,
body.cx-chat-body,
body.cx-body .wishlist-page-wrapper {
    background: #ffffff !important;
    color: #111111 !important;
}

body.index-fashion-home *,
body.cx-body *,
body.cx-dashboard-body *,
body.cx-cart-body *,
body.cx-wishlist-body *,
body.cx-orders-body *,
body.cx-payment-body *,
body.cx-checkout-body *,
body.cx-order-success-body *,
body.cx-chat-body * {
    text-shadow: none !important;
}

body.index-fashion-home .krylo-customer-nav,
body.cx-body .krylo-customer-nav,
body.cx-dashboard-body .krylo-customer-nav,
body.cx-cart-body .krylo-customer-nav,
body.cx-wishlist-body .krylo-customer-nav,
body.cx-orders-body .krylo-customer-nav,
body.cx-payment-body .krylo-customer-nav,
body.cx-checkout-body .krylo-customer-nav,
body.cx-order-success-body .krylo-customer-nav,
body.cx-chat-body .krylo-customer-nav {
    background: #ffffff !important;
    border-bottom: 1px solid #dddddd !important;
    color: #111111 !important;
}

body.index-fashion-home .krylo-customer-nav *,
body.cx-body .krylo-customer-nav *,
body.cx-dashboard-body .krylo-customer-nav *,
body.cx-cart-body .krylo-customer-nav *,
body.cx-wishlist-body .krylo-customer-nav *,
body.cx-orders-body .krylo-customer-nav *,
body.cx-payment-body .krylo-customer-nav *,
body.cx-checkout-body .krylo-customer-nav *,
body.cx-order-success-body .krylo-customer-nav *,
body.cx-chat-body .krylo-customer-nav * {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    stroke: #111111 !important;
}

body.index-fashion-home .card,
body.cx-wishlist-body .card,
body.cx-cart-body .cx-cart-card,
body.cx-cart-body .cx-summary-card,
body.cx-cart-body .cx-addon-card,
body.cx-cart-body .cx-addon-section,
body.cx-orders-body .cx-order-board,
body.cx-orders-body .cx-order-card,
body.cx-orders-body .cx-order-details div,
body.cx-orders-body .cx-tracking-box,
body.cx-orders-body .cx-order-product-tile,
body.cx-payment-body .cx-bank-card,
body.cx-payment-body .cx-upload-card,
body.cx-payment-body .cx-payment-status-card,
body.cx-payment-body .cx-selected-order,
body.cx-checkout-body .cx-checkout-main-card,
body.cx-checkout-body .cx-checkout-side-card,
body.cx-order-success-body .cx-success-card,
body.cx-dashboard-body .dashboard-panel,
body.cx-dashboard-body .dashboard-stat-card,
body.cx-dashboard-body .dashboard-recommend-card,
body.cx-dashboard-body .quick-link-box,
body.cx-chat-body .chat-card,
body.cx-chat-body .krylo-order-context-card,
body.cx-wishlist-body .wishlist-controls,
body.cx-wishlist-body .wishlist-select-toolbar,
body.cx-wishlist-body .wishlist-empty-card,
body.cx-wishlist-body .wishlist-tip-card {
    background: #ffffff !important;
    color: #111111 !important;
    border: 1px solid #dedede !important;
    box-shadow: 0 14px 32px rgba(0,0,0,0.07) !important;
}

body.cx-orders-body .cx-order-card,
body.cx-orders-body .cx-order-card:nth-child(3n + 1),
body.cx-orders-body .cx-order-card:nth-child(3n + 2),
body.cx-orders-body .cx-order-card:nth-child(3n) {
    background: #ffffff !important;
}

body.index-fashion-home .product-img,
body.cx-wishlist-body .product-img,
body.cx-cart-body .cx-product-image,
body.cx-orders-body .cx-order-product-tile img,
body.cx-orders-body .cx-order-product-tile span,
body.cx-checkout-body .cx-checkout-product-img,
body.cx-payment-body .cx-selected-product-mini,
body.cx-dashboard-body .dashboard-recommend-card img {
    background: #f5f5f5 !important;
    border: 1px solid #e8e8e8 !important;
}

body.index-fashion-home h1,
body.index-fashion-home h2,
body.index-fashion-home h3,
body.index-fashion-home strong,
body.cx-body h1,
body.cx-body h2,
body.cx-body h3,
body.cx-body strong,
body.cx-dashboard-body h1,
body.cx-dashboard-body h2,
body.cx-dashboard-body h3,
body.cx-dashboard-body strong,
body.cx-cart-body h1,
body.cx-cart-body h2,
body.cx-cart-body h3,
body.cx-cart-body strong,
body.cx-wishlist-body h1,
body.cx-wishlist-body h2,
body.cx-wishlist-body h3,
body.cx-wishlist-body strong,
body.cx-orders-body h1,
body.cx-orders-body h2,
body.cx-orders-body h3,
body.cx-orders-body strong,
body.cx-payment-body h1,
body.cx-payment-body h2,
body.cx-payment-body h3,
body.cx-payment-body strong,
body.cx-checkout-body h1,
body.cx-checkout-body h2,
body.cx-checkout-body h3,
body.cx-checkout-body strong,
body.cx-order-success-body h1,
body.cx-order-success-body h2,
body.cx-order-success-body h3,
body.cx-order-success-body strong,
body.cx-chat-body h1,
body.cx-chat-body h2,
body.cx-chat-body h3,
body.cx-chat-body strong {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

body.index-fashion-home p,
body.index-fashion-home span,
body.index-fashion-home small,
body.index-fashion-home label,
body.cx-body p,
body.cx-body span,
body.cx-body small,
body.cx-body label,
body.cx-dashboard-body p,
body.cx-dashboard-body span,
body.cx-dashboard-body small,
body.cx-dashboard-body label,
body.cx-cart-body p,
body.cx-cart-body span,
body.cx-cart-body small,
body.cx-cart-body label,
body.cx-wishlist-body p,
body.cx-wishlist-body span,
body.cx-wishlist-body small,
body.cx-wishlist-body label,
body.cx-orders-body p,
body.cx-orders-body span,
body.cx-orders-body small,
body.cx-orders-body label,
body.cx-payment-body p,
body.cx-payment-body span,
body.cx-payment-body small,
body.cx-payment-body label,
body.cx-checkout-body p,
body.cx-checkout-body span,
body.cx-checkout-body small,
body.cx-checkout-body label,
body.cx-order-success-body p,
body.cx-order-success-body span,
body.cx-order-success-body small,
body.cx-order-success-body label,
body.cx-chat-body p,
body.cx-chat-body span,
body.cx-chat-body small,
body.cx-chat-body label {
    color: #555555 !important;
    -webkit-text-fill-color: #555555 !important;
}

body.index-fashion-home .checkout-btn,
body.index-fashion-home .small-btn,
body.index-fashion-home button,
body.index-fashion-home .compare-select,
body.cx-body .cx-btn,
body.cx-body .checkout-btn,
body.cx-body button,
body.cx-dashboard-body .dashboard-main-btn,
body.cx-dashboard-body .dashboard-outline-btn,
body.cx-dashboard-body .small-action-btn,
body.cx-cart-body .cx-btn,
body.cx-cart-body button,
body.cx-cart-body .cx-save-link,
body.cx-cart-body .cx-remove-link,
body.cx-wishlist-body .cx-btn,
body.cx-wishlist-body .checkout-btn,
body.cx-wishlist-body button,
body.cx-wishlist-body .wishlist-remove,
body.cx-orders-body .cx-btn,
body.cx-orders-body .cx-order-filters a,
body.cx-payment-body .cx-btn,
body.cx-payment-body button,
body.cx-checkout-body .cx-btn,
body.cx-checkout-body button,
body.cx-order-success-body .cx-btn,
body.cx-chat-body .cx-btn,
body.cx-chat-body button {
    opacity: 1 !important;
    visibility: visible !important;
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid #111111 !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

body.index-fashion-home .outline,
body.index-fashion-home .compare-clear-btn,
body.cx-body .cx-btn-light,
body.cx-dashboard-body .dashboard-outline-btn,
body.cx-cart-body .cx-btn-light,
body.cx-cart-body .cx-save-link,
body.cx-wishlist-body .btn-outline-dark,
body.cx-wishlist-body .cx-btn-light,
body.cx-orders-body .cx-btn-light,
body.cx-orders-body .cx-order-filters a,
body.cx-checkout-body .cx-btn-light,
body.cx-order-success-body .cx-btn-light {
    background: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: 1px solid #111111 !important;
}

body.index-fashion-home input,
body.index-fashion-home select,
body.cx-body input,
body.cx-body select,
body.cx-body textarea,
body.cx-dashboard-body input,
body.cx-dashboard-body select,
body.cx-dashboard-body textarea,
body.cx-cart-body input,
body.cx-cart-body select,
body.cx-cart-body textarea,
body.cx-wishlist-body input,
body.cx-wishlist-body select,
body.cx-wishlist-body textarea,
body.cx-orders-body input,
body.cx-orders-body select,
body.cx-orders-body textarea,
body.cx-payment-body input,
body.cx-payment-body select,
body.cx-payment-body textarea,
body.cx-checkout-body input,
body.cx-checkout-body select,
body.cx-checkout-body textarea,
body.cx-chat-body input,
body.cx-chat-body select,
body.cx-chat-body textarea {
    background: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: 1px solid #cccccc !important;
}

body.cx-checkout-body .cx-checkout-table,
body.cx-checkout-body .cx-checkout-table th,
body.cx-checkout-body .cx-checkout-table td,
body.cx-dashboard-body .dashboard-table,
body.cx-dashboard-body .dashboard-table th,
body.cx-dashboard-body .dashboard-table td {
    background: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border-color: #dedede !important;
}

body.cx-checkout-body .cx-checkout-table th,
body.cx-dashboard-body .dashboard-table th {
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body.index-fashion-home .badge,
body.cx-wishlist-body .badge,
body.cx-wishlist-body .wishlist-stock-badge,
body.cx-cart-body .cx-pill,
body.cx-orders-body .cx-status-pill,
body.cx-orders-body .cx-order-filters a.active,
body.cx-orders-body .cx-mini-timeline span.active,
body.cx-payment-body .cx-payment-timeline span.active,
body.cx-checkout-body .checkout-progress span.active,
body.cx-cart-body .checkout-progress span.active,
body.cx-cart-body .cx-icon-wrap,
body.cx-orders-body .cx-icon-wrap,
body.cx-payment-body .cx-icon-wrap,
body.cx-checkout-body .cx-icon-wrap,
body.cx-wishlist-body .wishlist-tip-icon,
body.cx-wishlist-body .wishlist-action-icon {
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #111111 !important;
}

body.index-fashion-home .heart,
body.cx-cart-body .checkout-progress span,
body.cx-payment-body .cx-payment-timeline span,
body.cx-checkout-body .checkout-progress span,
body.cx-orders-body .cx-mini-timeline span {
    background: #f5f5f5 !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border-color: #dedede !important;
}

body.index-fashion-home img,
body.cx-body img,
body.cx-dashboard-body img,
body.cx-cart-body img,
body.cx-wishlist-body img,
body.cx-orders-body img,
body.cx-payment-body img,
body.cx-checkout-body img,
body.cx-order-success-body img,
body.cx-chat-body img {
    opacity: 1 !important;
    visibility: visible !important;
}

body.cx-cart-body .cx-hero h1,
body.cx-cart-body .cx-hero p,
body.cx-wishlist-body .customer-page-hero h1,
body.cx-wishlist-body .customer-page-hero h2,
body.cx-wishlist-body .customer-page-hero p,
body.cx-orders-body .cx-hero h1,
body.cx-orders-body .cx-hero p,
body.cx-payment-body .cx-hero h1,
body.cx-payment-body .cx-hero p,
body.cx-checkout-body .cx-hero h1,
body.cx-checkout-body .cx-hero p,
body.cx-order-success-body .cx-hero h1,
body.cx-order-success-body .cx-hero p {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* =========================================================
   Index page image placeholder + readable editorial sections
   ========================================================= */
body.index-fashion-home .fashion-hero-panel {
    min-height: 420px !important;
    background-image:
        linear-gradient(180deg, rgba(0,0,0,0.12), rgba(0,0,0,0.82)),
        url('../images/ban14.png') !important;
    background-size: cover !important;
    background-position: center !important;
    border: 1px solid #111111 !important;
    box-shadow: 0 26px 60px rgba(0,0,0,0.16) !important;
}

body.index-fashion-home .fashion-hero-panel::after {
    content: "assets/images/ban14.png" !important;
    position: absolute !important;
    top: 22px !important;
    right: 22px !important;
    z-index: 2 !important;
    padding: 8px 10px !important;
    background: rgba(255,255,255,0.92) !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: 1px solid #ffffff !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}

body.index-fashion-home .fashion-hero-panel span,
body.index-fashion-home .fashion-hero-panel strong,
body.index-fashion-home .fashion-hero-panel p,
body.index-fashion-home .mood-card span,
body.index-fashion-home .mood-card h3,
body.index-fashion-home .mood-card p,
body.index-fashion-home .department-card span,
body.index-fashion-home .department-card strong,
body.index-fashion-home .department-card small {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 3px 16px rgba(0,0,0,0.72) !important;
}

body.index-fashion-home .fashion-hero-panel span,
body.index-fashion-home .mood-card span,
body.index-fashion-home .department-card span {
    color: #f1f1f1 !important;
    -webkit-text-fill-color: #f1f1f1 !important;
    opacity: 1 !important;
}

body.index-fashion-home .mood-card::before,
body.index-fashion-home .department-card::before {
    background: linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.88)) !important;
}

body.index-fashion-home .mood-card::after,
body.index-fashion-home .department-card::after {
    content: "" !important;
    position: absolute !important;
    inset: 20px !important;
    border: 1px solid rgba(255,255,255,0.58) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

body.index-fashion-home .products {
    padding: 18px !important;
    background: #f4f4f4 !important;
    border: 1px solid #e1e1e1 !important;
}

body.index-fashion-home .products .card {
    background: #ffffff !important;
    border: 2px solid #111111 !important;
    box-shadow: 8px 8px 0 #111111 !important;
}

body.index-fashion-home .products .card:hover {
    transform: translate(-3px, -6px) !important;
    box-shadow: 12px 12px 0 #111111 !important;
}

body.index-fashion-home .products .card .product-img {
    background:
        linear-gradient(135deg, #ffffff 0%, #f2f2f2 100%) !important;
    border-bottom: 2px solid #111111 !important;
}

body.index-fashion-home .products .card .category,
body.index-fashion-home .products .card .rating {
    color: #555555 !important;
    -webkit-text-fill-color: #555555 !important;
}

body.index-fashion-home .products .card h3,
body.index-fashion-home .products .card .bottom strong {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

body.index-fashion-home .products .card .checkout-btn,
body.index-fashion-home .products .card .compare-select.compare-action-btn {
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid #111111 !important;
}

body.index-fashion-home .products .card .compare-select.compare-action-btn:has(input:checked) {
    background: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: 1px solid #111111 !important;
}

/* =========================================================
   Index final polish: restore images, visible compare, gold accents
   ========================================================= */
body.index-fashion-home {
    --fashion-gold: #c9a13d;
    --fashion-gold-dark: #9f761c;
    --fashion-gold-soft: #fff7dc;
}

body.index-fashion-home .fashion-hero-panel {
    background-image:
        linear-gradient(180deg, rgba(0,0,0,0.16), rgba(0,0,0,0.84)),
        url('../images/ban14.png') !important;
}

body.index-fashion-home .mood-large {
    background-image:
        linear-gradient(180deg, rgba(0,0,0,0.16), rgba(0,0,0,0.86)),
        url('../images/ban3.png') !important;
}

body.index-fashion-home .mood-small-1 {
    background-image:
        linear-gradient(180deg, rgba(0,0,0,0.16), rgba(0,0,0,0.86)),
        url('../images/ban4.png') !important;
}

body.index-fashion-home .mood-small-2 {
    background-image:
        linear-gradient(180deg, rgba(0,0,0,0.16), rgba(0,0,0,0.86)),
        url('../images/ban5.png') !important;
}

body.index-fashion-home .dept-men {
    background-image:
        linear-gradient(180deg, rgba(0,0,0,0.14), rgba(0,0,0,0.84)),
        url('../images/ban11.png') !important;
}

body.index-fashion-home .dept-women {
    background-image:
        linear-gradient(180deg, rgba(0,0,0,0.14), rgba(0,0,0,0.84)),
        url('../images/ban12.png') !important;
}

body.index-fashion-home .dept-kids {
    background-image:
        linear-gradient(180deg, rgba(0,0,0,0.14), rgba(0,0,0,0.84)),
        url('../images/ban13.png') !important;
}

body.index-fashion-home .mood-card,
body.index-fashion-home .department-card {
    background-size: cover !important;
    background-position: center !important;
    border: 1px solid rgba(201,161,61,0.58) !important;
}

body.index-fashion-home .compare-toolbar {
    border-left: 8px solid var(--fashion-gold) !important;
}

body.index-fashion-home .compare-toolbar-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

body.index-fashion-home #compareSubmitBtn,
body.index-fashion-home #compareSubmitBtn:disabled {
    display: inline-flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 168px !important;
    min-height: 56px !important;
    background: var(--fashion-gold) !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: 1px solid #111111 !important;
    font-weight: 950 !important;
    cursor: not-allowed !important;
}

body.index-fashion-home #compareSubmitBtn:not(:disabled) {
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    cursor: pointer !important;
}

body.index-fashion-home .products .card {
    border: 2px solid #111111 !important;
    box-shadow: 8px 8px 0 var(--fashion-gold) !important;
    position: relative !important;
}

body.index-fashion-home .products .card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    height: 6px !important;
    background: var(--fashion-gold) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

body.index-fashion-home .products .card:hover {
    box-shadow: 12px 12px 0 var(--fashion-gold-dark) !important;
}

body.index-fashion-home .products .card .badge {
    background: var(--fashion-gold) !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border-color: #111111 !important;
}

body.index-fashion-home .products .card .product-img {
    background:
        linear-gradient(135deg, #ffffff 0%, var(--fashion-gold-soft) 100%) !important;
}

body.index-fashion-home .products .card .checkout-btn:hover,
body.index-fashion-home .products .card .compare-select.compare-action-btn:hover {
    background: var(--fashion-gold) !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

/* =========================================================
   Index department image visibility + remove asset tag
   ========================================================= */
body.index-fashion-home .fashion-hero-panel::after {
    content: none !important;
    display: none !important;
}

body.index-fashion-home .fashion-category-cards {
    padding: 18px !important;
    background: linear-gradient(135deg, #ffffff, #fff8e7) !important;
    border: 1px solid rgba(201,161,61,0.45) !important;
}

body.index-fashion-home .fashion-category-cards .department-card {
    background: #111111 !important;
    border: 2px solid #c9a13d !important;
    box-shadow: 8px 8px 0 rgba(201,161,61,0.55) !important;
}

body.index-fashion-home .fashion-category-cards .department-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    opacity: 1 !important;
    filter: none !important;
}

body.index-fashion-home .fashion-category-cards .dept-men::before {
    background-image: url('../images/ban11.png') !important;
}

body.index-fashion-home .fashion-category-cards .dept-women::before {
    background-image: url('../images/ban12.png') !important;
}

body.index-fashion-home .fashion-category-cards .dept-kids::before {
    background-image: url('../images/ban13.png') !important;
}

body.index-fashion-home .fashion-category-cards .department-card::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    border: 0 !important;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.02) 0%, rgba(0,0,0,0.16) 48%, rgba(0,0,0,0.76) 100%),
        linear-gradient(90deg, rgba(0,0,0,0.32), rgba(0,0,0,0.02) 58%) !important;
    pointer-events: none !important;
}

body.index-fashion-home .fashion-category-cards .department-card > * {
    position: relative !important;
    z-index: 2 !important;
}

body.index-fashion-home .fashion-category-cards .department-card span {
    color: #f5d36d !important;
    -webkit-text-fill-color: #f5d36d !important;
}

body.index-fashion-home .fashion-category-cards .department-card strong,
body.index-fashion-home .fashion-category-cards .department-card small {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* =========================================================
   Customer dashboard premium black/gold readability pass
   ========================================================= */
body.cx-dashboard-body {
    --dash-black: #111111;
    --dash-ink: #191919;
    --dash-gold: #c9a13d;
    --dash-gold-dark: #8f6818;
    --dash-gold-soft: #fff8df;
    --dash-line: #dedede;
    background:
        linear-gradient(135deg, #ffffff 0%, #f8f8f8 52%, #fff8df 100%) !important;
}

body.cx-dashboard-body .dashboard-hero {
    width: min(1450px, calc(100% - 64px)) !important;
    min-height: 500px !important;
    margin: 28px auto 26px !important;
    padding: clamp(38px, 5vw, 72px) !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 34px !important;
    border: 1px solid rgba(201,161,61,0.55) !important;
    background-size: cover !important;
    background-position: center right !important;
    box-shadow: 0 24px 70px rgba(17,17,17,0.18) !important;
}

body.cx-dashboard-body .dashboard-hero::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        linear-gradient(90deg, rgba(0,0,0,0.86) 0%, rgba(0,0,0,0.70) 43%, rgba(0,0,0,0.26) 100%),
        linear-gradient(135deg, rgba(201,161,61,0.34), rgba(0,0,0,0) 42%) !important;
    z-index: 0 !important;
}

body.cx-dashboard-body .dashboard-hero::after {
    content: "" !important;
    position: absolute !important;
    inset: 22px !important;
    border: 1px solid rgba(255,255,255,0.32) !important;
    border-radius: 24px !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

body.cx-dashboard-body .dashboard-hero-overlay {
    display: none !important;
}

body.cx-dashboard-body .dashboard-hero-content {
    position: relative !important;
    z-index: 2 !important;
    max-width: 760px !important;
}

body.cx-dashboard-body .dashboard-badge,
body.cx-dashboard-body .dashboard-hero h1,
body.cx-dashboard-body .dashboard-subtitle {
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: 0 4px 18px rgba(0,0,0,0.55) !important;
}

body.cx-dashboard-body .dashboard-badge {
    color: var(--dash-gold) !important;
    -webkit-text-fill-color: var(--dash-gold) !important;
    letter-spacing: 6px !important;
    font-weight: 950 !important;
}

body.cx-dashboard-body .dashboard-hero h1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: clamp(48px, 6vw, 86px) !important;
    line-height: 0.95 !important;
    letter-spacing: -2px !important;
}

body.cx-dashboard-body .dashboard-subtitle {
    max-width: 640px !important;
    color: #f3f3f3 !important;
    -webkit-text-fill-color: #f3f3f3 !important;
    font-size: 18px !important;
    line-height: 1.65 !important;
}

body.cx-dashboard-body .dashboard-hero-actions {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex-wrap: wrap !important;
    margin-top: 30px !important;
}

body.cx-dashboard-body .dashboard-main-btn,
body.cx-dashboard-body .dashboard-outline-btn,
body.cx-dashboard-body .small-action-btn,
body.cx-dashboard-body .panel-link {
    opacity: 1 !important;
    visibility: visible !important;
    min-height: 50px !important;
    padding: 14px 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    font-weight: 950 !important;
    letter-spacing: 0.6px !important;
    text-decoration: none !important;
}

body.cx-dashboard-body .dashboard-main-btn {
    background: var(--dash-gold) !important;
    color: var(--dash-black) !important;
    -webkit-text-fill-color: var(--dash-black) !important;
    border: 1px solid var(--dash-gold) !important;
    box-shadow: 0 16px 34px rgba(201,161,61,0.28) !important;
}

body.cx-dashboard-body .dashboard-outline-btn,
body.cx-dashboard-body .panel-link {
    background: #ffffff !important;
    color: var(--dash-black) !important;
    -webkit-text-fill-color: var(--dash-black) !important;
    border: 1px solid #ffffff !important;
}

body.cx-dashboard-body .dashboard-main-btn:hover,
body.cx-dashboard-body .dashboard-outline-btn:hover,
body.cx-dashboard-body .panel-link:hover {
    transform: translateY(-2px) !important;
    background: var(--dash-black) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: var(--dash-black) !important;
}

body.cx-dashboard-body .dashboard-shop-buttons {
    margin-top: 22px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

body.cx-dashboard-body .dashboard-shop-buttons a {
    min-width: 116px !important;
    min-height: 54px !important;
    padding: 13px 22px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.13) !important;
    border: 1px solid rgba(255,255,255,0.34) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 950 !important;
    text-align: center !important;
    text-decoration: none !important;
    backdrop-filter: blur(8px) !important;
}

body.cx-dashboard-body .dashboard-shop-buttons a:hover {
    background: var(--dash-gold) !important;
    color: var(--dash-black) !important;
    -webkit-text-fill-color: var(--dash-black) !important;
}

body.cx-dashboard-body .dashboard-stats,
body.cx-dashboard-body .dashboard-grid,
body.cx-dashboard-body .wide-panel {
    width: min(1450px, calc(100% - 64px)) !important;
}

body.cx-dashboard-body .stat-card,
body.cx-dashboard-body .dashboard-panel,
body.cx-dashboard-body .quick-link-box,
body.cx-dashboard-body .latest-order-row,
body.cx-dashboard-body .dashboard-activity-item,
body.cx-dashboard-body .dashboard-recommend-card,
body.cx-dashboard-body .empty-dashboard-box {
    background: #ffffff !important;
    color: var(--dash-black) !important;
    border: 1px solid var(--dash-line) !important;
    box-shadow: 0 18px 42px rgba(17,17,17,0.08) !important;
}

body.cx-dashboard-body .stat-card,
body.cx-dashboard-body .dashboard-panel {
    border-top: 5px solid var(--dash-gold) !important;
}

body.cx-dashboard-body .stat-card h3,
body.cx-dashboard-body .dashboard-panel h2,
body.cx-dashboard-body .quick-link-box strong,
body.cx-dashboard-body .latest-order-row strong,
body.cx-dashboard-body .dashboard-activity-item strong,
body.cx-dashboard-body .dashboard-recommend-card strong,
body.cx-dashboard-body .empty-dashboard-box h3 {
    color: var(--dash-black) !important;
    -webkit-text-fill-color: var(--dash-black) !important;
}

body.cx-dashboard-body .stat-card p,
body.cx-dashboard-body .stat-label,
body.cx-dashboard-body .quick-link-box span,
body.cx-dashboard-body .latest-order-row span,
body.cx-dashboard-body .dashboard-activity-item span,
body.cx-dashboard-body .dashboard-activity-item small,
body.cx-dashboard-body .dashboard-muted,
body.cx-dashboard-body .dashboard-recommend-card small,
body.cx-dashboard-body .empty-dashboard-box p {
    color: #5a5a5a !important;
    -webkit-text-fill-color: #5a5a5a !important;
}

body.cx-dashboard-body .dashboard-icon {
    background: var(--dash-gold-soft) !important;
    border: 1px solid rgba(201,161,61,0.42) !important;
}

body.cx-dashboard-body .dashboard-icon img {
    filter: none !important;
    opacity: 1 !important;
}

body.cx-dashboard-body .quick-link-box {
    position: relative !important;
    overflow: hidden !important;
}

body.cx-dashboard-body .quick-link-box::after {
    content: "" !important;
    position: absolute !important;
    inset: auto 0 0 0 !important;
    height: 4px !important;
    background: var(--dash-gold) !important;
}

body.cx-dashboard-body .quick-link-box:hover,
body.cx-dashboard-body .dashboard-recommend-card:hover,
body.cx-dashboard-body .stat-card:hover {
    transform: translateY(-4px) !important;
    border-color: var(--dash-gold) !important;
    box-shadow: 0 24px 52px rgba(201,161,61,0.18) !important;
}

body.cx-dashboard-body .dashboard-recommend-card img {
    background: linear-gradient(135deg, #ffffff, var(--dash-gold-soft)) !important;
    border: 1px solid rgba(201,161,61,0.28) !important;
}

body.cx-dashboard-body .dashboard-table {
    border-collapse: separate !important;
    border-spacing: 0 10px !important;
}

body.cx-dashboard-body .dashboard-table th {
    background: var(--dash-black) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 0 !important;
}

body.cx-dashboard-body .dashboard-table td {
    background: #ffffff !important;
    color: var(--dash-black) !important;
    -webkit-text-fill-color: var(--dash-black) !important;
    border-top: 1px solid var(--dash-line) !important;
    border-bottom: 1px solid var(--dash-line) !important;
}

body.cx-dashboard-body .dashboard-table tr td:first-child {
    border-left: 4px solid var(--dash-gold) !important;
}

@media (max-width: 700px) {
    body.cx-dashboard-body .dashboard-hero,
    body.cx-dashboard-body .dashboard-stats,
    body.cx-dashboard-body .dashboard-grid,
    body.cx-dashboard-body .wide-panel {
        width: min(94%, calc(100% - 20px)) !important;
    }

    body.cx-dashboard-body .dashboard-hero {
        padding: 34px 24px !important;
    }
}

/* =========================================================
   Customer cart premium black/gold readability pass
   ========================================================= */
body.cx-cart-body {
    --cart-black: #111111;
    --cart-ink: #191919;
    --cart-gold: #c9a13d;
    --cart-gold-dark: #8f6818;
    --cart-gold-soft: #fff8df;
    --cart-line: #dedede;
    background:
        linear-gradient(135deg, #ffffff 0%, #f8f8f8 52%, #fff8df 100%) !important;
}

body.cx-cart-body .cx-cart-page {
    padding-bottom: 52px !important;
}

body.cx-cart-body .cx-cart-hero {
    width: min(1450px, calc(100% - 64px)) !important;
    min-height: 500px !important;
    margin: 28px auto 26px !important;
    padding: clamp(38px, 5vw, 72px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.48fr) !important;
    gap: 38px !important;
    align-items: center !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 34px !important;
    border: 1px solid rgba(201,161,61,0.55) !important;
    background:
        radial-gradient(circle at 14% 12%, rgba(201,161,61,0.34), transparent 30%),
        linear-gradient(90deg, #111111 0%, #191919 58%, #2a2415 100%) !important;
    box-shadow: 0 24px 70px rgba(17,17,17,0.18) !important;
}

body.cx-cart-body .cx-cart-hero::before {
    content: "" !important;
    position: absolute !important;
    inset: 22px !important;
    border: 1px solid rgba(255,255,255,0.26) !important;
    border-radius: 24px !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

body.cx-cart-body .cx-cart-hero .cx-hero-copy,
body.cx-cart-body .cx-cart-visual {
    position: relative !important;
    z-index: 2 !important;
}

body.cx-cart-body .cx-cart-hero .cx-kicker {
    color: var(--cart-gold) !important;
    -webkit-text-fill-color: var(--cart-gold) !important;
    letter-spacing: 6px !important;
    font-weight: 950 !important;
}

body.cx-cart-body .cx-cart-hero h1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: clamp(50px, 6vw, 90px) !important;
    line-height: 0.96 !important;
    letter-spacing: -2px !important;
    text-shadow: 0 5px 22px rgba(0,0,0,0.48) !important;
}

body.cx-cart-body .cx-cart-hero p:not(.cx-kicker) {
    max-width: 680px !important;
    color: #f3f3f3 !important;
    -webkit-text-fill-color: #f3f3f3 !important;
    font-size: 18px !important;
    line-height: 1.7 !important;
}

body.cx-cart-body .cx-cart-hero .cx-hero-actions {
    margin-top: 30px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
}

body.cx-cart-body .cx-cart-hero .cx-btn,
body.cx-cart-body .cart-checkout-submit,
body.cx-cart-body .cx-full-btn {
    opacity: 1 !important;
    visibility: visible !important;
    min-height: 52px !important;
    padding: 14px 24px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 950 !important;
    letter-spacing: 0.9px !important;
}

body.cx-cart-body .cx-cart-hero .cx-btn-dark,
body.cx-cart-body .cart-checkout-submit {
    background: var(--cart-gold) !important;
    color: var(--cart-black) !important;
    -webkit-text-fill-color: var(--cart-black) !important;
    border: 1px solid var(--cart-gold) !important;
    box-shadow: 0 16px 34px rgba(201,161,61,0.30) !important;
}

body.cx-cart-body .cx-cart-hero .cx-btn-light {
    background: #ffffff !important;
    color: var(--cart-black) !important;
    -webkit-text-fill-color: var(--cart-black) !important;
    border: 1px solid #ffffff !important;
}

body.cx-cart-body .cx-cart-hero .cx-btn:hover,
body.cx-cart-body .cart-checkout-submit:hover {
    transform: translateY(-2px) !important;
    background: #ffffff !important;
    color: var(--cart-black) !important;
    -webkit-text-fill-color: var(--cart-black) !important;
    border-color: #ffffff !important;
}

body.cx-cart-body .cx-cart-visual {
    margin: 0 !important;
    min-height: 360px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    border: 2px solid var(--cart-gold) !important;
    background: var(--cart-black) !important;
    box-shadow: 12px 12px 0 rgba(201,161,61,0.55) !important;
}

body.cx-cart-body .cx-cart-visual-img {
    width: 100% !important;
    height: 100% !important;
    min-height: 360px !important;
    display: block !important;
    object-fit: cover !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.cx-cart-body .cx-cart-layout,
body.cx-cart-body .cx-addon-section {
    width: min(1450px, calc(100% - 64px)) !important;
}

body.cx-cart-body .cx-cart-layout {
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 380px) !important;
    gap: 24px !important;
    align-items: start !important;
}

body.cx-cart-body .cx-cart-list,
body.cx-cart-body .cx-summary-card,
body.cx-cart-body .cx-addon-section,
body.cx-cart-body .cx-empty-card {
    background: #ffffff !important;
    color: var(--cart-black) !important;
    border: 1px solid var(--cart-line) !important;
    box-shadow: 0 18px 42px rgba(17,17,17,0.08) !important;
}

body.cx-cart-body .cx-cart-list,
body.cx-cart-body .cx-summary-card {
    border-top: 5px solid var(--cart-gold) !important;
}

body.cx-cart-body .cx-section-heading h2,
body.cx-cart-body .cx-cart-info h3,
body.cx-cart-body .cx-summary-card h2,
body.cx-cart-body .cx-summary-line strong,
body.cx-cart-body .cx-addon-card strong,
body.cx-cart-body .cx-empty-card h3 {
    color: var(--cart-black) !important;
    -webkit-text-fill-color: var(--cart-black) !important;
}

body.cx-cart-body .cx-section-heading .cx-kicker,
body.cx-cart-body .cx-cart-meta span,
body.cx-cart-body .cx-summary-line span,
body.cx-cart-body .cx-addon-card small,
body.cx-cart-body .cx-summary-note,
body.cx-cart-body .cx-empty-card p {
    color: #5a5a5a !important;
    -webkit-text-fill-color: #5a5a5a !important;
}

body.cx-cart-body .checkout-progress span {
    background: #f5f5f5 !important;
    color: var(--cart-black) !important;
    -webkit-text-fill-color: var(--cart-black) !important;
    border: 1px solid var(--cart-line) !important;
}

body.cx-cart-body .checkout-progress span.active,
body.cx-cart-body .cx-icon-wrap,
body.cx-cart-body .cx-pill {
    background: var(--cart-black) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: var(--cart-black) !important;
}

body.cx-cart-body .cx-cart-selection-toolbar {
    background: linear-gradient(135deg, var(--cart-black), #2a2415) !important;
    border: 1px solid var(--cart-gold) !important;
    box-shadow: 0 14px 32px rgba(17,17,17,0.12) !important;
}

body.cx-cart-body .cx-cart-selection-toolbar label,
body.cx-cart-body .cx-cart-selection-toolbar span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body.cx-cart-body .cx-cart-card {
    position: relative !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1px solid var(--cart-line) !important;
    border-left: 5px solid var(--cart-gold) !important;
    box-shadow: 0 16px 36px rgba(17,17,17,0.08) !important;
}

body.cx-cart-body .cx-cart-card:hover {
    transform: translateY(-3px) !important;
    border-color: var(--cart-gold) !important;
    box-shadow: 0 24px 52px rgba(201,161,61,0.16) !important;
}

body.cx-cart-body .cx-product-image {
    background: linear-gradient(135deg, #ffffff, var(--cart-gold-soft)) !important;
    border: 1px solid rgba(201,161,61,0.36) !important;
    border-radius: 16px !important;
}

body.cx-cart-body .cx-product-image img {
    object-fit: cover !important;
}

body.cx-cart-body .cx-cart-meta span {
    background: #f7f7f7 !important;
    border: 1px solid #e8e8e8 !important;
}

body.cx-cart-body .cx-qty-form {
    width: max-content !important;
    padding: 6px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    border-radius: 999px !important;
    background: #f7f7f7 !important;
    border: 1px solid #e3e3e3 !important;
}

body.cx-cart-body .cx-qty-btn {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: var(--cart-black) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid var(--cart-black) !important;
}

body.cx-cart-body .cx-qty-number {
    min-width: 24px !important;
    color: var(--cart-black) !important;
    -webkit-text-fill-color: var(--cart-black) !important;
    font-weight: 950 !important;
    text-align: center !important;
}

body.cx-cart-body .cx-save-link,
body.cx-cart-body .cx-remove-link {
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    font-weight: 950 !important;
    text-decoration: none !important;
}

body.cx-cart-body .cx-save-link {
    background: #ffffff !important;
    color: var(--cart-black) !important;
    -webkit-text-fill-color: var(--cart-black) !important;
    border: 1px solid var(--cart-black) !important;
}

body.cx-cart-body .cx-remove-link {
    background: var(--cart-black) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid var(--cart-black) !important;
}

body.cx-cart-body .cx-summary-card {
    position: sticky !important;
    top: 96px !important;
}

body.cx-cart-body .cx-summary-card .cart-checkout-submit {
    width: 100% !important;
    margin-top: 8px !important;
}

body.cx-cart-body .cx-summary-note,
body.cx-cart-body .cx-stock-alert,
body.cx-cart-body .cx-message {
    background: var(--cart-gold-soft) !important;
    color: var(--cart-black) !important;
    -webkit-text-fill-color: var(--cart-black) !important;
    border: 1px solid rgba(201,161,61,0.32) !important;
}

body.cx-cart-body .cx-addon-section {
    margin: 28px auto 0 !important;
    border-top: 5px solid var(--cart-gold) !important;
}

body.cx-cart-body .cx-addon-card {
    background: #ffffff !important;
    border: 1px solid var(--cart-line) !important;
    border-bottom: 4px solid var(--cart-gold) !important;
    box-shadow: 0 14px 32px rgba(17,17,17,0.07) !important;
}

body.cx-cart-body .cx-addon-card:hover {
    transform: translateY(-4px) !important;
    border-color: var(--cart-gold) !important;
    box-shadow: 0 22px 48px rgba(201,161,61,0.18) !important;
}

body.cx-cart-body .cx-addon-card img {
    background: linear-gradient(135deg, #ffffff, var(--cart-gold-soft)) !important;
    border: 1px solid rgba(201,161,61,0.28) !important;
}

@media (max-width: 980px) {
    body.cx-cart-body .cx-cart-hero,
    body.cx-cart-body .cx-cart-layout {
        grid-template-columns: 1fr !important;
    }

    body.cx-cart-body .cx-summary-card {
        position: static !important;
    }
}

@media (max-width: 700px) {
    body.cx-cart-body .cx-cart-hero,
    body.cx-cart-body .cx-cart-layout,
    body.cx-cart-body .cx-addon-section {
        width: min(94%, calc(100% - 20px)) !important;
    }

    body.cx-cart-body .cx-cart-hero {
        padding: 34px 24px !important;
    }
}

/* =========================================================
   Customer wishlist premium index-card match
   ========================================================= */
body.cx-wishlist-body {
    --wish-black: #111111;
    --wish-ink: #191919;
    --wish-gold: #c9a13d;
    --wish-gold-dark: #8f6818;
    --wish-gold-soft: #fff8df;
    --wish-line: #dedede;
    background:
        linear-gradient(135deg, #ffffff 0%, #f8f8f8 52%, #fff8df 100%) !important;
}

body.cx-wishlist-body .wishlist-page-wrapper {
    background: transparent !important;
}

body.cx-wishlist-body .wishlist-page-hero {
    border: 1px solid rgba(201,161,61,0.55) !important;
    box-shadow: 0 24px 70px rgba(17,17,17,0.16) !important;
}

body.cx-wishlist-body .wishlist-controls,
body.cx-wishlist-body .wishlist-select-toolbar,
body.cx-wishlist-body .wishlist-products,
body.cx-wishlist-body .wishlist-empty-card,
body.cx-wishlist-body .wishlist-style-tips {
    width: min(1450px, calc(100% - 64px)) !important;
}

body.cx-wishlist-body .wishlist-controls {
    margin: 24px auto 14px !important;
    padding: 18px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    background: #ffffff !important;
    color: var(--wish-black) !important;
    border: 1px solid var(--wish-line) !important;
    border-left: 8px solid var(--wish-gold) !important;
    box-shadow: 0 18px 42px rgba(17,17,17,0.08) !important;
}

body.cx-wishlist-body .wishlist-control-copy {
    display: grid !important;
    gap: 3px !important;
}

body.cx-wishlist-body .wishlist-control-copy span,
body.cx-wishlist-body .wishlist-sort-field label,
body.cx-wishlist-body .wishlist-select-note {
    color: #5a5a5a !important;
    -webkit-text-fill-color: #5a5a5a !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}

body.cx-wishlist-body .wishlist-control-copy strong {
    color: var(--wish-black) !important;
    -webkit-text-fill-color: var(--wish-black) !important;
    font-size: 24px !important;
    font-weight: 950 !important;
}

body.cx-wishlist-body .wishlist-sort-field {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

body.cx-wishlist-body .wishlist-controls select {
    min-width: 230px !important;
    min-height: 48px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: var(--wish-black) !important;
    -webkit-text-fill-color: var(--wish-black) !important;
    border: 1px solid var(--wish-black) !important;
    font-weight: 950 !important;
}

body.cx-wishlist-body .wishlist-select-toolbar {
    margin: 0 auto 18px !important;
    padding: 16px 18px !important;
    display: grid !important;
    grid-template-columns: auto minmax(220px, 1fr) auto !important;
    align-items: center !important;
    gap: 14px !important;
    background: linear-gradient(135deg, var(--wish-black), #2a2415) !important;
    border: 1px solid var(--wish-gold) !important;
    box-shadow: 0 16px 36px rgba(17,17,17,0.12) !important;
}

body.cx-wishlist-body .wishlist-select-toolbar label,
body.cx-wishlist-body .wishlist-select-toolbar .wishlist-select-note {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body.cx-wishlist-body .wishlist-select-toolbar button,
body.cx-wishlist-body .wishlist-empty-actions .cx-btn-dark {
    min-height: 48px !important;
    border-radius: 999px !important;
    background: var(--wish-gold) !important;
    color: var(--wish-black) !important;
    -webkit-text-fill-color: var(--wish-black) !important;
    border: 1px solid var(--wish-gold) !important;
    font-weight: 950 !important;
    box-shadow: 0 14px 28px rgba(201,161,61,0.24) !important;
}

body.cx-wishlist-body .wishlist-select-toolbar button:hover,
body.cx-wishlist-body .wishlist-empty-actions .cx-btn-dark:hover {
    background: #ffffff !important;
    border-color: #ffffff !important;
}

body.cx-wishlist-body .wishlist-products {
    margin: 22px auto 70px !important;
    padding: 18px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 22px !important;
    background: #f4f4f4 !important;
    border: 1px solid #e1e1e1 !important;
}

body.cx-wishlist-body .wishlist-products .card,
body.cx-wishlist-body .wishlist-products .card:nth-child(3n + 1),
body.cx-wishlist-body .wishlist-products .card:nth-child(3n + 2),
body.cx-wishlist-body .wishlist-products .card:nth-child(3n) {
    min-height: 450px !important;
    padding: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    background: #ffffff !important;
    color: var(--wish-black) !important;
    border: 2px solid var(--wish-black) !important;
    border-radius: 0 !important;
    box-shadow: 8px 8px 0 var(--wish-gold) !important;
}

body.cx-wishlist-body .wishlist-products .card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    height: 6px !important;
    background: var(--wish-gold) !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

body.cx-wishlist-body .wishlist-products .card:hover {
    transform: translate(-3px, -6px) !important;
    box-shadow: 12px 12px 0 var(--wish-gold-dark) !important;
}

body.cx-wishlist-body .wishlist-products .product-img {
    height: 268px !important;
    width: 100% !important;
    display: grid !important;
    place-items: center !important;
    background: linear-gradient(135deg, #ffffff 0%, var(--wish-gold-soft) 100%) !important;
    border-bottom: 2px solid var(--wish-black) !important;
    overflow: hidden !important;
}

body.cx-wishlist-body .wishlist-products .product-img img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    padding: 0 !important;
}

body.cx-wishlist-body .wishlist-products .badge,
body.cx-wishlist-body .wishlist-stock-badge {
    z-index: 4 !important;
    background: var(--wish-gold) !important;
    color: var(--wish-black) !important;
    -webkit-text-fill-color: var(--wish-black) !important;
    border: 1px solid var(--wish-black) !important;
    font-weight: 950 !important;
}

body.cx-wishlist-body .wishlist-stock-badge {
    position: static !important;
    width: max-content !important;
    margin-top: 8px !important;
    padding: 7px 12px !important;
    border-radius: 999px !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
}

body.cx-wishlist-body .wishlist-select-check {
    background: var(--wish-black) !important;
    border: 1px solid var(--wish-gold) !important;
}

body.cx-wishlist-body .wishlist-products .category,
body.cx-wishlist-body .wishlist-products h3,
body.cx-wishlist-body .wishlist-products .rating,
body.cx-wishlist-body .wishlist-products .bottom,
body.cx-wishlist-body .wishlist-products .card-actions {
    margin-left: 18px !important;
    margin-right: 18px !important;
}

body.cx-wishlist-body .wishlist-products .category {
    margin-top: 18px !important;
    margin-bottom: 10px !important;
    color: #5a5a5a !important;
    -webkit-text-fill-color: #5a5a5a !important;
}

body.cx-wishlist-body .wishlist-products h3,
body.cx-wishlist-body .wishlist-products .bottom strong {
    color: var(--wish-black) !important;
    -webkit-text-fill-color: var(--wish-black) !important;
}

body.cx-wishlist-body .wishlist-products h3 {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
}

body.cx-wishlist-body .wishlist-products .rating {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    color: #666666 !important;
    -webkit-text-fill-color: #666666 !important;
}

body.cx-wishlist-body .wishlist-products .bottom {
    margin-top: 0 !important;
    margin-bottom: 14px !important;
    display: grid !important;
    gap: 4px !important;
}

body.cx-wishlist-body .wishlist-products .card-actions {
    margin-top: auto !important;
    margin-bottom: 18px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
}

body.cx-wishlist-body .wishlist-products .checkout-btn,
body.cx-wishlist-body .wishlist-products .wishlist-remove {
    width: 100% !important;
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    border-radius: 999px !important;
    font-weight: 950 !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
}

body.cx-wishlist-body .wishlist-products .checkout-btn {
    background: var(--wish-black) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid var(--wish-black) !important;
}

body.cx-wishlist-body .wishlist-products .card-actions .checkout-btn:nth-child(2) {
    background: var(--wish-gold) !important;
    color: var(--wish-black) !important;
    -webkit-text-fill-color: var(--wish-black) !important;
    border-color: var(--wish-gold) !important;
}

body.cx-wishlist-body .wishlist-products .wishlist-remove {
    background: #ffffff !important;
    color: var(--wish-black) !important;
    -webkit-text-fill-color: var(--wish-black) !important;
    border: 1px solid var(--wish-black) !important;
}

body.cx-wishlist-body .wishlist-products .checkout-btn:hover,
body.cx-wishlist-body .wishlist-products .wishlist-remove:hover {
    background: var(--wish-gold) !important;
    color: var(--wish-black) !important;
    -webkit-text-fill-color: var(--wish-black) !important;
    border-color: var(--wish-gold) !important;
}

body.cx-wishlist-body .wishlist-empty-card,
body.cx-wishlist-body .wishlist-tip-card {
    background: #ffffff !important;
    color: var(--wish-black) !important;
    border: 1px solid var(--wish-line) !important;
    border-top: 5px solid var(--wish-gold) !important;
    box-shadow: 0 18px 42px rgba(17,17,17,0.08) !important;
}

body.cx-wishlist-body .wishlist-tip-icon,
body.cx-wishlist-body .wishlist-action-icon {
    background: transparent !important;
    color: currentColor !important;
    -webkit-text-fill-color: currentColor !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.cx-wishlist-body .wishlist-tip-icon {
    background: var(--wish-black) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid var(--wish-black) !important;
}

body.cx-wishlist-body .wishlist-action-icon svg {
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
}

body.cx-wishlist-body .wishlist-stock-badge.in-stock {
    background: #0f3d2e !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid #0f3d2e !important;
    box-shadow: 0 8px 18px rgba(15,61,46,0.18) !important;
}

body.cx-wishlist-body .wishlist-stock-badge.low-stock {
    background: var(--wish-gold) !important;
    color: var(--wish-black) !important;
    -webkit-text-fill-color: var(--wish-black) !important;
    border: 1px solid var(--wish-black) !important;
}

body.cx-wishlist-body .wishlist-stock-badge.sold-out {
    background: #ffffff !important;
    color: #9a1f1f !important;
    -webkit-text-fill-color: #9a1f1f !important;
    border: 1px solid #9a1f1f !important;
}

@media (max-width: 1100px) {
    body.cx-wishlist-body .wishlist-products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 720px) {
    body.cx-wishlist-body .wishlist-controls,
    body.cx-wishlist-body .wishlist-select-toolbar,
    body.cx-wishlist-body .wishlist-products,
    body.cx-wishlist-body .wishlist-empty-card,
    body.cx-wishlist-body .wishlist-style-tips {
        width: min(94%, calc(100% - 20px)) !important;
    }

    body.cx-wishlist-body .wishlist-controls,
    body.cx-wishlist-body .wishlist-select-toolbar {
        grid-template-columns: 1fr !important;
        align-items: stretch !important;
    }

    body.cx-wishlist-body .wishlist-products {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   Customer orders premium black/gold order-card pass
   ========================================================= */
body.cx-orders-body {
    --order-black: #111111;
    --order-ink: #191919;
    --order-gold: #c9a13d;
    --order-gold-dark: #8f6818;
    --order-gold-soft: #fff8df;
    --order-line: #dedede;
    background:
        linear-gradient(135deg, #ffffff 0%, #f8f8f8 52%, #fff8df 100%) !important;
}

body.cx-orders-body .cx-orders-page {
    padding-bottom: 54px !important;
}

body.cx-orders-body .cx-orders-hero {
    width: min(1450px, calc(100% - 64px)) !important;
    min-height: 430px !important;
    margin: 28px auto 26px !important;
    padding: clamp(38px, 5vw, 68px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.42fr) !important;
    gap: 34px !important;
    align-items: center !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 34px !important;
    border: 1px solid rgba(201,161,61,0.55) !important;
    background:
        linear-gradient(90deg, rgba(0,0,0,0.90) 0%, rgba(0,0,0,0.72) 54%, rgba(0,0,0,0.22) 100%),
        url('../images/order.png') right center / contain no-repeat,
        linear-gradient(135deg, #111111, #2a2415) !important;
    box-shadow: 0 24px 70px rgba(17,17,17,0.18) !important;
}

body.cx-orders-body .cx-orders-hero::before {
    content: "" !important;
    position: absolute !important;
    inset: 22px !important;
    border: 1px solid rgba(255,255,255,0.28) !important;
    border-radius: 24px !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

body.cx-orders-body .cx-orders-hero .cx-hero-copy,
body.cx-orders-body .cx-order-stats-panel {
    position: relative !important;
    z-index: 2 !important;
}

body.cx-orders-body .cx-orders-hero .cx-kicker {
    color: var(--order-gold) !important;
    -webkit-text-fill-color: var(--order-gold) !important;
    letter-spacing: 6px !important;
    font-weight: 950 !important;
}

body.cx-orders-body .cx-orders-hero h1 {
    max-width: 760px !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: clamp(48px, 6vw, 86px) !important;
    line-height: 0.96 !important;
    letter-spacing: -2px !important;
    text-shadow: 0 5px 22px rgba(0,0,0,0.50) !important;
}

body.cx-orders-body .cx-orders-hero p:not(.cx-kicker) {
    max-width: 620px !important;
    color: #f3f3f3 !important;
    -webkit-text-fill-color: #f3f3f3 !important;
    font-size: 18px !important;
    line-height: 1.7 !important;
}

body.cx-orders-body .cx-order-stats-panel {
    margin: 0 !important;
    padding: 16px !important;
    display: grid !important;
    gap: 12px !important;
    background: rgba(255,255,255,0.10) !important;
    border: 1px solid rgba(255,255,255,0.28) !important;
    border-radius: 24px !important;
    backdrop-filter: blur(10px) !important;
}

body.cx-orders-body .cx-order-stats-panel div {
    min-height: 94px !important;
    padding: 18px !important;
    display: grid !important;
    align-content: center !important;
    background: #ffffff !important;
    border: 1px solid rgba(201,161,61,0.35) !important;
    border-radius: 18px !important;
    box-shadow: 0 12px 28px rgba(0,0,0,0.12) !important;
}

body.cx-orders-body .cx-order-stats-panel span {
    color: var(--order-black) !important;
    -webkit-text-fill-color: var(--order-black) !important;
    font-size: clamp(28px, 3vw, 40px) !important;
    font-weight: 950 !important;
}

body.cx-orders-body .cx-order-stats-panel small {
    color: var(--order-gold-dark) !important;
    -webkit-text-fill-color: var(--order-gold-dark) !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}

body.cx-orders-body .cx-order-board {
    width: min(1450px, calc(100% - 64px)) !important;
    margin: 0 auto !important;
    padding: clamp(18px, 3vw, 30px) !important;
    background: #ffffff !important;
    color: var(--order-black) !important;
    border: 1px solid var(--order-line) !important;
    border-top: 5px solid var(--order-gold) !important;
    border-radius: 28px !important;
    box-shadow: 0 18px 42px rgba(17,17,17,0.08) !important;
}

body.cx-orders-body .cx-order-board .cx-section-heading h2 {
    color: var(--order-black) !important;
    -webkit-text-fill-color: var(--order-black) !important;
}

body.cx-orders-body .cx-order-board .cx-kicker {
    color: #5a5a5a !important;
    -webkit-text-fill-color: #5a5a5a !important;
}

body.cx-orders-body .cx-order-board .cx-icon-wrap {
    background: var(--order-black) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: var(--order-black) !important;
}

body.cx-orders-body .cx-order-filters {
    margin: 18px 0 24px !important;
    padding: 14px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    background: #f4f4f4 !important;
    border: 1px solid #e1e1e1 !important;
}

body.cx-orders-body .cx-order-filters a {
    min-height: 42px !important;
    padding: 11px 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: var(--order-black) !important;
    -webkit-text-fill-color: var(--order-black) !important;
    border: 1px solid var(--order-black) !important;
    font-weight: 950 !important;
    text-decoration: none !important;
}

body.cx-orders-body .cx-order-filters a.active,
body.cx-orders-body .cx-order-filters a:hover {
    background: var(--order-gold) !important;
    color: var(--order-black) !important;
    -webkit-text-fill-color: var(--order-black) !important;
    border-color: var(--order-gold) !important;
}

body.cx-orders-body .cx-order-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px !important;
}

body.cx-orders-body .cx-order-card,
body.cx-orders-body .cx-order-card:nth-child(3n + 1),
body.cx-orders-body .cx-order-card:nth-child(3n + 2),
body.cx-orders-body .cx-order-card:nth-child(3n) {
    position: relative !important;
    overflow: hidden !important;
    padding: 22px !important;
    background: #ffffff !important;
    color: var(--order-black) !important;
    border: 2px solid var(--order-black) !important;
    border-radius: 0 !important;
    box-shadow: 8px 8px 0 var(--order-gold) !important;
}

body.cx-orders-body .cx-order-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    height: 6px !important;
    background: var(--order-gold) !important;
}

body.cx-orders-body .cx-order-card:hover {
    transform: translate(-3px, -6px) !important;
    box-shadow: 12px 12px 0 var(--order-gold-dark) !important;
}

body.cx-orders-body .cx-order-top {
    display: flex !important;
    justify-content: space-between !important;
    gap: 14px !important;
    align-items: flex-start !important;
    margin-bottom: 16px !important;
}

body.cx-orders-body .cx-order-card h3,
body.cx-orders-body .cx-tracking-box strong,
body.cx-orders-body .cx-order-details strong,
body.cx-orders-body .cx-track-labels span,
body.cx-orders-body .cx-order-product-tile small {
    color: var(--order-black) !important;
    -webkit-text-fill-color: var(--order-black) !important;
}

body.cx-orders-body .cx-status-pill {
    min-height: 34px !important;
    padding: 8px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    border-radius: 999px !important;
    background: var(--order-black) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid var(--order-black) !important;
    font-weight: 950 !important;
}

body.cx-orders-body .cx-status-paid,
body.cx-orders-body .cx-status-approved,
body.cx-orders-body .cx-status-completed {
    background: #0f3d2e !important;
    border-color: #0f3d2e !important;
}

body.cx-orders-body .cx-status-pending,
body.cx-orders-body .cx-status-waiting,
body.cx-orders-body .cx-status-submitted,
body.cx-orders-body .cx-status-under-review {
    background: var(--order-gold) !important;
    color: var(--order-black) !important;
    -webkit-text-fill-color: var(--order-black) !important;
    border-color: var(--order-gold) !important;
}

body.cx-orders-body .cx-status-cancelled,
body.cx-orders-body .cx-status-rejected {
    background: #ffffff !important;
    color: #9a1f1f !important;
    -webkit-text-fill-color: #9a1f1f !important;
    border-color: #9a1f1f !important;
}

body.cx-orders-body .cx-tracking-box,
body.cx-orders-body .cx-order-details div,
body.cx-orders-body .cx-order-placeholder,
body.cx-orders-body .cx-order-more {
    background: #f7f7f7 !important;
    color: var(--order-black) !important;
    border: 1px solid var(--order-line) !important;
    border-radius: 16px !important;
}

body.cx-orders-body .cx-tracking-box span,
body.cx-orders-body .cx-tracking-box small,
body.cx-orders-body .cx-order-details span {
    color: #5a5a5a !important;
    -webkit-text-fill-color: #5a5a5a !important;
}

body.cx-orders-body .cx-order-products {
    margin: 16px 0 !important;
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

body.cx-orders-body .cx-order-product-tile {
    min-height: 148px !important;
    padding: 8px !important;
    display: grid !important;
    grid-template-rows: 92px auto !important;
    gap: 8px !important;
    background: #ffffff !important;
    border: 1px solid var(--order-line) !important;
    border-bottom: 4px solid var(--order-black) !important;
    border-radius: 0 !important;
    box-shadow: 0 12px 26px rgba(17,17,17,0.06) !important;
}

body.cx-orders-body .cx-order-product-tile img,
body.cx-orders-body .cx-order-product-tile span {
    width: 100% !important;
    height: 92px !important;
    object-fit: cover !important;
    background: linear-gradient(135deg, #ffffff, #f1f1f1) !important;
    border: 1px solid var(--order-line) !important;
    border-radius: 0 !important;
}

body.cx-orders-body .cx-order-product-tile small {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
}

body.cx-orders-body .cx-order-details {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

body.cx-orders-body .cx-order-details div {
    min-height: 104px !important;
    padding: 16px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    align-content: center !important;
    align-items: start !important;
    border-radius: 18px !important;
}

body.cx-orders-body .cx-order-details span {
    min-width: 0 !important;
    margin: 0 !important;
    line-height: 1.25 !important;
    letter-spacing: 1.4px !important;
}

body.cx-orders-body .cx-order-details strong {
    min-width: 0 !important;
    display: block !important;
    text-align: left !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    line-height: 1.28 !important;
    font-size: clamp(18px, 1.7vw, 23px) !important;
}

body.cx-orders-body .cx-mini-timeline {
    margin-top: 18px !important;
    gap: 8px !important;
}

body.cx-orders-body .cx-mini-timeline span {
    height: 8px !important;
    border-radius: 999px !important;
    background: #e8e8e8 !important;
    border: 0 !important;
}

body.cx-orders-body .cx-mini-timeline span.active {
    background: #0f3d2e !important;
}

body.cx-orders-body .cx-track-labels {
    margin-top: 8px !important;
}

body.cx-orders-body .cx-track-labels span {
    color: #5a5a5a !important;
    -webkit-text-fill-color: #5a5a5a !important;
    font-size: 10px !important;
}

body.cx-orders-body .cx-order-actions {
    margin-top: 18px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
}

body.cx-orders-body .cx-order-actions .cx-btn {
    min-height: 46px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 950 !important;
    text-decoration: none !important;
}

body.cx-orders-body .cx-order-actions .cx-btn-dark {
    background: var(--order-black) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid var(--order-black) !important;
}

body.cx-orders-body .cx-order-actions .cx-btn-light {
    background: var(--order-gold) !important;
    color: var(--order-black) !important;
    -webkit-text-fill-color: var(--order-black) !important;
    border: 1px solid var(--order-gold) !important;
}

body.cx-orders-body .cx-order-actions .cx-btn:hover {
    background: #ffffff !important;
    color: var(--order-black) !important;
    -webkit-text-fill-color: var(--order-black) !important;
    border-color: var(--order-black) !important;
}

body.cx-orders-body .cx-empty-orders {
    background: #ffffff !important;
    border: 2px solid var(--order-black) !important;
    box-shadow: 8px 8px 0 var(--order-gold) !important;
}

@media (max-width: 1120px) {
    body.cx-orders-body .cx-order-grid,
    body.cx-orders-body .cx-orders-hero {
        grid-template-columns: 1fr !important;
    }

    body.cx-orders-body .cx-order-products {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 720px) {
    body.cx-orders-body .cx-orders-hero,
    body.cx-orders-body .cx-order-board {
        width: min(94%, calc(100% - 20px)) !important;
    }

    body.cx-orders-body .cx-orders-hero {
        padding: 34px 24px !important;
    }

    body.cx-orders-body .cx-order-products,
    body.cx-orders-body .cx-order-details,
    body.cx-orders-body .cx-order-actions {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   Customer payment proof premium black/gold pass
   ========================================================= */
body.cx-payment-body {
    --payx-black: #111111;
    --payx-gold: #c9a13d;
    --payx-gold-dark: #8f6818;
    --payx-gold-soft: #fff8df;
    --payx-line: #dedede;
    background:
        linear-gradient(135deg, #ffffff 0%, #f8f8f8 52%, #fff8df 100%) !important;
}

body.cx-payment-body .cx-payment-page {
    padding-bottom: 54px !important;
}

body.cx-payment-body .cx-payment-hero {
    width: min(1450px, calc(100% - 64px)) !important;
    min-height: 440px !important;
    margin: 28px auto 26px !important;
    padding: clamp(38px, 5vw, 68px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.42fr) !important;
    gap: 34px !important;
    align-items: center !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 34px !important;
    border: 1px solid rgba(201,161,61,0.55) !important;
    background:
        radial-gradient(circle at 14% 12%, rgba(201,161,61,0.32), transparent 30%),
        linear-gradient(90deg, #111111 0%, #191919 58%, #2a2415 100%) !important;
    box-shadow: 0 24px 70px rgba(17,17,17,0.18) !important;
}

body.cx-payment-body .cx-payment-hero::before {
    content: "" !important;
    position: absolute !important;
    inset: 22px !important;
    border: 1px solid rgba(255,255,255,0.28) !important;
    border-radius: 24px !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

body.cx-payment-body .cx-payment-hero .cx-hero-copy,
body.cx-payment-body .cx-payment-preview {
    position: relative !important;
    z-index: 2 !important;
}

body.cx-payment-body .cx-payment-hero .cx-kicker {
    color: var(--payx-gold) !important;
    -webkit-text-fill-color: var(--payx-gold) !important;
    letter-spacing: 6px !important;
    font-weight: 950 !important;
}

body.cx-payment-body .cx-payment-hero h1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: clamp(48px, 6vw, 84px) !important;
    line-height: 0.96 !important;
    letter-spacing: -2px !important;
    text-shadow: 0 5px 22px rgba(0,0,0,0.50) !important;
}

body.cx-payment-body .cx-payment-hero p:not(.cx-kicker) {
    max-width: 620px !important;
    color: #f3f3f3 !important;
    -webkit-text-fill-color: #f3f3f3 !important;
    font-size: 18px !important;
    line-height: 1.7 !important;
}

body.cx-payment-body .cx-payment-preview {
    min-height: 300px !important;
    overflow: hidden !important;
    border: 2px solid var(--payx-gold) !important;
    border-radius: 0 !important;
    background: #111111 !important;
    box-shadow: 12px 12px 0 rgba(201,161,61,0.55) !important;
}

body.cx-payment-body .cx-payment-preview-img {
    width: 100% !important;
    height: 100% !important;
    min-height: 300px !important;
    object-fit: cover !important;
    display: block !important;
    opacity: 1 !important;
}

body.cx-payment-body .cx-payment-layout {
    width: min(1450px, calc(100% - 64px)) !important;
    margin: 0 auto !important;
    display: grid !important;
    grid-template-columns: minmax(320px, 0.38fr) minmax(0, 1fr) !important;
    gap: 24px !important;
    align-items: start !important;
}

body.cx-payment-body .cx-bank-card,
body.cx-payment-body .cx-upload-card,
body.cx-payment-body .cx-selected-order,
body.cx-payment-body .cx-payment-status-card,
body.cx-payment-body .cx-file-drop {
    background: #ffffff !important;
    color: var(--payx-black) !important;
    border: 1px solid var(--payx-line) !important;
    box-shadow: 0 18px 42px rgba(17,17,17,0.08) !important;
}

body.cx-payment-body .cx-bank-card,
body.cx-payment-body .cx-upload-card {
    border-top: 5px solid var(--payx-gold) !important;
}

body.cx-payment-body .cx-bank-card h2,
body.cx-payment-body .cx-upload-card h2,
body.cx-payment-body .cx-selected-order strong,
body.cx-payment-body .cx-payment-status-card strong,
body.cx-payment-body .cx-bank-line strong {
    color: var(--payx-black) !important;
    -webkit-text-fill-color: var(--payx-black) !important;
}

body.cx-payment-body .cx-bank-card .cx-kicker,
body.cx-payment-body .cx-section-heading .cx-kicker,
body.cx-payment-body .cx-payment-form label,
body.cx-payment-body .cx-bank-line span:not(.cx-line-icon),
body.cx-payment-body .cx-bank-note,
body.cx-payment-body .cx-selected-order span,
body.cx-payment-body .cx-selected-order small,
body.cx-payment-body .cx-file-drop small,
body.cx-payment-body .cx-payment-status-card span {
    color: #5a5a5a !important;
    -webkit-text-fill-color: #5a5a5a !important;
}

body.cx-payment-body .cx-bank-line {
    background: #f7f7f7 !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 16px !important;
    margin-top: 10px !important;
    padding: 14px !important;
}

body.cx-payment-body .cx-line-icon,
body.cx-payment-body .cx-icon-wrap,
body.cx-payment-body .cx-file-icon {
    background: var(--payx-black) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: var(--payx-black) !important;
}

body.cx-payment-body .cx-payment-status-grid {
    gap: 12px !important;
}

body.cx-payment-body .cx-payment-status-card {
    border-bottom: 4px solid var(--payx-gold) !important;
}

body.cx-payment-body .cx-payment-image-slot {
    background: #111111 !important;
    border: 2px solid var(--payx-gold) !important;
    border-radius: 0 !important;
    box-shadow: 8px 8px 0 rgba(201,161,61,0.45) !important;
}

body.cx-payment-body .cx-payment-image-slot::before {
    content: none !important;
    display: none !important;
}

body.cx-payment-body .cx-payment-image-slot img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 1 !important;
}

body.cx-payment-body .cx-selected-order {
    border-left: 5px solid var(--payx-gold) !important;
}

body.cx-payment-body .cx-selected-order-link,
body.cx-payment-body .cx-btn-dark,
body.cx-payment-body .cx-payment-form .cx-btn-dark,
body.cx-payment-body #copyAccountBtn {
    min-height: 48px !important;
    border-radius: 999px !important;
    background: var(--payx-gold) !important;
    color: var(--payx-black) !important;
    -webkit-text-fill-color: var(--payx-black) !important;
    border: 1px solid var(--payx-gold) !important;
    font-weight: 950 !important;
    box-shadow: 0 14px 28px rgba(201,161,61,0.24) !important;
}

body.cx-payment-body .cx-selected-order-link:hover,
body.cx-payment-body .cx-btn-dark:hover,
body.cx-payment-body #copyAccountBtn:hover {
    background: var(--payx-black) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: var(--payx-black) !important;
}

body.cx-payment-body .cx-selected-order-products {
    gap: 10px !important;
}

body.cx-payment-body .cx-selected-product-mini {
    background: #ffffff !important;
    border: 1px solid var(--payx-line) !important;
    border-bottom: 4px solid #111111 !important;
    box-shadow: 0 12px 26px rgba(17,17,17,0.06) !important;
}

body.cx-payment-body .cx-payment-timeline span {
    background: #f1f1f1 !important;
    color: var(--payx-black) !important;
    -webkit-text-fill-color: var(--payx-black) !important;
    border: 1px solid #e1e1e1 !important;
}

body.cx-payment-body .cx-payment-timeline span.active {
    background: #0f3d2e !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #0f3d2e !important;
}

body.cx-payment-body .cx-payment-form {
    margin-top: 20px !important;
    display: grid !important;
    gap: 12px !important;
}

body.cx-payment-body .cx-payment-form select,
body.cx-payment-body .cx-file-drop,
body.cx-payment-body .cx-file-drop input {
    background: #ffffff !important;
    color: var(--payx-black) !important;
    -webkit-text-fill-color: var(--payx-black) !important;
    border-color: var(--payx-line) !important;
}

@media (max-width: 980px) {
    body.cx-payment-body .cx-payment-hero,
    body.cx-payment-body .cx-payment-layout {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   Customer live chat premium black/gold pass
   ========================================================= */
body.cx-chat-body {
    --chat-black: #111111;
    --chat-gold: #c9a13d;
    --chat-gold-soft: #fff8df;
    --chat-line: #dedede;
    background:
        linear-gradient(135deg, #ffffff 0%, #f8f8f8 52%, #fff8df 100%) !important;
}

body.cx-chat-body .cx-chat-page {
    padding-bottom: 54px !important;
}

body.cx-chat-body .cx-orders-hero {
    width: min(1450px, calc(100% - 64px)) !important;
    min-height: 360px !important;
    margin: 28px auto 26px !important;
    padding: clamp(38px, 5vw, 68px) !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 34px !important;
    border: 1px solid rgba(201,161,61,0.55) !important;
    background:
        radial-gradient(circle at 14% 12%, rgba(201,161,61,0.34), transparent 30%),
        linear-gradient(90deg, #111111 0%, #191919 58%, #2a2415 100%) !important;
    box-shadow: 0 24px 70px rgba(17,17,17,0.18) !important;
}

body.cx-chat-body .cx-orders-hero::before {
    content: "" !important;
    position: absolute !important;
    inset: 22px !important;
    border: 1px solid rgba(255,255,255,0.28) !important;
    border-radius: 24px !important;
    pointer-events: none !important;
}

body.cx-chat-body .cx-orders-hero .cx-kicker {
    color: var(--chat-gold) !important;
    -webkit-text-fill-color: var(--chat-gold) !important;
    letter-spacing: 6px !important;
    font-weight: 950 !important;
}

body.cx-chat-body .cx-orders-hero h1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: clamp(50px, 6vw, 86px) !important;
    line-height: 0.96 !important;
}

body.cx-chat-body .cx-orders-hero p:not(.cx-kicker) {
    color: #f3f3f3 !important;
    -webkit-text-fill-color: #f3f3f3 !important;
    font-size: 18px !important;
}

body.cx-chat-body .krylo-chat-shell {
    width: min(1450px, calc(100% - 64px)) !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    background: #ffffff !important;
    color: var(--chat-black) !important;
    border: 1px solid var(--chat-line) !important;
    border-top: 5px solid var(--chat-gold) !important;
    border-radius: 28px !important;
    box-shadow: 0 18px 42px rgba(17,17,17,0.08) !important;
}

body.cx-chat-body .krylo-chat-head {
    background: #ffffff !important;
    border-bottom: 1px solid var(--chat-line) !important;
}

body.cx-chat-body .krylo-chat-head h2,
body.cx-chat-body .krylo-chat-bubble strong,
body.cx-chat-body .krylo-order-context-card strong {
    color: var(--chat-black) !important;
    -webkit-text-fill-color: var(--chat-black) !important;
}

body.cx-chat-body .krylo-chat-head span,
body.cx-chat-body .krylo-chat-head small,
body.cx-chat-body .krylo-order-context-card span,
body.cx-chat-body .krylo-chat-bubble small {
    color: #5a5a5a !important;
    -webkit-text-fill-color: #5a5a5a !important;
}

body.cx-chat-body .krylo-chat-status.online {
    background: #0f3d2e !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body.cx-chat-body .krylo-unread-badge,
body.cx-chat-body .krylo-chat-status.closed {
    background: var(--chat-gold) !important;
    color: var(--chat-black) !important;
    -webkit-text-fill-color: var(--chat-black) !important;
}

body.cx-chat-body .krylo-quick-replies {
    background: #f7f7f7 !important;
    border-bottom: 1px solid var(--chat-line) !important;
}

body.cx-chat-body .krylo-quick-replies button {
    border-radius: 999px !important;
    background: #ffffff !important;
    color: var(--chat-black) !important;
    -webkit-text-fill-color: var(--chat-black) !important;
    border: 1px solid var(--chat-black) !important;
    font-weight: 950 !important;
}

body.cx-chat-body .krylo-quick-replies button:hover {
    background: var(--chat-gold) !important;
    border-color: var(--chat-gold) !important;
}

body.cx-chat-body .krylo-order-context-card {
    background: #ffffff !important;
    border: 1px solid var(--chat-line) !important;
    border-left: 5px solid var(--chat-gold) !important;
    box-shadow: 0 14px 32px rgba(17,17,17,0.07) !important;
}

body.cx-chat-body .krylo-order-context-card select {
    border-radius: 999px !important;
    border: 1px solid var(--chat-black) !important;
}

body.cx-chat-body .krylo-chat-messages {
    background:
        linear-gradient(135deg, #ffffff, #fbfbfb) !important;
}

body.cx-chat-body .krylo-chat-bubble {
    background: #ffffff !important;
    color: var(--chat-black) !important;
    border: 1px solid var(--chat-line) !important;
    border-left: 5px solid #0f3d2e !important;
    box-shadow: 0 12px 26px rgba(17,17,17,0.06) !important;
}

body.cx-chat-body .krylo-chat-bubble.mine {
    background: var(--chat-gold-soft) !important;
    border-left-color: var(--chat-gold) !important;
}

body.cx-chat-body .krylo-chat-bubble p {
    color: var(--chat-black) !important;
    -webkit-text-fill-color: var(--chat-black) !important;
}

body.cx-chat-body .krylo-chat-form {
    background: #ffffff !important;
    border-top: 1px solid var(--chat-line) !important;
}

body.cx-chat-body .krylo-chat-form textarea,
body.cx-chat-body .krylo-attachment-field input {
    background: #ffffff !important;
    color: var(--chat-black) !important;
    -webkit-text-fill-color: var(--chat-black) !important;
    border: 1px solid var(--chat-line) !important;
}

body.cx-chat-body .krylo-chat-form button {
    min-height: 48px !important;
    border-radius: 999px !important;
    background: var(--chat-gold) !important;
    color: var(--chat-black) !important;
    -webkit-text-fill-color: var(--chat-black) !important;
    border: 1px solid var(--chat-gold) !important;
    font-weight: 950 !important;
}

body.cx-chat-body .krylo-chat-form button:hover {
    background: var(--chat-black) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: var(--chat-black) !important;
}

body.cx-chat-body .krylo-attachment-field label,
body.cx-chat-body .krylo-typing-indicator {
    color: #5a5a5a !important;
    -webkit-text-fill-color: #5a5a5a !important;
}

@media (max-width: 720px) {
    body.cx-payment-body .cx-payment-hero,
    body.cx-payment-body .cx-payment-layout,
    body.cx-chat-body .cx-orders-hero,
    body.cx-chat-body .krylo-chat-shell {
        width: min(94%, calc(100% - 20px)) !important;
    }
}

/* =========================================================
   Final customer flow readability and fashion polish pass
   ========================================================= */
body.cx-payment-body .cx-payment-hero .cx-hero-copy {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    max-width: 790px !important;
}

body.cx-payment-body .cx-payment-hero .cx-kicker {
    color: #d2aa3d !important;
    -webkit-text-fill-color: #d2aa3d !important;
    text-shadow: 0 2px 12px rgba(0,0,0,0.45) !important;
}

body.cx-payment-body .cx-payment-hero h1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 8px 28px rgba(0,0,0,0.72) !important;
}

body.cx-payment-body .cx-payment-hero p:not(.cx-kicker) {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 4px 18px rgba(0,0,0,0.64) !important;
}

body.cx-payment-body .cx-bank-line {
    grid-template-columns: 46px minmax(110px, 1fr) minmax(130px, auto) !important;
}

body.cx-payment-body .cx-line-icon {
    background: #d2aa3d !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border-color: #d2aa3d !important;
}

body.cx-payment-body .cx-line-icon svg,
body.cx-payment-body .cx-line-icon svg * {
    stroke: #111111 !important;
}

body.cx-payment-body .cx-selected-order-head {
    align-items: flex-start !important;
    gap: 16px !important;
}

body.cx-payment-body .cx-selected-order-link {
    width: auto !important;
    min-width: 136px !important;
    max-width: none !important;
    padding: 12px 18px !important;
    white-space: nowrap !important;
    text-align: center !important;
    line-height: 1 !important;
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid #111111 !important;
    box-shadow: 6px 6px 0 rgba(210,170,61,0.28) !important;
}

body.cx-payment-body #copyAccountBtn {
    background: #d2aa3d !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: 1px solid #111111 !important;
    box-shadow: 7px 7px 0 rgba(17,17,17,0.16) !important;
    letter-spacing: 2.5px !important;
}

body.cx-payment-body #copyAccountBtn:hover,
body.cx-payment-body .cx-selected-order-link:hover {
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body.cx-checkout-body .cx-checkout-hero .cx-hero-copy,
body.cx-order-success-body .cx-success-hero .cx-hero-copy {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.cx-checkout-body .cx-checkout-hero h1,
body.cx-order-success-body .cx-success-hero h1,
body.cx-checkout-body .cx-checkout-hero p,
body.cx-order-success-body .cx-success-hero p {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 5px 20px rgba(0,0,0,0.66) !important;
}

body.cx-checkout-body .cx-checkout-main-card,
body.cx-checkout-body .cx-checkout-side-card,
body.cx-order-success-body .cx-success-card {
    background: #ffffff !important;
    color: #111111 !important;
    border: 1px solid #dedede !important;
    border-top: 5px solid #111111 !important;
    box-shadow: 10px 10px 0 rgba(210,170,61,0.28), 0 18px 45px rgba(17,17,17,0.08) !important;
}

body.cx-checkout-body .cx-checkout-side-card {
    border-top-color: #d2aa3d !important;
}

body.cx-checkout-body .cx-checkout-table th {
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body.cx-checkout-body .cx-checkout-table td {
    background: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

body.cx-checkout-body .cx-btn-dark,
body.cx-order-success-body .cx-btn-dark {
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #111111 !important;
}

body.cx-checkout-body .cx-btn-light,
body.cx-order-success-body .cx-btn-light {
    background: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: 1px solid #111111 !important;
}

body.cx-order-success-body .cx-success-item {
    background: #ffffff !important;
    border: 1px solid #dedede !important;
    border-bottom: 4px solid #111111 !important;
    box-shadow: 0 14px 32px rgba(17,17,17,0.08) !important;
}

body.krylo-compare-body,
body.krylo-detail-body {
    background: linear-gradient(135deg, #ffffff 0%, #f7f7f7 56%, #fff8df 100%) !important;
    color: #111111 !important;
}

body.krylo-compare-body *,
body.krylo-detail-body * {
    letter-spacing: 0 !important;
}

body.krylo-compare-body .compare-hero,
body.krylo-detail-body .product-page-hero {
    width: min(1450px, calc(100% - 64px)) !important;
    margin: 28px auto !important;
    padding: clamp(34px, 5vw, 64px) !important;
    border-radius: 30px !important;
    border: 1px solid rgba(210,170,61,0.55) !important;
    background:
        radial-gradient(circle at 12% 12%, rgba(210,170,61,0.28), transparent 30%),
        linear-gradient(135deg, #111111 0%, #191919 62%, #2a2415 100%) !important;
    box-shadow: 0 22px 64px rgba(17,17,17,0.16) !important;
}

body.krylo-compare-body .compare-hero h1,
body.krylo-detail-body .product-main-info h1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 8px 28px rgba(0,0,0,0.65) !important;
}

body.krylo-compare-body .compare-hero .status,
body.krylo-detail-body .product-main-info .status {
    color: #d2aa3d !important;
    -webkit-text-fill-color: #d2aa3d !important;
}

body.krylo-compare-body .compare-hero .tagline,
body.krylo-detail-body .product-main-info .product-category-text,
body.krylo-detail-body .product-main-info .product-description {
    color: #f5f5f5 !important;
    -webkit-text-fill-color: #f5f5f5 !important;
}

body.krylo-detail-body .product-visual-card,
body.krylo-detail-body .product-main-info,
body.krylo-detail-body .details-panel,
body.krylo-detail-body .review-form-card,
body.krylo-detail-body .customer-review-card,
body.krylo-detail-body .similar-card,
body.krylo-compare-body .compare-card,
body.krylo-compare-body .compare-empty-card {
    background: #ffffff !important;
    color: #111111 !important;
    border: 1px solid #dedede !important;
    border-top: 5px solid #111111 !important;
    box-shadow: 9px 9px 0 rgba(210,170,61,0.26), 0 16px 38px rgba(17,17,17,0.08) !important;
}

body.krylo-detail-body .product-main-info {
    background: rgba(17,17,17,0.88) !important;
    border-color: rgba(255,255,255,0.22) !important;
    border-top-color: #d2aa3d !important;
}

body.krylo-detail-body .product-price-row h2,
body.krylo-compare-body .compare-price {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    background: #fff8df !important;
    border: 1px solid #d2aa3d !important;
    border-radius: 999px !important;
    padding: 10px 18px !important;
    display: inline-flex !important;
    width: fit-content !important;
}

body.krylo-detail-body .product-main-info .product-price-row h2 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: transparent !important;
    border-color: rgba(210,170,61,0.75) !important;
}

body.krylo-compare-body .compare-table th,
body.krylo-compare-body .compare-table td {
    border-color: #dedede !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

body.krylo-compare-body .compare-table th {
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body.krylo-compare-body .dashboard-main-btn,
body.krylo-detail-body .dashboard-main-btn {
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid #111111 !important;
    box-shadow: none !important;
}

body.krylo-compare-body .dashboard-outline-btn,
body.krylo-detail-body .dashboard-outline-btn {
    background: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: 1px solid #111111 !important;
}

body.krylo-compare-body .dashboard-main-btn:hover,
body.krylo-detail-body .dashboard-main-btn:hover,
body.krylo-compare-body .dashboard-outline-btn:hover,
body.krylo-detail-body .dashboard-outline-btn:hover {
    background: #d2aa3d !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border-color: #d2aa3d !important;
}

@media (max-width: 760px) {
    body.cx-payment-body .cx-selected-order-head,
    body.cx-payment-body .cx-bank-line {
        grid-template-columns: 1fr !important;
    }

    body.cx-payment-body .cx-selected-order-link {
        width: 100% !important;
    }

    body.krylo-compare-body .compare-hero,
    body.krylo-detail-body .product-page-hero {
        width: min(94%, calc(100% - 20px)) !important;
    }
}

/* =========================================================
   Product detail and compare refinement pass
   ========================================================= */
body.krylo-detail-body .product-page-hero {
    background:
        linear-gradient(90deg, rgba(17,17,17,0.92) 0%, rgba(17,17,17,0.72) 36%, rgba(210,170,61,0.18) 100%),
        #ffffff !important;
    align-items: stretch !important;
    gap: 24px !important;
}

body.krylo-detail-body .product-visual-card {
    border-top-color: #d2aa3d !important;
    background:
        linear-gradient(135deg, #ffffff 0%, #fbfbfb 68%, #fff8df 100%) !important;
}

body.krylo-detail-body .product-main-info {
    background: #ffffff !important;
    color: #111111 !important;
    border-color: #dedede !important;
    border-top-color: #d2aa3d !important;
    box-shadow: 9px 9px 0 rgba(17,17,17,0.14), 0 18px 45px rgba(17,17,17,0.09) !important;
}

body.krylo-detail-body .product-main-info h1,
body.krylo-detail-body .product-main-info .product-category-text,
body.krylo-detail-body .product-main-info .product-description,
body.krylo-detail-body .product-main-info strong,
body.krylo-detail-body .product-main-info p,
body.krylo-detail-body .product-main-info span {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    text-shadow: none !important;
}

body.krylo-detail-body .product-main-info .status {
    color: #b88b20 !important;
    -webkit-text-fill-color: #b88b20 !important;
}

body.krylo-detail-body .product-main-info .product-price-row h2 {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    background: #fff8df !important;
    border: 1px solid #d2aa3d !important;
    box-shadow: 5px 5px 0 rgba(210,170,61,0.24) !important;
}

body.krylo-detail-body .review-mini-card,
body.krylo-detail-body .product-info-grid > div,
body.krylo-detail-body .option-list span,
body.krylo-detail-body .care-box {
    background: #ffffff !important;
    color: #111111 !important;
    border: 1px solid #dedede !important;
    border-left: 4px solid #d2aa3d !important;
    box-shadow: 0 10px 24px rgba(17,17,17,0.06) !important;
}

body.krylo-detail-body .review-mini-card .dashboard-main-btn {
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body.krylo-compare-body .compare-page-wrap {
    width: min(1450px, calc(100% - 64px)) !important;
    margin: 0 auto 56px !important;
}

body.krylo-compare-body .compare-hero {
    position: relative !important;
    overflow: hidden !important;
}

body.krylo-compare-body .compare-hero::before {
    content: "" !important;
    position: absolute !important;
    inset: 24px !important;
    border: 1px solid rgba(255,255,255,0.26) !important;
    border-radius: 22px !important;
    pointer-events: none !important;
}

body.krylo-compare-body .compare-grid {
    gap: 26px !important;
    align-items: stretch !important;
}

body.krylo-compare-body .compare-card {
    position: relative !important;
    overflow: hidden !important;
    border-top-color: #d2aa3d !important;
    background:
        linear-gradient(180deg, #ffffff 0%, #ffffff 72%, #fff8df 100%) !important;
}

body.krylo-compare-body .compare-card::before {
    content: "KRYLO EDIT" !important;
    position: absolute !important;
    top: 18px !important;
    right: -42px !important;
    transform: rotate(35deg) !important;
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: 2px !important;
    padding: 9px 46px !important;
    z-index: 2 !important;
}

body.krylo-compare-body .compare-image-box {
    background:
        linear-gradient(135deg, #fbfbfb, #fff8df) !important;
    border: 1px solid #dedede !important;
    border-bottom: 4px solid #111111 !important;
}

body.krylo-compare-body .compare-badge {
    display: inline-flex !important;
    width: fit-content !important;
    padding: 8px 14px !important;
    border-radius: 999px !important;
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-weight: 950 !important;
}

body.krylo-compare-body .compare-card h2 {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

body.krylo-compare-body .compare-table {
    border-collapse: separate !important;
    border-spacing: 0 8px !important;
}

body.krylo-compare-body .compare-table tr {
    box-shadow: 0 8px 18px rgba(17,17,17,0.05) !important;
}

body.krylo-compare-body .compare-table th {
    border-radius: 10px 0 0 10px !important;
}

body.krylo-compare-body .compare-table td {
    background: #ffffff !important;
    border-radius: 0 10px 10px 0 !important;
}

body.krylo-compare-body .compare-footer-actions {
    background: #111111 !important;
    border: 1px solid rgba(210,170,61,0.5) !important;
    border-radius: 24px !important;
    padding: 22px !important;
    box-shadow: 8px 8px 0 rgba(210,170,61,0.3) !important;
}

/* =========================================================
   Compare, checkout, and order success luxury softening pass
   ========================================================= */
body.krylo-compare-body .compare-card {
    background:
        linear-gradient(180deg, #ffffff 0%, #fffdf6 62%, #f8f1da 100%) !important;
    border: 1px solid #e3dcc7 !important;
    border-top: 4px solid #caa53a !important;
    box-shadow: 0 18px 44px rgba(20,20,20,0.08) !important;
}

body.krylo-compare-body .compare-card::before {
    background: #caa53a !important;
    color: #141414 !important;
    -webkit-text-fill-color: #141414 !important;
}

body.krylo-compare-body .compare-image-box {
    background:
        radial-gradient(circle at 50% 34%, rgba(202,165,58,0.2), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, #f8f8f8 100%) !important;
    border: 1px solid #e2e2e2 !important;
    border-bottom: 3px solid #caa53a !important;
}

body.krylo-compare-body .compare-table {
    border-spacing: 0 10px !important;
}

body.krylo-compare-body .compare-table th {
    width: 210px !important;
    background: #f6f0dd !important;
    color: #1b1b1b !important;
    -webkit-text-fill-color: #1b1b1b !important;
    border: 1px solid #e4d7ad !important;
    border-right: 0 !important;
    border-radius: 14px 0 0 14px !important;
    padding: 16px 18px !important;
}

body.krylo-compare-body .compare-table td {
    background: #ffffff !important;
    border: 1px solid #e4d7ad !important;
    border-left: 0 !important;
    border-radius: 0 14px 14px 0 !important;
    padding: 16px 18px !important;
}

body.krylo-compare-body .compare-actions {
    gap: 14px !important;
    margin-top: 22px !important;
}

body.krylo-compare-body .dashboard-main-btn,
body.krylo-compare-body .dashboard-outline-btn {
    min-height: 54px !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    letter-spacing: 0 !important;
}

body.krylo-compare-body .dashboard-main-btn {
    background: #caa53a !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border-color: #caa53a !important;
}

body.krylo-compare-body .dashboard-outline-btn {
    background: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border-color: #111111 !important;
}

body.krylo-compare-body .compare-footer-actions {
    background: #fff8df !important;
    border: 1px solid #d9c47c !important;
    box-shadow: none !important;
}

body.cx-checkout-body .cx-checkout-side-card,
body.cx-order-success-body .cx-success-card {
    background:
        linear-gradient(180deg, #ffffff 0%, #fffdf7 100%) !important;
    border: 1px solid #e2e2e2 !important;
    border-top: 4px solid #caa53a !important;
    box-shadow: 0 18px 44px rgba(20,20,20,0.08) !important;
}

body.cx-checkout-body .cx-checkout-side-card .cx-bank-line {
    display: grid !important;
    grid-template-columns: minmax(118px, 0.9fr) minmax(150px, 1.35fr) !important;
    align-items: center !important;
    gap: 26px !important;
    padding: 18px 0 !important;
    border-bottom: 1px solid #e7e1d1 !important;
}

body.cx-checkout-body .cx-checkout-side-card .cx-bank-line span,
body.cx-checkout-body .cx-checkout-side-card .cx-bank-line strong {
    display: block !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    line-height: 1.25 !important;
}

body.cx-checkout-body .cx-checkout-side-card .cx-bank-line span {
    color: #5c5c5c !important;
    -webkit-text-fill-color: #5c5c5c !important;
    font-size: 14px !important;
    letter-spacing: 2.5px !important;
}

body.cx-checkout-body .cx-checkout-side-card .cx-bank-line strong {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-size: clamp(16px, 1.5vw, 20px) !important;
    text-align: left !important;
}

body.cx-checkout-body .cx-checkout-total-box,
body.cx-order-success-body .cx-order-details div {
    background: #fff8df !important;
    color: #111111 !important;
    border: 1px solid #d9c47c !important;
    border-radius: 24px !important;
    box-shadow: none !important;
}

body.cx-checkout-body .cx-checkout-total-box {
    padding: 24px !important;
    margin-top: 24px !important;
}

body.cx-checkout-body .cx-checkout-total-box span,
body.cx-checkout-body .cx-checkout-total-box strong,
body.cx-checkout-body .cx-checkout-total-box small,
body.cx-order-success-body .cx-order-details div span,
body.cx-order-success-body .cx-order-details div strong {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    text-shadow: none !important;
}

body.cx-checkout-body .cx-checkout-total-box strong {
    display: block !important;
    margin: 10px 0 !important;
    font-size: clamp(34px, 4vw, 48px) !important;
    line-height: 1 !important;
}

body.cx-checkout-body .cx-btn-dark,
body.cx-order-success-body .cx-btn-dark {
    background: #caa53a !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border-color: #caa53a !important;
    box-shadow: none !important;
    border-radius: 999px !important;
}

body.cx-checkout-body .cx-btn-light,
body.cx-order-success-body .cx-btn-light {
    border-radius: 999px !important;
    box-shadow: none !important;
}

body.cx-order-success-body .cx-order-details {
    gap: 14px !important;
}

body.cx-order-success-body .cx-order-details div {
    min-height: 118px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 22px !important;
}

body.cx-order-success-body .cx-order-details div strong {
    font-size: clamp(18px, 2vw, 24px) !important;
    line-height: 1.12 !important;
    overflow-wrap: anywhere !important;
}

/* Compact order success detail cards */
body.cx-order-success-body .cx-order-details {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
    gap: 10px !important;
}

body.cx-order-success-body .cx-order-details div {
    min-height: 92px !important;
    padding: 16px 18px !important;
    border-radius: 18px !important;
    gap: 6px !important;
}

body.cx-order-success-body .cx-order-details div span {
    font-size: 12px !important;
    letter-spacing: 1.8px !important;
    line-height: 1.15 !important;
}

body.cx-order-success-body .cx-order-details div strong {
    font-size: clamp(18px, 4.8vw, 28px) !important;
    line-height: 1.08 !important;
    word-break: break-word !important;
}

body.cx-order-success-body .cx-proof-under-tracking {
    min-height: 50px !important;
    padding: 13px 18px !important;
}

/* Order success mobile wrapping fix */
body.cx-order-success-body .cx-order-details div {
    overflow: hidden !important;
}

body.cx-order-success-body .cx-order-details div strong {
    max-width: 100% !important;
    text-align: left !important;
    font-size: clamp(18px, 2.2vw, 24px) !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    hyphens: none !important;
}

body.cx-order-success-body .cx-proof-under-tracking {
    width: 100% !important;
    max-width: 280px !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    letter-spacing: 1.2px !important;
}

@media (max-width: 720px) {
    body.cx-checkout-body .cx-checkout-side-card .cx-bank-line {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    body.krylo-compare-body .compare-table th,
    body.krylo-compare-body .compare-table td {
        display: block !important;
        width: 100% !important;
        border: 1px solid #e4d7ad !important;
        border-radius: 14px !important;
    }

    body.cx-order-success-body .cx-order-details {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    body.cx-order-success-body .cx-order-details div {
        min-height: 116px !important;
        padding: 16px 14px !important;
        align-items: flex-start !important;
    }

    body.cx-order-success-body .cx-order-details div span {
        font-size: 11px !important;
        letter-spacing: 1.5px !important;
    }

    body.cx-order-success-body .cx-order-details div strong {
        font-size: clamp(19px, 5.4vw, 26px) !important;
        line-height: 1.08 !important;
    }

    body.cx-order-success-body .cx-proof-under-tracking {
        max-width: 100% !important;
        min-height: 52px !important;
        padding: 12px 18px !important;
        border-radius: 999px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 430px) {
    body.cx-order-success-body .cx-order-details {
        grid-template-columns: 1fr !important;
    }

    body.cx-order-success-body .cx-order-details div {
        min-height: 86px !important;
    }

    body.cx-order-success-body .cx-order-details div strong {
        font-size: 22px !important;
    }

    body.cx-order-success-body .cx-order-details div strong:first-letter {
        font-size: inherit !important;
    }
}

/* =========================================================
   Customer auth pages premium black/white/gold theme
   ========================================================= */
body.krylo-auth-body {
    --auth-black: #111111;
    --auth-ink: #171717;
    --auth-muted: #626262;
    --auth-gold: #caa53a;
    --auth-soft: #fff8df;
    --auth-line: #dedede;
    min-height: 100vh !important;
    margin: 0 !important;
    background:
        radial-gradient(circle at 12% 10%, rgba(202,165,58,0.22), transparent 28%),
        linear-gradient(135deg, #ffffff 0%, #f7f7f7 56%, #fff8df 100%) !important;
    color: var(--auth-ink) !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

body.krylo-auth-body .split-container {
    width: min(1180px, calc(100% - 48px)) !important;
    min-height: min(760px, calc(100vh - 56px)) !important;
    margin: 28px auto !important;
    display: grid !important;
    grid-template-columns: minmax(360px, 1.05fr) minmax(360px, 0.95fr) !important;
    background: #ffffff !important;
    border: 1px solid var(--auth-line) !important;
    border-radius: 32px !important;
    overflow: hidden !important;
    box-shadow: 0 26px 70px rgba(17,17,17,0.13) !important;
}

body.krylo-auth-body .split-image {
    position: relative !important;
    min-height: 640px !important;
    background: var(--auth-black) !important;
    overflow: hidden !important;
}

body.krylo-auth-body .split-image::before {
    content: "KRYLO FASHION" !important;
    position: absolute !important;
    left: 34px !important;
    top: 34px !important;
    z-index: 2 !important;
    padding: 10px 14px !important;
    border: 1px solid rgba(255,255,255,0.34) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: 3px !important;
}

body.krylo-auth-body .split-image::after {
    content: "Minimal looks. Everyday confidence." !important;
    position: absolute !important;
    left: 34px !important;
    right: 34px !important;
    bottom: 34px !important;
    z-index: 2 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: clamp(34px, 4vw, 58px) !important;
    line-height: 0.96 !important;
    font-weight: 950 !important;
    text-shadow: 0 8px 26px rgba(0,0,0,0.6) !important;
}

body.krylo-auth-body .split-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: grayscale(18%) contrast(1.06) brightness(0.82) !important;
    transform: scale(1.02) !important;
}

body.krylo-auth-body .split-form {
    min-height: 640px !important;
    display: grid !important;
    place-items: center !important;
    padding: clamp(28px, 5vw, 64px) !important;
    background:
        linear-gradient(180deg, #ffffff 0%, #ffffff 68%, #fff8df 100%) !important;
}

body.krylo-auth-body .auth-box {
    width: min(100%, 470px) !important;
    margin: 0 !important;
    padding: clamp(26px, 4vw, 42px) !important;
    background: #ffffff !important;
    color: var(--auth-ink) !important;
    border: 1px solid var(--auth-line) !important;
    border-top: 5px solid var(--auth-gold) !important;
    border-radius: 26px !important;
    box-shadow: 9px 9px 0 rgba(202,165,58,0.22), 0 18px 42px rgba(17,17,17,0.08) !important;
}

body.krylo-auth-body .auth-box h1 {
    margin: 0 0 10px !important;
    color: var(--auth-black) !important;
    -webkit-text-fill-color: var(--auth-black) !important;
    font-size: clamp(42px, 5vw, 66px) !important;
    line-height: 0.95 !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
}

body.krylo-auth-body .auth-box h2 {
    margin: 0 0 24px !important;
    color: var(--auth-muted) !important;
    -webkit-text-fill-color: var(--auth-muted) !important;
    font-size: 17px !important;
    line-height: 1.45 !important;
    font-weight: 800 !important;
}

body.krylo-auth-body .auth-box form {
    display: grid !important;
    gap: 14px !important;
    margin: 0 0 20px !important;
}

body.krylo-auth-body .auth-box input {
    width: 100% !important;
    min-height: 54px !important;
    padding: 0 16px !important;
    background: #ffffff !important;
    color: var(--auth-black) !important;
    -webkit-text-fill-color: var(--auth-black) !important;
    border: 1px solid var(--auth-line) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    font-size: 15px !important;
    font-weight: 800 !important;
}

body.krylo-auth-body .auth-box input:focus {
    outline: none !important;
    border-color: var(--auth-gold) !important;
    box-shadow: 0 0 0 4px rgba(202,165,58,0.18) !important;
}

body.krylo-auth-body .password-field {
    position: relative !important;
    display: block !important;
}

body.krylo-auth-body .auth-box .password-field input {
    padding-right: 88px !important;
}

body.krylo-auth-body .toggle-password {
    position: absolute !important;
    top: 50% !important;
    right: 8px !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    min-width: 64px !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    background: var(--auth-soft) !important;
    color: var(--auth-black) !important;
    -webkit-text-fill-color: var(--auth-black) !important;
    border: 1px solid #d9c47c !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
}

body.krylo-auth-body .auth-box button[type="submit"] {
    min-height: 56px !important;
    border-radius: 999px !important;
    background: var(--auth-black) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid var(--auth-black) !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    letter-spacing: 2px !important;
    box-shadow: 6px 6px 0 rgba(202,165,58,0.28) !important;
    cursor: pointer !important;
}

body.krylo-auth-body .auth-box button[type="submit"]:hover {
    background: var(--auth-gold) !important;
    color: var(--auth-black) !important;
    -webkit-text-fill-color: var(--auth-black) !important;
    border-color: var(--auth-gold) !important;
}

body.krylo-auth-body .auth-box a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 44px !important;
    margin-top: 10px !important;
    color: var(--auth-black) !important;
    -webkit-text-fill-color: var(--auth-black) !important;
    background: #ffffff !important;
    border: 1px solid var(--auth-black) !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 950 !important;
}

body.krylo-auth-body .auth-box a:hover {
    background: var(--auth-soft) !important;
    border-color: var(--auth-gold) !important;
}

body.krylo-auth-body .error-msg,
body.krylo-auth-body .auth-message,
body.krylo-auth-body .auth-box > p {
    margin: 0 0 18px !important;
    padding: 12px 14px !important;
    background: var(--auth-soft) !important;
    color: var(--auth-black) !important;
    -webkit-text-fill-color: var(--auth-black) !important;
    border: 1px solid #d9c47c !important;
    border-radius: 16px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
}

body.krylo-auth-body .auth-box > p:empty {
    display: none !important;
}

body.krylo-auth-body .password-rules {
    display: grid !important;
    gap: 6px !important;
    margin: -4px 0 4px !important;
}

body.krylo-auth-body .password-rules span {
    color: var(--auth-muted) !important;
    -webkit-text-fill-color: var(--auth-muted) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

body.krylo-auth-body .password-rules span.valid {
    color: #0f5132 !important;
    -webkit-text-fill-color: #0f5132 !important;
}

@media (max-width: 920px) {
    body.krylo-auth-body .split-container {
        grid-template-columns: 1fr !important;
    }

    body.krylo-auth-body .split-image {
        min-height: 320px !important;
    }

    body.krylo-auth-body .split-form {
        min-height: auto !important;
    }
}

@media (max-width: 560px) {
    body.krylo-auth-body .split-container {
        width: min(94%, calc(100% - 18px)) !important;
        margin: 14px auto !important;
        border-radius: 22px !important;
    }

    body.krylo-auth-body .auth-box {
        padding: 24px 18px !important;
        border-radius: 20px !important;
        box-shadow: none !important;
    }

    body.krylo-auth-body .split-form {
        padding: 18px !important;
    }
}

/* =========================================================
   Staff UI premium fashion operations theme
   ========================================================= */
body.staff-page {
    --staff-ink: #111111;
    --staff-text: #1c1c1c;
    --staff-muted: #636363;
    --staff-gold: #caa53a;
    --staff-gold-soft: #fff8df;
    --staff-ivory: #fffdf7;
    --staff-line: #dedede;
    --staff-green: #0f5132;
    --staff-red: #9f1d1d;
    margin: 0 !important;
    min-height: 100vh !important;
    background:
        radial-gradient(circle at 9% 7%, rgba(202,165,58,0.18), transparent 25%),
        linear-gradient(135deg, #ffffff 0%, #f7f7f7 56%, #fff8df 100%) !important;
    color: var(--staff-text) !important;
    font-family: Arial, Helvetica, sans-serif !important;
}

body.staff-page *,
body.staff-page *::before,
body.staff-page *::after {
    box-sizing: border-box !important;
    letter-spacing: 0 !important;
}

body.staff-page .staff-nav {
    width: min(1480px, calc(100% - 48px)) !important;
    margin: 18px auto 0 !important;
    padding: 14px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    background: rgba(255,255,255,0.94) !important;
    border: 1px solid var(--staff-line) !important;
    border-radius: 999px !important;
    box-shadow: 0 16px 36px rgba(17,17,17,0.08) !important;
}

body.staff-page .staff-nav .logo {
    color: var(--staff-ink) !important;
    -webkit-text-fill-color: var(--staff-ink) !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    letter-spacing: 3px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

body.staff-page .staff-nav .logo::before {
    content: "ST" !important;
    display: inline-grid !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    margin-right: 10px !important;
    border-radius: 50% !important;
    background: var(--staff-ink) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 11px !important;
    letter-spacing: 1px !important;
}

body.staff-page .staff-nav .nav-links {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

body.staff-page .staff-nav .nav-links a {
    min-height: 38px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    color: var(--staff-ink) !important;
    -webkit-text-fill-color: var(--staff-ink) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

body.staff-page .staff-nav .nav-links a:hover,
body.staff-page .staff-nav .nav-links a.bag {
    background: var(--staff-ink) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: var(--staff-ink) !important;
}

body.staff-page .staff-fashion-hero {
    width: min(1480px, calc(100% - 48px)) !important;
    min-height: 390px !important;
    margin: 24px auto !important;
    padding: clamp(34px, 5vw, 70px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 0.44fr) !important;
    align-items: center !important;
    gap: 34px !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 34px !important;
    border: 1px solid rgba(202,165,58,0.55) !important;
    background:
        linear-gradient(90deg, rgba(17,17,17,0.94) 0%, rgba(17,17,17,0.82) 56%, rgba(202,165,58,0.26) 100%),
        #111111 !important;
    box-shadow: 0 26px 76px rgba(17,17,17,0.18) !important;
}

body.staff-page .staff-fashion-hero::before {
    content: "" !important;
    position: absolute !important;
    inset: 22px !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    border-radius: 24px !important;
    pointer-events: none !important;
}

body.staff-page .staff-kicker,
body.staff-page .staff-panel-head span,
body.staff-page .staff-stat-card span,
body.staff-page .staff-action-card span {
    color: var(--staff-gold) !important;
    -webkit-text-fill-color: var(--staff-gold) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
}

body.staff-page .staff-hero-copy {
    position: relative !important;
    z-index: 2 !important;
    max-width: 790px !important;
    background: transparent !important;
}

body.staff-page .staff-hero-copy h1 {
    margin: 12px 0 16px !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: clamp(46px, 6vw, 88px) !important;
    line-height: 0.96 !important;
    font-weight: 950 !important;
    text-shadow: 0 8px 26px rgba(0,0,0,0.55) !important;
}

body.staff-page .staff-hero-copy p:not(.staff-kicker) {
    color: #f3f3f3 !important;
    -webkit-text-fill-color: #a89c9c !important;
    font-size: 17px !important;
    line-height: 1.7 !important;
    max-width: 720px !important;
}

body.staff-page .staff-hero-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-top: 26px !important;
}

body.staff-page .staff-primary-btn,
body.staff-page .staff-secondary-btn,
body.staff-page .staff-sync-btn,
body.staff-page .checkout-btn,
body.staff-page .admin-form button,
body.staff-page .profile-actions button {
    min-height: 46px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
    background: var(--staff-gold) !important;
    background-image: none !important;
    color: var(--staff-ink) !important;
    -webkit-text-fill-color: var(--staff-ink) !important;
    border: 1px solid var(--staff-gold) !important;
    box-shadow: none !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
}

body.staff-page .staff-secondary-btn,
body.staff-page .profile-actions .outline,
body.staff-page .cancel-btn {
    background: #ffffff !important;
    color: var(--staff-ink) !important;
    -webkit-text-fill-color: var(--staff-ink) !important;
    border: 1px solid var(--staff-ink) !important;
}

body.staff-page .staff-primary-btn:hover,
body.staff-page .staff-secondary-btn:hover,
body.staff-page .staff-sync-btn:hover,
body.staff-page .checkout-btn:hover,
body.staff-page .admin-form button:hover,
body.staff-page .profile-actions button:hover {
    background: var(--staff-ink) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: var(--staff-ink) !important;
}

body.staff-page .staff-hero-image,
body.staff-page .staff-hero-visual {
    position: relative !important;
    z-index: 2 !important;
    min-height: 260px !important;
    border-radius: 24px !important;
    border: 1px solid rgba(255,255,255,0.28) !important;
    background: rgba(255,255,255,0.08) !important;
    overflow: hidden !important;
    box-shadow: 10px 10px 0 rgba(202,165,58,0.22) !important;
}

body.staff-page .staff-hero-image img,
body.staff-page .staff-hero-visual img {
    width: 100% !important;
    height: 100% !important;
    min-height: 260px !important;
    object-fit: cover !important;
    filter: contrast(1.06) saturate(0.88) brightness(0.9) !important;
}

body.staff-page .staff-stats,
body.staff-page .staff-grid,
body.staff-page .admin-panel,
body.staff-page .staff-table-panel,
body.staff-page .staff-profile-panel,
body.staff-page .krylo-chat-admin-layout {
    width: min(1480px, calc(100% - 48px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.staff-page .staff-stats {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 24px !important;
}

body.staff-page .staff-stat-card,
body.staff-page .staff-panel,
body.staff-page .admin-panel,
body.staff-page .staff-action-card,
body.staff-page .staff-summary-row,
body.staff-page .profile-info-card,
body.staff-page .krylo-chat-shell,
body.staff-page .krylo-chat-thread-list {
    background: #ffffff !important;
    color: var(--staff-text) !important;
    border: 1px solid var(--staff-line) !important;
    border-radius: 22px !important;
    box-shadow: 0 18px 42px rgba(17,17,17,0.08) !important;
}

body.staff-page .staff-stat-card {
    min-height: 150px !important;
    padding: 22px !important;
    border-top: 4px solid var(--staff-ink) !important;
}

body.staff-page .staff-stat-card.urgent {
    border-top-color: var(--staff-red) !important;
}

body.staff-page .staff-stat-card.accent {
    border-top-color: var(--staff-gold) !important;
}

body.staff-page .staff-stat-card h3 {
    margin: 10px 0 8px !important;
    color: var(--staff-ink) !important;
    -webkit-text-fill-color: var(--staff-ink) !important;
    font-size: clamp(34px, 4vw, 52px) !important;
    line-height: 1 !important;
}

body.staff-page .staff-stat-card p,
body.staff-page .staff-action-card small,
body.staff-page .staff-summary-row span,
body.staff-page .staff-muted,
body.staff-page .form-note,
body.staff-page label {
    color: var(--staff-muted) !important;
    -webkit-text-fill-color: var(--staff-muted) !important;
}

body.staff-page .staff-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1.4fr) minmax(320px, 0.6fr) !important;
    gap: 18px !important;
    margin-bottom: 46px !important;
}

body.staff-page .staff-panel,
body.staff-page .admin-panel {
    padding: clamp(20px, 3vw, 32px) !important;
}

body.staff-page .staff-panel-head {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-bottom: 18px !important;
}

body.staff-page .staff-panel-head h2,
body.staff-page .admin-panel h2 {
    margin: 0 !important;
    color: var(--staff-ink) !important;
    -webkit-text-fill-color: var(--staff-ink) !important;
    font-size: clamp(28px, 3vw, 44px) !important;
    line-height: 1.05 !important;
    font-weight: 950 !important;
}

body.staff-page .staff-action-grid,
body.staff-page .profile-view-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

body.staff-page .staff-action-card,
body.staff-page .profile-info-card,
body.staff-page .staff-summary-row {
    padding: 18px !important;
    text-decoration: none !important;
}

body.staff-page .staff-action-card {
    border-left: 5px solid var(--staff-gold) !important;
}

body.staff-page .staff-action-card strong,
body.staff-page .profile-info-card strong,
body.staff-page .staff-summary-row strong,
body.staff-page .staff-money,
body.staff-page .staff-order-id {
    color: var(--staff-ink) !important;
    -webkit-text-fill-color: var(--staff-ink) !important;
    font-weight: 950 !important;
}

body.staff-page .staff-table-wrap {
    width: 100% !important;
    overflow-x: auto !important;
    border-radius: 20px !important;
    border: 1px solid var(--staff-line) !important;
    background: #ffffff !important;
}

body.staff-page .admin-table,
body.staff-page .staff-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: #ffffff !important;
    color: var(--staff-text) !important;
    min-width: 900px !important;
}

body.staff-page .admin-table th,
body.staff-page .staff-table th {
    position: sticky !important;
    top: 0 !important;
    z-index: 1 !important;
    padding: 16px !important;
    background: var(--staff-ink) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 0 !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: 1.4px !important;
    text-transform: uppercase !important;
    text-align: left !important;
}

body.staff-page .admin-table td,
body.staff-page .staff-table td {
    padding: 16px !important;
    background: #ffffff !important;
    color: var(--staff-text) !important;
    -webkit-text-fill-color: var(--staff-text) !important;
    border: 0 !important;
    border-bottom: 1px solid #eeeeee !important;
    vertical-align: middle !important;
    font-size: 14px !important;
}

body.staff-page .admin-table tr:nth-child(even) td,
body.staff-page .staff-table tr:nth-child(even) td {
    background: #fffdf7 !important;
}

body.staff-page .admin-table tr:hover td,
body.staff-page .staff-table tr:hover td {
    background: var(--staff-gold-soft) !important;
}

body.staff-page .staff-status-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 32px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    background: #f1f1f1 !important;
    color: var(--staff-ink) !important;
    -webkit-text-fill-color: var(--staff-ink) !important;
    border: 1px solid #dfdfdf !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
}

body.staff-page .staff-status-pill.good {
    background: #eaf6ef !important;
    color: var(--staff-green) !important;
    -webkit-text-fill-color: var(--staff-green) !important;
    border-color: #b8dfc6 !important;
}

body.staff-page .staff-status-pill.warn {
    background: var(--staff-gold-soft) !important;
    color: #7b5a09 !important;
    -webkit-text-fill-color: #7b5a09 !important;
    border-color: #e2c86f !important;
}

body.staff-page .staff-status-pill.bad,
body.staff-page .staff-reject-btn {
    background: #fff0f0 !important;
    color: var(--staff-red) !important;
    -webkit-text-fill-color: var(--staff-red) !important;
    border-color: #f0b8b8 !important;
}

body.staff-page .staff-order-sync-form {
    display: grid !important;
    grid-template-columns: minmax(150px, 1fr) minmax(140px, 0.8fr) auto !important;
    gap: 8px !important;
    align-items: center !important;
}

body.staff-page .staff-tracking-input,
body.staff-page .staff-status-select,
body.staff-page .admin-form input,
body.staff-page .admin-form select,
body.staff-page .admin-form textarea,
body.staff-page .krylo-chat-form textarea,
body.staff-page .krylo-chat-form input {
    min-height: 44px !important;
    width: 100% !important;
    padding: 0 14px !important;
    background: #ffffff !important;
    color: var(--staff-ink) !important;
    -webkit-text-fill-color: var(--staff-ink) !important;
    border: 1px solid var(--staff-line) !important;
    border-radius: 14px !important;
    font-weight: 800 !important;
}

body.staff-page .staff-flash {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 38px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    background: var(--staff-gold-soft) !important;
    color: var(--staff-ink) !important;
    -webkit-text-fill-color: var(--staff-ink) !important;
    border: 1px solid #d9c47c !important;
    font-weight: 900 !important;
}

body.staff-page .krylo-chat-admin-layout {
    display: grid !important;
    grid-template-columns: minmax(260px, 0.32fr) minmax(0, 1fr) !important;
    gap: 18px !important;
    margin-bottom: 46px !important;
}

body.staff-page .krylo-chat-thread-list,
body.staff-page .krylo-chat-shell {
    overflow: hidden !important;
}

body.staff-page .krylo-chat-thread-list h2,
body.staff-page .krylo-chat-head h2 {
    color: var(--staff-ink) !important;
    -webkit-text-fill-color: var(--staff-ink) !important;
}

body.staff-page .krylo-chat-thread-list a.active,
body.staff-page .krylo-chat-thread-list a:hover {
    background: var(--staff-gold-soft) !important;
    border-color: #d9c47c !important;
}

body.staff-page .krylo-chat-bubble {
    background: #ffffff !important;
    border: 1px solid var(--staff-line) !important;
    border-left: 5px solid var(--staff-ink) !important;
    color: var(--staff-text) !important;
}

body.staff-page .krylo-chat-bubble.mine {
    background: var(--staff-gold-soft) !important;
    border-left-color: var(--staff-gold) !important;
}

@media (max-width: 1050px) {
    body.staff-page .staff-fashion-hero,
    body.staff-page .staff-grid,
    body.staff-page .krylo-chat-admin-layout {
        grid-template-columns: 1fr !important;
    }

    body.staff-page .staff-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 720px) {
    body.staff-page .staff-nav,
    body.staff-page .staff-fashion-hero,
    body.staff-page .staff-stats,
    body.staff-page .staff-grid,
    body.staff-page .admin-panel,
    body.staff-page .staff-table-panel,
    body.staff-page .staff-profile-panel,
    body.staff-page .krylo-chat-admin-layout {
        width: min(94%, calc(100% - 18px)) !important;
    }

    body.staff-page .staff-nav {
        border-radius: 24px !important;
        align-items: flex-start !important;
        flex-direction: column !important;
    }

    body.staff-page .staff-stats,
    body.staff-page .staff-action-grid,
    body.staff-page .profile-view-grid {
        grid-template-columns: 1fr !important;
    }

    body.staff-page .staff-order-sync-form {
        grid-template-columns: 1fr !important;
    }

    body.staff-page .staff-hero-copy h1 {
        font-size: clamp(40px, 12vw, 58px) !important;
    }
}

/* =========================================================
   Staff navbar/customer-nav match and compact dashboard hero
   ========================================================= */
body.staff-page .staff-nav.krylo-customer-nav {
    width: 100% !important;
    margin: 0 !important;
    padding: 18px clamp(18px, 4vw, 46px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    border-radius: 0 !important;
    background: rgba(255,255,255,0.96) !important;
    border: 0 !important;
    border-bottom: 1px solid #dedede !important;
    box-shadow: 0 10px 28px rgba(0,0,0,0.06) !important;
}

body.staff-page .staff-nav.krylo-customer-nav .logo {
    display: inline-flex !important;
    align-items: center !important;
    min-height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    letter-spacing: 8px !important;
}

body.staff-page .staff-nav.krylo-customer-nav .logo::before {
    content: none !important;
    display: none !important;
}

body.staff-page .staff-nav.krylo-customer-nav .nav-links {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

body.staff-page .staff-nav.krylo-customer-nav .nav-links a {
    min-height: 40px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

body.staff-page .staff-nav.krylo-customer-nav .nav-links a:hover,
body.staff-page .staff-nav.krylo-customer-nav .nav-links a.bag {
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #111111 !important;
}

body.staff-dashboard-page .staff-dashboard-hero {
    width: min(1480px, calc(100% - 48px)) !important;
    min-height: 300px !important;
    margin: 24px auto 20px !important;
    padding: clamp(22px, 3vw, 38px) !important;
    grid-template-columns: minmax(0, 0.82fr) minmax(360px, 0.62fr) !important;
    gap: 22px !important;
    border-radius: 26px !important;
    background:
        linear-gradient(90deg, rgba(17,17,17,0.78) 0%, rgba(17,17,17,0.48) 45%, rgba(255,255,255,0.08) 100%),
        #111111 !important;
    box-shadow: 0 18px 48px rgba(17,17,17,0.14) !important;
}

body.staff-dashboard-page .staff-dashboard-hero::before {
    inset: 16px !important;
    border-radius: 18px !important;
}

body.staff-dashboard-page .staff-dashboard-hero .staff-hero-copy {
    max-width: 610px !important;
    padding-left: 4px !important;
}

body.staff-dashboard-page .staff-dashboard-hero .staff-kicker {
    font-size: 11px !important;
    letter-spacing: 2.4px !important;
}

body.staff-dashboard-page .staff-dashboard-hero .staff-hero-copy h1 {
    margin: 8px 0 10px !important;
    font-size: clamp(36px, 4vw, 58px) !important;
    line-height: 0.98 !important;
}

body.staff-dashboard-page .staff-dashboard-hero .staff-hero-copy p:not(.staff-kicker) {
    max-width: 560px !important;
    font-size: 15px !important;
    line-height: 1.55 !important;
}

body.staff-dashboard-page .staff-dashboard-hero .staff-hero-actions {
    margin-top: 18px !important;
}

body.staff-dashboard-page .staff-dashboard-image {
    min-height: 260px !important;
    height: 100% !important;
    border-radius: 22px !important;
    border: 1px solid rgba(255,255,255,0.34) !important;
    box-shadow: 8px 8px 0 rgba(202,165,58,0.28) !important;
}

body.staff-dashboard-page .staff-dashboard-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 260px !important;
    object-fit: cover !important;
    object-position: center !important;
    filter: contrast(1.05) saturate(0.95) brightness(0.95) !important;
}

body.staff-dashboard-page .staff-stats {
    gap: 12px !important;
}

body.staff-dashboard-page .staff-stat-card {
    min-height: 122px !important;
    padding: 18px !important;
    border-radius: 18px !important;
}

body.staff-dashboard-page .staff-stat-card h3 {
    font-size: clamp(28px, 3vw, 42px) !important;
}

@media (max-width: 980px) {
    body.staff-dashboard-page .staff-dashboard-hero {
        grid-template-columns: 1fr !important;
    }

    body.staff-dashboard-page .staff-dashboard-image {
        min-height: 220px !important;
    }
}

@media (max-width: 720px) {
    body.staff-page .staff-nav.krylo-customer-nav {
        width: 100% !important;
        margin: 0 !important;
        border-radius: 0 !important;
    }

    body.staff-dashboard-page .staff-dashboard-hero {
        width: min(94%, calc(100% - 18px)) !important;
        min-height: auto !important;
    }
}

/* =========================================================
   Staff payments verification desk refinement
   ========================================================= */
body.staff-page .staff-nav.krylo-customer-nav {
    border-bottom: 0 !important;
    box-shadow: 0 8px 22px rgba(17,17,17,0.045) !important;
}

body.staff-page .staff-nav.krylo-customer-nav::after {
    content: none !important;
    display: none !important;
}

body.staff-payments-page {
    background:
        radial-gradient(circle at 10% 8%, rgba(202,165,58,0.2), transparent 27%),
        radial-gradient(circle at 90% 22%, rgba(17,17,17,0.08), transparent 24%),
        linear-gradient(135deg, #ffffff 0%, #f8f8f8 58%, #fff8df 100%) !important;
}

body.staff-payments-page .staff-payments-hero {
    min-height: 320px !important;
    grid-template-columns: minmax(0, 0.82fr) minmax(360px, 0.58fr) !important;
    padding: clamp(24px, 3.5vw, 46px) !important;
    margin-top: 24px !important;
    border-radius: 28px !important;
    background:
        linear-gradient(90deg, rgba(17,17,17,0.9) 0%, rgba(17,17,17,0.67) 50%, rgba(202,165,58,0.15) 100%),
        #111111 !important;
    box-shadow: 0 20px 52px rgba(17,17,17,0.15) !important;
}

body.staff-payments-page .staff-payments-hero::after {
    content: "VERIFY / APPROVE / RELEASE" !important;
    position: absolute !important;
    right: 34px !important;
    top: 28px !important;
    z-index: 3 !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    background: rgba(255,248,223,0.95) !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: 1px solid rgba(202,165,58,0.65) !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: 1.6px !important;
}

body.staff-payments-page .staff-payments-hero .staff-hero-copy h1 {
    font-size: clamp(38px, 4.5vw, 66px) !important;
}

body.staff-payments-page .staff-payment-image {
    min-height: 250px !important;
    border-radius: 24px !important;
    box-shadow: 8px 8px 0 rgba(202,165,58,0.3) !important;
}

body.staff-payments-page .staff-payment-image img {
    min-height: 250px !important;
    object-fit: cover !important;
    object-position: center !important;
    filter: contrast(1.07) saturate(0.92) brightness(0.94) !important;
}

body.staff-payments-page .staff-table-panel {
    position: relative !important;
    overflow: hidden !important;
    padding: clamp(20px, 3vw, 34px) !important;
    border-radius: 28px !important;
    border: 1px solid #dedede !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(202,165,58,0.14), transparent 25%),
        #ffffff !important;
    box-shadow: 0 22px 56px rgba(17,17,17,0.08) !important;
}

body.staff-payments-page .staff-table-panel::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    height: 5px !important;
    background: linear-gradient(90deg, #111111 0%, #caa53a 48%, #111111 100%) !important;
}

body.staff-payments-page .staff-panel-head {
    align-items: center !important;
    padding-bottom: 18px !important;
    border-bottom: 1px solid #eee7d6 !important;
}

body.staff-payments-page .staff-panel-head h2 {
    font-size: clamp(30px, 3.3vw, 48px) !important;
}

body.staff-payments-page .staff-flash {
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #111111 !important;
}

body.staff-payments-page .staff-table-wrap {
    margin-top: 18px !important;
    border: 0 !important;
    border-radius: 24px !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.staff-payments-page .staff-table {
    border-collapse: separate !important;
    border-spacing: 0 12px !important;
    background: transparent !important;
}

body.staff-payments-page .staff-table th {
    position: static !important;
    padding: 14px 16px !important;
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 0 !important;
}

body.staff-payments-page .staff-table th:first-child {
    border-radius: 16px 0 0 16px !important;
}

body.staff-payments-page .staff-table th:last-child {
    border-radius: 0 16px 16px 0 !important;
}

body.staff-payments-page .staff-table td {
    padding: 18px 16px !important;
    background: #ffffff !important;
    border-top: 1px solid #ececec !important;
    border-bottom: 1px solid #ececec !important;
    box-shadow: 0 12px 28px rgba(17,17,17,0.045) !important;
}

body.staff-payments-page .staff-table td:first-child {
    border-left: 1px solid #ececec !important;
    border-radius: 18px 0 0 18px !important;
}

body.staff-payments-page .staff-table td:last-child {
    border-right: 1px solid #ececec !important;
    border-radius: 0 18px 18px 0 !important;
}

body.staff-payments-page .staff-table tr:nth-child(even) td {
    background: #fffdf7 !important;
}

body.staff-payments-page .staff-table tr:hover td {
    background: #fff8df !important;
    border-color: #e0c978 !important;
}

body.staff-payments-page .staff-order-id {
    display: inline-flex !important;
    min-height: 34px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 13px !important;
}

body.staff-payments-page .staff-money {
    display: inline-flex !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-size: 16px !important;
}

body.staff-payments-page .staff-table td:nth-child(7) {
    min-width: 190px !important;
}

body.staff-payments-page .staff-table td:nth-child(7),
body.staff-payments-page .staff-table td:nth-child(6) {
    white-space: nowrap !important;
}

body.staff-payments-page .staff-sync-btn,
body.staff-payments-page .staff-reject-btn {
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 14px !important;
    margin: 3px !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: 0.6px !important;
    box-shadow: none !important;
}

body.staff-payments-page .staff-sync-btn {
    background: #caa53a !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: 1px solid #caa53a !important;
}

body.staff-payments-page td:nth-child(6) .staff-sync-btn {
    background: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: 1px solid #111111 !important;
}

body.staff-payments-page .staff-reject-btn {
    background: #ffffff !important;
    color: #9f1d1d !important;
    -webkit-text-fill-color: #9f1d1d !important;
    border: 1px solid #9f1d1d !important;
}

body.staff-payments-page .staff-sync-btn:hover,
body.staff-payments-page td:nth-child(6) .staff-sync-btn:hover {
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #111111 !important;
}

body.staff-payments-page .staff-reject-btn:hover {
    background: #9f1d1d !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

@media (max-width: 1050px) {
    body.staff-payments-page .staff-payments-hero {
        grid-template-columns: 1fr !important;
    }

    body.staff-payments-page .staff-payments-hero::after {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        width: fit-content !important;
        margin-top: 12px !important;
    }
}

/* =========================================================
   Staff payments black/white folded editorial upgrade
   ========================================================= */
body.staff-payments-page {
    background:
        linear-gradient(135deg, rgba(17,17,17,0.035) 25%, transparent 25%) 0 0 / 28px 28px,
        linear-gradient(135deg, #ffffff 0%, #f5f5f5 58%, #fffaf0 100%) !important;
}

body.staff-payments-page .staff-payments-hero {
    isolation: isolate !important;
    min-height: 350px !important;
    background:
        linear-gradient(90deg, rgba(17,17,17,0.95) 0%, rgba(17,17,17,0.84) 48%, rgba(17,17,17,0.14) 100%),
        #111111 !important;
    border: 1px solid #111111 !important;
    box-shadow: 14px 14px 0 rgba(202,165,58,0.22), 0 24px 62px rgba(17,17,17,0.18) !important;
}

body.staff-payments-page .staff-payments-hero::before {
    inset: 18px !important;
    border-color: rgba(255,255,255,0.28) !important;
}

body.staff-payments-page .staff-payments-hero .staff-hero-copy::after {
    content: "PAYMENT PROOF QUEUE" !important;
    display: inline-flex !important;
    margin-top: 18px !important;
    padding: 10px 14px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: 1px solid rgba(255,255,255,0.75) !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: 2px !important;
}

body.staff-payments-page .staff-payment-image {
    background: #ffffff !important;
    border: 10px solid #ffffff !important;
    box-shadow: 12px 12px 0 rgba(202,165,58,0.36), -1px -1px 0 rgba(255,255,255,0.35) !important;
}

body.staff-payments-page .staff-payment-image::before {
    content: "" !important;
    position: absolute !important;
    right: -1px !important;
    top: -1px !important;
    width: 76px !important;
    height: 76px !important;
    z-index: 4 !important;
    background:
        linear-gradient(135deg, #ffffff 0%, #ffffff 48%, #d8d8d8 49%, #f4f4f4 100%) !important;
    clip-path: polygon(0 0, 100% 0, 100% 100%) !important;
    box-shadow: -8px 8px 18px rgba(17,17,17,0.18) !important;
}

body.staff-payments-page .staff-payment-image::after {
    content: "RECEIPT CHECK" !important;
    position: absolute !important;
    left: 18px !important;
    bottom: 18px !important;
    z-index: 4 !important;
    padding: 8px 12px !important;
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.24) !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: 2px !important;
}

body.staff-payments-page .staff-table-panel {
    border-radius: 0 30px 30px 30px !important;
    border: 1px solid #111111 !important;
    background:
        linear-gradient(135deg, #ffffff 0%, #ffffff 70%, #fff8df 100%) !important;
    box-shadow: 12px 12px 0 rgba(17,17,17,0.09), 0 22px 52px rgba(17,17,17,0.08) !important;
}

body.staff-payments-page .staff-table-panel::after {
    content: "" !important;
    position: absolute !important;
    left: -1px !important;
    top: -1px !important;
    width: 82px !important;
    height: 82px !important;
    background:
        linear-gradient(135deg, #f2f2f2 0%, #ffffff 48%, #111111 49%, #111111 51%, transparent 52%) !important;
    clip-path: polygon(0 0, 100% 0, 0 100%) !important;
    pointer-events: none !important;
}

body.staff-payments-page .staff-panel-head {
    position: relative !important;
    z-index: 2 !important;
    padding-left: 70px !important;
}

body.staff-payments-page .staff-panel-head span:not(.staff-flash) {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    background: #fff8df !important;
    border: 1px solid #d9c47c !important;
    border-radius: 999px !important;
    padding: 7px 11px !important;
}

body.staff-payments-page .staff-panel-head h2 {
    margin-top: 12px !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

body.staff-payments-page .staff-table {
    border-spacing: 0 14px !important;
}

body.staff-payments-page .staff-table th {
    background: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border-top: 1px solid #111111 !important;
    border-bottom: 1px solid #111111 !important;
}

body.staff-payments-page .staff-table th:first-child {
    border-left: 1px solid #111111 !important;
}

body.staff-payments-page .staff-table th:last-child {
    border-right: 1px solid #111111 !important;
}

body.staff-payments-page .staff-table td {
    border-top: 1px solid #111111 !important;
    border-bottom: 1px solid #111111 !important;
    box-shadow: 7px 7px 0 rgba(202,165,58,0.14) !important;
}

body.staff-payments-page .staff-table td:first-child {
    border-left: 5px solid #111111 !important;
}

body.staff-payments-page .staff-table tr:hover td:first-child {
    border-left-color: #caa53a !important;
}

body.staff-payments-page .staff-status-pill {
    background: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: 1px solid #111111 !important;
}

body.staff-payments-page .staff-status-pill.good {
    background: #0f5132 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #0f5132 !important;
}

body.staff-payments-page .staff-status-pill.warn {
    background: #fff8df !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border-color: #caa53a !important;
}

body.staff-payments-page .staff-status-pill.bad {
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #111111 !important;
}

body.staff-payments-page .staff-sync-btn,
body.staff-payments-page .staff-reject-btn {
    min-width: 86px !important;
    box-shadow: 4px 4px 0 rgba(17,17,17,0.12) !important;
}

body.staff-payments-page .staff-sync-btn {
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #111111 !important;
}

body.staff-payments-page td:nth-child(6) .staff-sync-btn {
    background: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border-color: #111111 !important;
}

body.staff-payments-page .staff-reject-btn {
    background: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border-color: #111111 !important;
}

body.staff-payments-page .staff-sync-btn:hover,
body.staff-payments-page td:nth-child(6) .staff-sync-btn:hover {
    background: #caa53a !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border-color: #caa53a !important;
}

body.staff-payments-page .staff-reject-btn:hover {
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Staff payments cleanup: remove oversized fold and add boutique desk card */
body.staff-payments-page .staff-table-panel {
    background:
        linear-gradient(135deg, #151515 0%, #151515 26%, #fffdf7 26.2%, #ffffff 100%) !important;
    border: 1px solid #151515 !important;
    border-radius: 28px !important;
    box-shadow: 0 24px 62px rgba(17,17,17,0.12) !important;
}

body.staff-payments-page .staff-table-panel::after {
    content: none !important;
    display: none !important;
}

body.staff-payments-page .staff-table-panel::before {
    height: 8px !important;
    background: linear-gradient(90deg, #151515 0%, #151515 38%, #caa53a 38%, #caa53a 100%) !important;
}

body.staff-payments-page .staff-panel-head {
    min-height: 120px !important;
    margin: -8px -8px 20px !important;
    padding: 28px clamp(20px, 4vw, 46px) !important;
    border: 0 !important;
    border-radius: 22px !important;
    background:
        radial-gradient(circle at 92% 24%, rgba(202,165,58,0.22), transparent 26%),
        linear-gradient(90deg, #151515 0%, #151515 42%, #ffffff 42.2%, #fffdf7 100%) !important;
}

body.staff-payments-page .staff-panel-head > div {
    display: grid !important;
    gap: 10px !important;
}

body.staff-payments-page .staff-panel-head span:not(.staff-flash) {
    width: fit-content !important;
    background: #caa53a !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border-color: #caa53a !important;
}

body.staff-payments-page .staff-panel-head h2 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 8px 24px rgba(0,0,0,0.35) !important;
}

body.staff-payments-page .staff-flash {
    align-self: center !important;
    background: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border-color: #111111 !important;
}

body.staff-payments-page .staff-table-wrap {
    padding: 0 !important;
    border-radius: 0 !important;
}

body.staff-payments-page .staff-table {
    border-spacing: 0 10px !important;
}

body.staff-payments-page .staff-table th {
    background: #151515 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 0 !important;
    padding: 16px 18px !important;
}

body.staff-payments-page .staff-table th:first-child {
    border-radius: 18px 0 0 18px !important;
}

body.staff-payments-page .staff-table th:last-child {
    border-radius: 0 18px 18px 0 !important;
}

body.staff-payments-page .staff-table td {
    background: #fffdf7 !important;
    border-top: 1px solid #e5dfcf !important;
    border-bottom: 1px solid #e5dfcf !important;
    box-shadow: none !important;
}

body.staff-payments-page .staff-table td:first-child {
    border-left: 6px solid #151515 !important;
    border-radius: 18px 0 0 18px !important;
}

body.staff-payments-page .staff-table td:last-child {
    border-right: 1px solid #e5dfcf !important;
    border-radius: 0 18px 18px 0 !important;
}

body.staff-payments-page .staff-table tr:hover td {
    background: #ffffff !important;
    border-color: #caa53a !important;
    transform: translateY(-1px) !important;
}

body.staff-payments-page .staff-table td:nth-child(7) {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

body.staff-payments-page .staff-sync-btn,
body.staff-payments-page .staff-reject-btn {
    min-width: 96px !important;
    min-height: 42px !important;
    margin: 0 !important;
    box-shadow: none !important;
}

body.staff-payments-page .staff-sync-btn {
    background: #caa53a !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border-color: #caa53a !important;
}

body.staff-payments-page .staff-reject-btn,
body.staff-payments-page td:nth-child(6) .staff-sync-btn {
    background: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border-color: #151515 !important;
}

body.staff-payments-page .staff-order-id {
    background: #151515 !important;
    box-shadow: 4px 4px 0 rgba(202,165,58,0.25) !important;
}

body.staff-payments-page .staff-status-pill.warn {
    background: #fff8df !important;
    box-shadow: inset 0 0 0 1px rgba(202,165,58,0.28) !important;
}

@media (max-width: 980px) {
    body.staff-payments-page .staff-panel-head {
        background: #151515 !important;
    }

    body.staff-payments-page .staff-table-panel {
        background: #ffffff !important;
    }

    body.staff-payments-page .staff-table td:nth-child(7) {
        display: table-cell !important;
    }
}

/* Staff payments visibility repair */
body.staff-payments-page .staff-table-panel {
    background: #ffffff !important;
    border: 1px solid #dcdcdc !important;
    border-top: 8px solid #111111 !important;
    box-shadow: 0 22px 54px rgba(17,17,17,0.08) !important;
}

body.staff-payments-page .staff-table-panel::before,
body.staff-payments-page .staff-table-panel::after {
    content: none !important;
    display: none !important;
}

body.staff-payments-page .staff-panel-head {
    min-height: auto !important;
    margin: 0 0 22px !important;
    padding: 28px 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    border-radius: 22px !important;
    background: #111111 !important;
    border: 1px solid #111111 !important;
}

body.staff-payments-page .staff-panel-head > div {
    width: 100% !important;
}

body.staff-payments-page .staff-panel-head span:not(.staff-flash) {
    background: #caa53a !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border-color: #caa53a !important;
}

body.staff-payments-page .staff-panel-head h2 {
    display: block !important;
    width: fit-content !important;
    margin: 12px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: none !important;
    font-size: clamp(32px, 3.8vw, 54px) !important;
    line-height: 1.04 !important;
}

body.staff-payments-page .staff-panel-head h2::selection,
body.staff-payments-page .staff-panel-head span::selection {
    background: rgba(202,165,58,0.45) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body.staff-payments-page .staff-flash {
    flex: 0 0 auto !important;
    background: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: 1px solid #ffffff !important;
}

body.staff-payments-page .staff-table {
    border-spacing: 0 10px !important;
}

body.staff-payments-page .staff-table th {
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    opacity: 1 !important;
    text-shadow: none !important;
    border: 0 !important;
    font-size: 12px !important;
    letter-spacing: 1.8px !important;
}

body.staff-payments-page .staff-table th *,
body.staff-payments-page .staff-table td * {
    opacity: 1 !important;
}

body.staff-payments-page .staff-table td {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

body.staff-payments-page .staff-table td:nth-child(1),
body.staff-payments-page .staff-table td:nth-child(2),
body.staff-payments-page .staff-table td:nth-child(3),
body.staff-payments-page .staff-table td:nth-child(4),
body.staff-payments-page .staff-table td:nth-child(5),
body.staff-payments-page .staff-table td:nth-child(6),
body.staff-payments-page .staff-table td:nth-child(7) {
    min-width: max-content !important;
}

body.staff-payments-page .staff-table-wrap {
    overflow-x: auto !important;
    padding-bottom: 6px !important;
}

body.staff-payments-page .staff-table-wrap::-webkit-scrollbar {
    height: 10px !important;
}

body.staff-payments-page .staff-table-wrap::-webkit-scrollbar-thumb {
    background: #111111 !important;
    border-radius: 999px !important;
}

@media (max-width: 720px) {
    body.staff-payments-page .staff-panel-head {
        align-items: flex-start !important;
        flex-direction: column !important;
        padding: 24px 20px !important;
    }
}

/* Staff payments final readability balance */
body.staff-payments-page .staff-panel-head {
    background:
        linear-gradient(90deg, #fffdf7 0%, #ffffff 68%, #fff8df 100%) !important;
    border: 1px solid #dedede !important;
    border-left: 8px solid #111111 !important;
    box-shadow: 0 16px 38px rgba(17,17,17,0.07) !important;
}

body.staff-payments-page .staff-panel-head h2 {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    background: transparent !important;
    text-shadow: none !important;
}

body.staff-payments-page .staff-panel-head span:not(.staff-flash) {
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #111111 !important;
}

body.staff-payments-page .staff-table th {
    background: #fff8df !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border-top: 1px solid #d9c47c !important;
    border-bottom: 1px solid #d9c47c !important;
    text-shadow: none !important;
}

body.staff-payments-page .staff-table th:first-child {
    border-left: 1px solid #d9c47c !important;
}

body.staff-payments-page .staff-table th:last-child {
    border-right: 1px solid #d9c47c !important;
}

/* =========================================================
   Staff payments and orders final creative table system
   ========================================================= */
body.staff-payments-page .staff-table-panel,
body.staff-orders-page .staff-table-panel {
    background:
        radial-gradient(circle at 100% 0%, rgba(202,165,58,0.12), transparent 24%),
        linear-gradient(180deg, #ffffff 0%, #fffdf7 100%) !important;
    border: 1px solid #dedede !important;
    border-top: 6px solid #111111 !important;
    border-radius: 28px !important;
    box-shadow: 0 22px 56px rgba(17,17,17,0.08) !important;
}

body.staff-payments-page .staff-table-wrap,
body.staff-orders-page .staff-table-wrap {
    overflow-x: auto !important;
    border: 0 !important;
    border-radius: 24px !important;
    background: transparent !important;
}

body.staff-payments-page .staff-table,
body.staff-orders-page .staff-table {
    min-width: 980px !important;
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 12px !important;
    background: transparent !important;
}

body.staff-payments-page .staff-table tr:first-child th,
body.staff-orders-page .staff-table thead th {
    position: static !important;
    padding: 15px 18px !important;
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 0 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: 1.7px !important;
    text-transform: uppercase !important;
    text-align: left !important;
    white-space: nowrap !important;
}

body.staff-payments-page .staff-table tr:first-child th:first-child,
body.staff-orders-page .staff-table thead th:first-child {
    border-radius: 18px 0 0 18px !important;
}

body.staff-payments-page .staff-table tr:first-child th:last-child,
body.staff-orders-page .staff-table thead th:last-child {
    border-radius: 0 18px 18px 0 !important;
}

body.staff-payments-page .staff-table tr:not(:first-child) td,
body.staff-orders-page .staff-table tbody td {
    padding: 18px !important;
    background: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border-top: 1px solid #e6e2d6 !important;
    border-bottom: 1px solid #e6e2d6 !important;
    box-shadow: 0 12px 28px rgba(17,17,17,0.045) !important;
    vertical-align: middle !important;
}

body.staff-payments-page .staff-table tr:not(:first-child) td:first-child,
body.staff-orders-page .staff-table tbody td:first-child {
    border-left: 6px solid #111111 !important;
    border-radius: 18px 0 0 18px !important;
}

body.staff-payments-page .staff-table tr:not(:first-child) td:last-child,
body.staff-orders-page .staff-table tbody td:last-child {
    border-right: 1px solid #e6e2d6 !important;
    border-radius: 0 18px 18px 0 !important;
}

body.staff-payments-page .staff-table tr:not(:first-child):nth-child(even) td,
body.staff-orders-page .staff-table tbody tr:nth-child(even) td {
    background: #fffdf7 !important;
}

body.staff-payments-page .staff-table tr:not(:first-child):hover td,
body.staff-orders-page .staff-table tbody tr:hover td {
    background: #fff8df !important;
    border-color: #d9c47c !important;
}

body.staff-payments-page .staff-table tr:not(:first-child):hover td:first-child,
body.staff-orders-page .staff-table tbody tr:hover td:first-child {
    border-left-color: #caa53a !important;
}

body.staff-payments-page .staff-order-id,
body.staff-orders-page .staff-order-id {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 58px !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 4px 4px 0 rgba(202,165,58,0.28) !important;
    font-size: 13px !important;
}

body.staff-payments-page .staff-money,
body.staff-orders-page .staff-money {
    display: inline-flex !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    background: #fff8df !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: 1px solid #d9c47c !important;
    font-size: 14px !important;
}

body.staff-payments-page .staff-status-pill,
body.staff-orders-page .staff-status-pill {
    min-height: 34px !important;
    padding: 0 13px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: 1px solid #111111 !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
}

body.staff-payments-page .staff-status-pill.good,
body.staff-orders-page .staff-status-pill.good {
    background: #0f5132 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #0f5132 !important;
}

body.staff-payments-page .staff-status-pill.warn,
body.staff-orders-page .staff-status-pill.warn {
    background: #fff8df !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border-color: #caa53a !important;
}

body.staff-payments-page .staff-status-pill.bad,
body.staff-orders-page .staff-status-pill.bad {
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #111111 !important;
}

body.staff-payments-page .staff-sync-btn,
body.staff-payments-page .staff-reject-btn,
body.staff-orders-page .staff-sync-btn {
    min-height: 40px !important;
    min-width: 92px !important;
    margin: 2px !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    text-decoration: none !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: 0.8px !important;
}

body.staff-payments-page .staff-sync-btn,
body.staff-orders-page .staff-sync-btn {
    background: #caa53a !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: 1px solid #caa53a !important;
}

body.staff-payments-page td:nth-child(6) .staff-sync-btn,
body.staff-payments-page .staff-reject-btn {
    background: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: 1px solid #111111 !important;
}

body.staff-payments-page .staff-sync-btn:hover,
body.staff-payments-page td:nth-child(6) .staff-sync-btn:hover,
body.staff-orders-page .staff-sync-btn:hover {
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #111111 !important;
}

body.staff-payments-page .staff-reject-btn:hover {
    background: #9f1d1d !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #9f1d1d !important;
}

body.staff-orders-page .staff-order-sync-form {
    min-width: 430px !important;
    display: grid !important;
    grid-template-columns: minmax(150px, 1fr) minmax(132px, 0.8fr) auto !important;
    gap: 8px !important;
    align-items: center !important;
}

body.staff-orders-page .staff-tracking-input,
body.staff-orders-page .staff-status-select {
    min-height: 40px !important;
    border-radius: 999px !important;
    border: 1px solid #d8d8d8 !important;
    background: #ffffff !important;
}

body.staff-orders-page .staff-muted {
    white-space: nowrap !important;
}

@media (max-width: 760px) {
    body.staff-orders-page .staff-order-sync-form {
        min-width: 260px !important;
        grid-template-columns: 1fr !important;
    }
}

/* Staff table alignment and rounded container fix */
body.staff-payments-page .staff-table-wrap,
body.staff-orders-page .staff-table-wrap {
    border: 1px solid #dedede !important;
    border-radius: 24px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    background: #ffffff !important;
}

body.staff-payments-page .staff-table,
body.staff-orders-page .staff-table {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}

body.staff-payments-page .staff-table tr:first-child th,
body.staff-orders-page .staff-table thead th {
    height: 58px !important;
    border-radius: 0 !important;
    border-bottom: 1px solid #111111 !important;
}

body.staff-payments-page .staff-table tr:first-child th:first-child,
body.staff-orders-page .staff-table thead th:first-child {
    border-radius: 22px 0 0 0 !important;
}

body.staff-payments-page .staff-table tr:first-child th:last-child,
body.staff-orders-page .staff-table thead th:last-child {
    border-radius: 0 22px 0 0 !important;
}

body.staff-payments-page .staff-table tr:not(:first-child) td,
body.staff-orders-page .staff-table tbody td {
    height: 72px !important;
    border-radius: 0 !important;
    border-top: 0 !important;
    border-bottom: 1px solid #eeeeee !important;
    box-shadow: none !important;
}

body.staff-payments-page .staff-table tr:not(:first-child) td:first-child,
body.staff-orders-page .staff-table tbody td:first-child {
    border-left: 0 !important;
    border-radius: 0 !important;
}

body.staff-payments-page .staff-table tr:not(:first-child) td:last-child,
body.staff-orders-page .staff-table tbody td:last-child {
    border-right: 0 !important;
    border-radius: 0 !important;
}

body.staff-payments-page .staff-table tr:last-child td:first-child,
body.staff-orders-page .staff-table tbody tr:last-child td:first-child {
    border-radius: 0 0 0 22px !important;
}

body.staff-payments-page .staff-table tr:last-child td:last-child,
body.staff-orders-page .staff-table tbody tr:last-child td:last-child {
    border-radius: 0 0 22px 0 !important;
}

body.staff-payments-page .staff-table tr:not(:first-child):hover td,
body.staff-orders-page .staff-table tbody tr:hover td {
    transform: none !important;
}

/* Staff payments table even-row repair */
body.staff-payments-page .staff-table {
    table-layout: fixed !important;
}

body.staff-payments-page .staff-table th:nth-child(1),
body.staff-payments-page .staff-table td:nth-child(1) { width: 9% !important; }

body.staff-payments-page .staff-table th:nth-child(2),
body.staff-payments-page .staff-table td:nth-child(2) { width: 15% !important; }

body.staff-payments-page .staff-table th:nth-child(3),
body.staff-payments-page .staff-table td:nth-child(3) { width: 12% !important; }

body.staff-payments-page .staff-table th:nth-child(4),
body.staff-payments-page .staff-table td:nth-child(4) { width: 17% !important; }

body.staff-payments-page .staff-table th:nth-child(5),
body.staff-payments-page .staff-table td:nth-child(5) { width: 18% !important; }

body.staff-payments-page .staff-table th:nth-child(6),
body.staff-payments-page .staff-table td:nth-child(6) { width: 11% !important; }

body.staff-payments-page .staff-table th:nth-child(7),
body.staff-payments-page .staff-table td:nth-child(7) { width: 18% !important; }

body.staff-payments-page .staff-table td:nth-child(7),
body.staff-payments-page .staff-table td:nth-child(6) {
    display: table-cell !important;
    white-space: normal !important;
    min-width: 0 !important;
}

body.staff-payments-page .staff-table td:nth-child(7) {
    text-align: left !important;
}

body.staff-payments-page .staff-table td:nth-child(7) .staff-sync-btn,
body.staff-payments-page .staff-table td:nth-child(7) .staff-reject-btn,
body.staff-payments-page .staff-table td:nth-child(7) .staff-status-pill {
    margin: 4px 6px 4px 0 !important;
    vertical-align: middle !important;
}

body.staff-payments-page .staff-table tr:not(:first-child) td {
    height: 86px !important;
}

/* =========================================================
   Staff orders fulfilment board redesign
   ========================================================= */
body.staff-orders-page {
    background:
        linear-gradient(135deg, rgba(17,17,17,0.025) 25%, transparent 25%) 0 0 / 30px 30px,
        linear-gradient(135deg, #ffffff 0%, #f7f7f7 58%, #fff8df 100%) !important;
}

body.staff-orders-page .staff-orders-hero {
    min-height: 330px !important;
    grid-template-columns: minmax(0, 0.78fr) minmax(380px, 0.62fr) !important;
    padding: clamp(26px, 4vw, 48px) !important;
    border-radius: 28px !important;
    background:
        linear-gradient(90deg, rgba(17,17,17,0.88) 0%, rgba(17,17,17,0.58) 46%, rgba(255,255,255,0.06) 100%),
        #111111 !important;
    box-shadow: 10px 10px 0 rgba(202,165,58,0.24), 0 22px 58px rgba(17,17,17,0.15) !important;
}

body.staff-orders-page .staff-orders-hero::after {
    content: "PACK / SHIP / COMPLETE" !important;
    position: absolute !important;
    left: clamp(30px, 5vw, 58px) !important;
    bottom: 28px !important;
    z-index: 3 !important;
    display: inline-flex !important;
    padding: 9px 13px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: 1px solid rgba(255,255,255,0.8) !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: 1.8px !important;
}

body.staff-orders-page .staff-orders-hero .staff-hero-copy h1 {
    font-size: clamp(40px, 5vw, 70px) !important;
}

body.staff-orders-page .staff-order-image {
    min-height: 255px !important;
    border: 8px solid #ffffff !important;
    background: #ffffff !important;
    box-shadow: 9px 9px 0 rgba(202,165,58,0.32) !important;
}

body.staff-orders-page .staff-order-image::after {
    content: "FULFILMENT" !important;
    position: absolute !important;
    left: 16px !important;
    bottom: 16px !important;
    z-index: 4 !important;
    padding: 8px 12px !important;
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: 2px !important;
}

body.staff-orders-page .staff-order-image img {
    min-height: 255px !important;
    object-fit: cover !important;
    object-position: center !important;
    filter: contrast(1.06) saturate(0.92) brightness(0.94) !important;
}

body.staff-orders-page .staff-table-panel {
    position: relative !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 94% 0%, rgba(202,165,58,0.16), transparent 24%),
        linear-gradient(180deg, #ffffff 0%, #fffdf7 100%) !important;
    border: 1px solid #dedede !important;
    border-top: 0 !important;
    border-radius: 30px !important;
    box-shadow: 0 22px 58px rgba(17,17,17,0.08) !important;
}

body.staff-orders-page .staff-table-panel::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    height: 8px !important;
    background: linear-gradient(90deg, #111111 0%, #111111 36%, #caa53a 36%, #caa53a 100%) !important;
}

body.staff-orders-page .staff-panel-head {
    margin: 0 0 22px !important;
    padding: 26px 30px 20px !important;
    border-radius: 22px !important;
    background:
        linear-gradient(90deg, #111111 0%, #111111 34%, #ffffff 34.2%, #fffdf7 100%) !important;
    border: 1px solid #ece6d5 !important;
}

body.staff-orders-page .staff-panel-head span:not(.staff-flash) {
    width: fit-content !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    background: #caa53a !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: 1px solid #caa53a !important;
}

body.staff-orders-page .staff-panel-head h2 {
    margin-top: 12px !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: clamp(32px, 3.6vw, 52px) !important;
}

body.staff-orders-page .staff-table-wrap {
    border: 1px solid #dedede !important;
    border-radius: 24px !important;
    background: #ffffff !important;
    overflow-x: auto !important;
}

body.staff-orders-page .staff-table {
    table-layout: fixed !important;
    min-width: 1120px !important;
}

body.staff-orders-page .staff-table th:nth-child(1),
body.staff-orders-page .staff-table td:nth-child(1) { width: 8% !important; }

body.staff-orders-page .staff-table th:nth-child(2),
body.staff-orders-page .staff-table td:nth-child(2) { width: 14% !important; }

body.staff-orders-page .staff-table th:nth-child(3),
body.staff-orders-page .staff-table td:nth-child(3) { width: 12% !important; }

body.staff-orders-page .staff-table th:nth-child(4),
body.staff-orders-page .staff-table td:nth-child(4) { width: 12% !important; }

body.staff-orders-page .staff-table th:nth-child(5),
body.staff-orders-page .staff-table td:nth-child(5) { width: 12% !important; }

body.staff-orders-page .staff-table th:nth-child(6),
body.staff-orders-page .staff-table td:nth-child(6) { width: 31% !important; }

body.staff-orders-page .staff-table th:nth-child(7),
body.staff-orders-page .staff-table td:nth-child(7) { width: 11% !important; }

body.staff-orders-page .staff-table thead th {
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body.staff-orders-page .staff-table tbody td {
    height: 86px !important;
    background: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

body.staff-orders-page .staff-table tbody tr:nth-child(even) td {
    background: #fffdf7 !important;
}

body.staff-orders-page .staff-table tbody tr:hover td {
    background: #fff8df !important;
}

body.staff-orders-page .staff-order-id {
    min-width: 54px !important;
}

body.staff-orders-page .staff-order-sync-form {
    min-width: 0 !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(150px, 1fr) minmax(128px, 0.85fr) 74px !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 8px !important;
    border-radius: 18px !important;
    background: #f7f7f7 !important;
    border: 1px solid #e3e3e3 !important;
}

body.staff-orders-page .staff-tracking-input,
body.staff-orders-page .staff-status-select {
    min-height: 42px !important;
    border-radius: 999px !important;
    border: 1px solid #d8d8d8 !important;
    background: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-size: 12px !important;
}

body.staff-orders-page .staff-sync-btn {
    min-width: 0 !important;
    width: 74px !important;
    min-height: 42px !important;
    margin: 0 !important;
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #111111 !important;
}

body.staff-orders-page .staff-sync-btn:hover {
    background: #caa53a !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border-color: #caa53a !important;
}

body.staff-orders-page .staff-muted {
    font-size: 12px !important;
    line-height: 1.35 !important;
    color: #5f5f5f !important;
    -webkit-text-fill-color: #5f5f5f !important;
}

@media (max-width: 1050px) {
    body.staff-orders-page .staff-orders-hero {
        grid-template-columns: 1fr !important;
    }

    body.staff-orders-page .staff-panel-head {
        background: #111111 !important;
    }
}

/* =========================================================
   Staff orders, live chat, edit profile final polish
   ========================================================= */
body.staff-orders-page .staff-table-panel {
    background: #ffffff !important;
    border: 1px solid #dedede !important;
    border-top: 6px solid #caa53a !important;
    box-shadow: 0 20px 50px rgba(17,17,17,0.08) !important;
}

body.staff-orders-page .staff-table-panel::before {
    content: none !important;
    display: none !important;
}

body.staff-orders-page .staff-panel-head {
    margin: 0 0 20px !important;
    padding: 24px 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    background:
        linear-gradient(90deg, #fffdf7 0%, #ffffff 68%, #fff8df 100%) !important;
    border: 1px solid #dedede !important;
    border-left: 8px solid #111111 !important;
    border-radius: 22px !important;
}

body.staff-orders-page .staff-panel-head h2 {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    text-shadow: none !important;
    font-size: clamp(30px, 3.2vw, 48px) !important;
    line-height: 1.05 !important;
}

body.staff-orders-page .staff-panel-head span:not(.staff-flash) {
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #111111 !important;
}

body.staff-orders-page .staff-table {
    table-layout: fixed !important;
    min-width: 1240px !important;
}

body.staff-orders-page .staff-table th:nth-child(1),
body.staff-orders-page .staff-table td:nth-child(1) { width: 7% !important; }

body.staff-orders-page .staff-table th:nth-child(2),
body.staff-orders-page .staff-table td:nth-child(2) { width: 13% !important; }

body.staff-orders-page .staff-table th:nth-child(3),
body.staff-orders-page .staff-table td:nth-child(3) { width: 11% !important; }

body.staff-orders-page .staff-table th:nth-child(4),
body.staff-orders-page .staff-table td:nth-child(4) { width: 11% !important; }

body.staff-orders-page .staff-table th:nth-child(5),
body.staff-orders-page .staff-table td:nth-child(5) { width: 11% !important; }

body.staff-orders-page .staff-table th:nth-child(6),
body.staff-orders-page .staff-table td:nth-child(6) { width: 34% !important; }

body.staff-orders-page .staff-table th:nth-child(7),
body.staff-orders-page .staff-table td:nth-child(7) { width: 13% !important; }

body.staff-orders-page .staff-table thead th {
    background: #fff8df !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border-bottom: 1px solid #d9c47c !important;
}

body.staff-orders-page .staff-table tbody td {
    height: 98px !important;
    padding: 16px !important;
    overflow: visible !important;
}

body.staff-orders-page .staff-order-sync-form {
    grid-template-columns: minmax(170px, 1fr) minmax(136px, 0.8fr) 78px !important;
    padding: 10px !important;
}

body.staff-orders-page .staff-tracking-input {
    font-size: 12px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.staff-orders-page .staff-muted {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    font-size: 12px !important;
}

body.staff-orders-page .staff-orders-hero {
    min-height: 300px !important;
    background:
        linear-gradient(90deg, rgba(17,17,17,0.82) 0%, rgba(17,17,17,0.48) 46%, rgba(202,165,58,0.12) 100%),
        #111111 !important;
}

body.staff-chat-page .staff-orders-hero,
body.staff-edit-profile-page .staff-edit-profile-hero {
    min-height: 300px !important;
    background:
        linear-gradient(90deg, rgba(17,17,17,0.82) 0%, rgba(17,17,17,0.52) 54%, rgba(202,165,58,0.12) 100%),
        #111111 !important;
    box-shadow: 8px 8px 0 rgba(202,165,58,0.22), 0 20px 48px rgba(17,17,17,0.14) !important;
}

body.staff-chat-page .krylo-chat-admin-layout {
    grid-template-columns: minmax(280px, 0.35fr) minmax(0, 1fr) !important;
    align-items: stretch !important;
}

body.staff-chat-page .krylo-chat-thread-list,
body.staff-chat-page .krylo-chat-shell {
    border-radius: 26px !important;
    border: 1px solid #dedede !important;
    background: #ffffff !important;
    box-shadow: 0 18px 42px rgba(17,17,17,0.08) !important;
}

body.staff-chat-page .krylo-chat-thread-list {
    padding: 18px !important;
}

body.staff-chat-page .krylo-chat-thread-list h2,
body.staff-chat-page .krylo-chat-head h2 {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

body.staff-chat-page .krylo-chat-thread-list a {
    display: grid !important;
    gap: 5px !important;
    padding: 14px !important;
    margin-bottom: 10px !important;
    border-radius: 18px !important;
    border: 1px solid #eeeeee !important;
    background: #fffdf7 !important;
    text-decoration: none !important;
}

body.staff-chat-page .krylo-chat-thread-list a.active,
body.staff-chat-page .krylo-chat-thread-list a:hover {
    background: #fff8df !important;
    border-color: #d9c47c !important;
}

body.staff-chat-page .krylo-chat-head {
    background: #111111 !important;
    color: #ffffff !important;
    padding: 18px 22px !important;
}

body.staff-chat-page .krylo-chat-head h2,
body.staff-chat-page .krylo-chat-head span,
body.staff-chat-page .krylo-chat-head small {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body.staff-chat-page .krylo-chat-messages {
    background: linear-gradient(180deg, #ffffff 0%, #fffdf7 100%) !important;
}

body.staff-chat-page .krylo-chat-form {
    border-top: 1px solid #dedede !important;
    background: #ffffff !important;
    padding: 16px !important;
}

body.staff-chat-page .krylo-chat-form button {
    background: #caa53a !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border-color: #caa53a !important;
}

body.staff-edit-profile-page .staff-profile-panel {
    background:
        radial-gradient(circle at 100% 0%, rgba(202,165,58,0.13), transparent 25%),
        #ffffff !important;
    border: 1px solid #dedede !important;
    border-top: 6px solid #111111 !important;
    border-radius: 28px !important;
    box-shadow: 0 20px 50px rgba(17,17,17,0.08) !important;
}

body.staff-edit-profile-page .staff-profile-panel .staff-panel-head {
    background: #fffdf7 !important;
    border: 1px solid #ece6d5 !important;
    border-left: 8px solid #caa53a !important;
    border-radius: 22px !important;
    padding: 22px !important;
}

body.staff-edit-profile-page .staff-profile-panel .staff-panel-head h2 {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

body.staff-edit-profile-page .profile-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin-top: 20px !important;
}

body.staff-edit-profile-page .profile-grid .full-width {
    grid-column: 1 / -1 !important;
}

body.staff-edit-profile-page .admin-form label,
body.staff-edit-profile-page .profile-grid label {
    color: #4f4f4f !important;
    -webkit-text-fill-color: #4f4f4f !important;
    font-weight: 950 !important;
    letter-spacing: 1.4px !important;
    text-transform: uppercase !important;
}

body.staff-edit-profile-page .admin-form input {
    min-height: 52px !important;
    border-radius: 16px !important;
    border: 1px solid #dedede !important;
    background: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

body.staff-edit-profile-page .form-actions {
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

body.staff-edit-profile-page .form-actions button,
body.staff-edit-profile-page .form-actions .cancel-btn {
    min-height: 48px !important;
    border-radius: 999px !important;
}

@media (max-width: 760px) {
    body.staff-edit-profile-page .profile-grid {
        grid-template-columns: 1fr !important;
    }

    body.staff-orders-page .staff-order-sync-form {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   Staff orders overlap/table fix plus chat/profile unique layouts
   ========================================================= */
body.staff-orders-page .staff-panel-head {
    align-items: flex-start !important;
    min-height: 118px !important;
    padding: 24px 28px !important;
}

body.staff-orders-page .staff-panel-head > div {
    display: grid !important;
    gap: 12px !important;
}

body.staff-orders-page .staff-panel-head span:not(.staff-flash) {
    position: static !important;
    display: inline-flex !important;
    width: fit-content !important;
    margin: 0 !important;
}

body.staff-orders-page .staff-panel-head h2 {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    clear: both !important;
    line-height: 1.05 !important;
}

body.staff-orders-page .staff-table {
    min-width: 1060px !important;
    table-layout: fixed !important;
}

body.staff-orders-page .staff-table th:nth-child(1),
body.staff-orders-page .staff-table td:nth-child(1) { width: 7% !important; }

body.staff-orders-page .staff-table th:nth-child(2),
body.staff-orders-page .staff-table td:nth-child(2) { width: 13% !important; }

body.staff-orders-page .staff-table th:nth-child(3),
body.staff-orders-page .staff-table td:nth-child(3) { width: 11% !important; }

body.staff-orders-page .staff-table th:nth-child(4),
body.staff-orders-page .staff-table td:nth-child(4) { width: 11% !important; }

body.staff-orders-page .staff-table th:nth-child(5),
body.staff-orders-page .staff-table td:nth-child(5) { width: 11% !important; }

body.staff-orders-page .staff-table th:nth-child(6),
body.staff-orders-page .staff-table td:nth-child(6) { width: 34% !important; }

body.staff-orders-page .staff-table th:nth-child(7),
body.staff-orders-page .staff-table td:nth-child(7) { width: 13% !important; }

body.staff-orders-page .staff-table th,
body.staff-orders-page .staff-table td {
    overflow: visible !important;
}

body.staff-orders-page .staff-order-sync-form {
    grid-template-columns: minmax(130px, 1fr) minmax(118px, 0.72fr) 68px !important;
    gap: 7px !important;
    padding: 8px !important;
}

body.staff-orders-page .staff-tracking-input,
body.staff-orders-page .staff-status-select {
    min-width: 0 !important;
    padding: 0 12px !important;
}

body.staff-orders-page .staff-sync-btn {
    width: 68px !important;
    min-width: 68px !important;
    padding: 0 !important;
}

body.staff-orders-page .staff-muted {
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

body.staff-chat-page .staff-orders-hero {
    min-height: 230px !important;
    grid-template-columns: 1fr !important;
    background:
        linear-gradient(120deg, #111111 0%, #191919 58%, #fff8df 58.2%, #ffffff 100%) !important;
}

body.staff-chat-page .staff-orders-hero .staff-hero-copy {
    max-width: 760px !important;
}

body.staff-chat-page .krylo-chat-admin-layout {
    grid-template-columns: 320px minmax(0, 1fr) !important;
    gap: 0 !important;
    border-radius: 30px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1px solid #dedede !important;
    box-shadow: 0 22px 54px rgba(17,17,17,0.08) !important;
}

body.staff-chat-page .krylo-chat-thread-list {
    border: 0 !important;
    border-radius: 0 !important;
    background: #111111 !important;
    box-shadow: none !important;
}

body.staff-chat-page .krylo-chat-thread-list h2 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body.staff-chat-page .krylo-chat-thread-list p,
body.staff-chat-page .krylo-chat-thread-list span,
body.staff-chat-page .krylo-chat-thread-list small {
    color: #d9d9d9 !important;
    -webkit-text-fill-color: #d9d9d9 !important;
}

body.staff-chat-page .krylo-chat-thread-list a {
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
}

body.staff-chat-page .krylo-chat-thread-list a strong {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body.staff-chat-page .krylo-chat-thread-list a.active,
body.staff-chat-page .krylo-chat-thread-list a:hover {
    background: #fff8df !important;
    border-color: #caa53a !important;
}

body.staff-chat-page .krylo-chat-thread-list a.active strong,
body.staff-chat-page .krylo-chat-thread-list a.active span,
body.staff-chat-page .krylo-chat-thread-list a.active small,
body.staff-chat-page .krylo-chat-thread-list a:hover strong,
body.staff-chat-page .krylo-chat-thread-list a:hover span,
body.staff-chat-page .krylo-chat-thread-list a:hover small {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

body.staff-chat-page .krylo-chat-shell {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

body.staff-edit-profile-page .staff-profile-panel {
    display: grid !important;
    grid-template-columns: minmax(230px, 0.34fr) minmax(0, 1fr) !important;
    gap: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
}

body.staff-edit-profile-page .staff-profile-panel .staff-panel-head {
    grid-row: span 4 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    border-right: 1px solid #dedede !important;
    background:
        linear-gradient(180deg, #111111 0%, #1b1b1b 68%, #caa53a 68.2%, #caa53a 100%) !important;
    align-content: start !important;
    min-height: 100% !important;
}

body.staff-edit-profile-page .staff-profile-panel .staff-panel-head span,
body.staff-edit-profile-page .staff-profile-panel .staff-panel-head h2 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body.staff-edit-profile-page .staff-profile-panel .form-note,
body.staff-edit-profile-page .staff-profile-panel > p,
body.staff-edit-profile-page .staff-profile-panel .profile-grid {
    margin-left: 0 !important;
    padding-left: clamp(20px, 3vw, 34px) !important;
    padding-right: clamp(20px, 3vw, 34px) !important;
}

body.staff-edit-profile-page .staff-profile-panel .form-note {
    padding-top: 28px !important;
}

body.staff-edit-profile-page .staff-profile-panel .profile-grid {
    padding-bottom: 32px !important;
}

@media (max-width: 900px) {
    body.staff-chat-page .krylo-chat-admin-layout,
    body.staff-edit-profile-page .staff-profile-panel {
        grid-template-columns: 1fr !important;
    }

    body.staff-edit-profile-page .staff-profile-panel .staff-panel-head {
        grid-row: auto !important;
        min-height: auto !important;
    }
}

/* =========================================================
   Staff orders spacing and live chat placeholder polish
   ========================================================= */
body.staff-orders-page .staff-orders-hero {
    padding-bottom: 74px !important;
}

body.staff-orders-page .staff-orders-hero::after {
    left: clamp(42px, 5vw, 72px) !important;
    bottom: 26px !important;
    margin-top: 18px !important;
}

body.staff-orders-page .staff-order-image {
    margin-bottom: 28px !important;
}

body.staff-chat-page .staff-orders-hero {
    position: relative !important;
    min-height: 360px !important;
    grid-template-columns: minmax(0, 0.62fr) minmax(340px, 0.38fr) !important;
    overflow: hidden !important;
}

body.staff-chat-page .staff-orders-hero::after {
    content: "" !important;
    position: relative !important;
    z-index: 3 !important;
    min-height: 250px !important;
    border-radius: 26px !important;
    border: 1px solid rgba(17,17,17,0.16) !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.88), rgba(255,248,223,0.92)),
        radial-gradient(circle at 22% 24%, rgba(202,165,58,0.34), transparent 28%) !important;
    box-shadow: 10px 10px 0 rgba(202,165,58,0.24), 0 18px 42px rgba(17,17,17,0.1) !important;
}

body.staff-chat-page .staff-orders-hero::before {
    content: "SUPPORT QUEUE" !important;
    position: absolute !important;
    right: clamp(58px, 6vw, 92px) !important;
    top: 72px !important;
    z-index: 4 !important;
    display: inline-flex !important;
    padding: 9px 13px !important;
    border-radius: 999px !important;
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: 2px !important;
}

body.staff-chat-page .staff-orders-hero .staff-hero-copy::after {
    content: "Customer messages, proof questions, order updates" !important;
    display: inline-flex !important;
    margin-top: 18px !important;
    padding: 10px 14px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: 1px solid rgba(255,255,255,0.7) !important;
    font-size: 12px !important;
    font-weight: 900 !important;
}

body.staff-chat-page .krylo-chat-admin-layout {
    grid-template-columns: 360px minmax(0, 1fr) !important;
    background: #ffffff !important;
    border: 1px solid #dedede !important;
}

body.staff-chat-page .krylo-chat-thread-list {
    background: #111111 !important;
    border-right: 6px solid #caa53a !important;
    padding: 22px !important;
}

body.staff-chat-page .krylo-chat-thread-list h2 {
    margin-bottom: 18px !important;
}

body.staff-chat-page .krylo-chat-thread-list a {
    position: relative !important;
    padding: 16px 16px 16px 20px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,0.06) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
}

body.staff-chat-page .krylo-chat-thread-list a::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 14px !important;
    bottom: 14px !important;
    width: 4px !important;
    border-radius: 999px !important;
    background: #caa53a !important;
}

body.staff-chat-page .krylo-chat-thread-list a.active {
    background: #fff8df !important;
}

body.staff-chat-page .krylo-chat-shell {
    background: #ffffff !important;
}

body.staff-chat-page .krylo-chat-head {
    background:
        linear-gradient(90deg, #ffffff 0%, #ffffff 58%, #fff8df 100%) !important;
    border-bottom: 1px solid #dedede !important;
}

body.staff-chat-page .krylo-chat-head h2,
body.staff-chat-page .krylo-chat-head span,
body.staff-chat-page .krylo-chat-head small {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

body.staff-chat-page .krylo-chat-messages {
    padding: 28px !important;
    background:
        linear-gradient(90deg, rgba(202,165,58,0.08) 1px, transparent 1px) 0 0 / 34px 34px,
        linear-gradient(180deg, #ffffff 0%, #fbfbfb 100%) !important;
}

body.staff-chat-page .krylo-chat-bubble {
    max-width: min(520px, 84%) !important;
    border-radius: 20px !important;
    border-left: 5px solid #111111 !important;
}

body.staff-chat-page .krylo-chat-bubble.mine {
    margin-left: auto !important;
    background: #fff8df !important;
    border-left-color: #caa53a !important;
    border-right: 1px solid #d9c47c !important;
}

body.staff-chat-page .krylo-chat-bubble.theirs {
    margin-right: auto !important;
    background: #ffffff !important;
}

@media (max-width: 980px) {
    body.staff-chat-page .staff-orders-hero,
    body.staff-chat-page .krylo-chat-admin-layout {
        grid-template-columns: 1fr !important;
    }

    body.staff-chat-page .staff-orders-hero::before {
        display: none !important;
    }

    body.staff-chat-page .staff-orders-hero::after {
        min-height: 160px !important;
    }

    body.staff-chat-page .krylo-chat-thread-list {
        border-right: 0 !important;
        border-bottom: 6px solid #caa53a !important;
    }
}

/* Staff chat image path and nav hover cleanup */
body.staff-page .staff-nav.krylo-customer-nav .nav-links a::before,
body.staff-page .staff-nav.krylo-customer-nav .nav-links a::after,
body.staff-page .staff-nav.krylo-customer-nav .nav-links a:hover::before,
body.staff-page .staff-nav.krylo-customer-nav .nav-links a:hover::after,
body.staff-page .staff-nav.krylo-customer-nav .nav-links a.bag::before,
body.staff-page .staff-nav.krylo-customer-nav .nav-links a.bag::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    border: 0 !important;
}

body.staff-chat-page .staff-orders-hero {
    grid-template-columns: minmax(0, 0.62fr) minmax(340px, 0.38fr) !important;
}

body.staff-chat-page .staff-orders-hero::before,
body.staff-chat-page .staff-orders-hero::after {
    content: none !important;
    display: none !important;
}

body.staff-chat-page .staff-chat-image {
    position: relative !important;
    z-index: 3 !important;
    min-height: 250px !important;
    border-radius: 26px !important;
    border: 8px solid #ffffff !important;
    background: #ffffff !important;
    box-shadow: 10px 10px 0 rgba(202,165,58,0.26), 0 18px 42px rgba(17,17,17,0.12) !important;
}

body.staff-chat-page .staff-chat-image::after {
    content: "SUPPORT QUEUE" !important;
    position: absolute !important;
    left: 16px !important;
    bottom: 16px !important;
    z-index: 4 !important;
    display: inline-flex !important;
    padding: 8px 12px !important;
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: 2px !important;
}

body.staff-chat-page .staff-chat-image img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 250px !important;
    object-fit: cover !important;
    object-position: center !important;
    filter: contrast(1.05) saturate(0.9) brightness(0.95) !important;
}

body.staff-chat-page .staff-orders-hero .staff-hero-copy::after {
    position: static !important;
    margin-top: 18px !important;
}

/* =========================================================
   Admin UI premium black/white/gold fashion command theme
   ========================================================= */
body.admin-page {
    --admin-ink: #111111;
    --admin-text: #1b1b1b;
    --admin-muted: #626262;
    --admin-gold: #caa53a;
    --admin-soft: #fff8df;
    --admin-line: #dedede;
    margin: 0 !important;
    min-height: 100vh !important;
    background:
        radial-gradient(circle at 8% 8%, rgba(202,165,58,0.16), transparent 26%),
        linear-gradient(135deg, #ffffff 0%, #f7f7f7 58%, #fff8df 100%) !important;
    color: var(--admin-text) !important;
}

body.admin-page .admin-nav {
    width: 100% !important;
    margin: 0 !important;
    padding: 18px clamp(18px, 4vw, 46px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    background: rgba(255,255,255,0.96) !important;
    border: 0 !important;
    box-shadow: 0 10px 28px rgba(17,17,17,0.055) !important;
}

body.admin-page .admin-nav .logo {
    background: transparent !important;
    color: var(--admin-ink) !important;
    -webkit-text-fill-color: var(--admin-ink) !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 18px !important;
    font-weight: 950 !important;
    letter-spacing: 8px !important;
    text-decoration: none !important;
}

body.admin-page .admin-nav .nav-links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

body.admin-page .admin-nav .nav-links a {
    min-height: 40px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: var(--admin-ink) !important;
    -webkit-text-fill-color: var(--admin-ink) !important;
    border: 1px solid transparent !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

body.admin-page .admin-nav .nav-links a::before,
body.admin-page .admin-nav .nav-links a::after {
    content: none !important;
    display: none !important;
}

body.admin-page .admin-nav .nav-links a:hover,
body.admin-page .admin-nav .nav-links a.bag {
    background: var(--admin-ink) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: var(--admin-ink) !important;
}

body.admin-page .admin-fashion-hero {
    width: min(1480px, calc(100% - 48px)) !important;
    min-height: 330px !important;
    margin: 24px auto !important;
    padding: clamp(28px, 4vw, 52px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 0.68fr) minmax(320px, 0.38fr) !important;
    align-items: center !important;
    gap: 26px !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 30px !important;
    border: 1px solid rgba(202,165,58,0.55) !important;
    background:
        linear-gradient(90deg, rgba(17,17,17,0.9) 0%, rgba(17,17,17,0.62) 52%, rgba(202,165,58,0.13) 100%),
        #111111 !important;
    box-shadow: 10px 10px 0 rgba(202,165,58,0.22), 0 22px 58px rgba(17,17,17,0.15) !important;
}

body.admin-page .admin-hero-copy {
    position: relative !important;
    z-index: 2 !important;
}

body.admin-page .admin-kicker,
body.admin-page .admin-panel-head span {
    color: var(--admin-gold) !important;
    -webkit-text-fill-color: var(--admin-gold) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: 3px !important;
    text-transform: uppercase !important;
}

body.admin-page .admin-hero-copy h1 {
    margin: 10px 0 14px !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: clamp(44px, 5.5vw, 82px) !important;
    line-height: 0.96 !important;
    font-weight: 950 !important;
    text-shadow: 0 8px 26px rgba(0,0,0,0.45) !important;
}

body.admin-page .admin-hero-copy p:not(.admin-kicker) {
    color: #f3f3f3 !important;
    -webkit-text-fill-color: #f3f3f3 !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
}

body.admin-page .admin-hero-media,
body.admin-page .admin-image-placeholder {
    min-height: 240px !important;
    border-radius: 24px !important;
    border: 8px solid #ffffff !important;
    background:
        radial-gradient(circle at 30% 28%, rgba(202,165,58,0.22), transparent 32%),
        linear-gradient(135deg, #ffffff 0%, #fff8df 100%) !important;
    box-shadow: 8px 8px 0 rgba(202,165,58,0.28) !important;
}

body.admin-page .admin-metric-grid,
body.admin-page .admin-panel {
    width: min(1480px, calc(100% - 48px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

body.admin-page .admin-metric-grid {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin-bottom: 24px !important;
}

body.admin-page .admin-metric-card,
body.admin-page .admin-panel {
    background: #ffffff !important;
    color: var(--admin-text) !important;
    border: 1px solid var(--admin-line) !important;
    border-radius: 24px !important;
    box-shadow: 0 18px 42px rgba(17,17,17,0.08) !important;
}

body.admin-page .admin-metric-card {
    min-height: 145px !important;
    padding: 20px !important;
    border-top: 4px solid var(--admin-ink) !important;
}

body.admin-page .admin-metric-card h3,
body.admin-page .sales-total {
    color: var(--admin-ink) !important;
    -webkit-text-fill-color: var(--admin-ink) !important;
    font-size: clamp(28px, 3vw, 44px) !important;
}

body.admin-page .admin-panel {
    padding: clamp(20px, 3vw, 34px) !important;
    margin-bottom: 28px !important;
}

body.admin-page .admin-panel-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    margin-bottom: 18px !important;
    padding: 20px 22px !important;
    border-radius: 20px !important;
    background: linear-gradient(90deg, #fffdf7 0%, #ffffff 72%, #fff8df 100%) !important;
    border: 1px solid #ece6d5 !important;
    border-left: 7px solid var(--admin-ink) !important;
}

body.admin-page .admin-panel-head h2,
body.admin-page .admin-panel h2 {
    margin: 0 !important;
    color: var(--admin-ink) !important;
    -webkit-text-fill-color: var(--admin-ink) !important;
    font-size: clamp(28px, 3vw, 46px) !important;
    line-height: 1.05 !important;
    font-weight: 950 !important;
}

body.admin-page .admin-form {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

body.admin-page .admin-form input,
body.admin-page .admin-form select {
    min-height: 48px !important;
    border-radius: 16px !important;
    border: 1px solid var(--admin-line) !important;
    background: #ffffff !important;
    color: var(--admin-ink) !important;
    -webkit-text-fill-color: var(--admin-ink) !important;
    font-weight: 800 !important;
}

body.admin-page .admin-form button,
body.admin-page .checkout-btn,
body.admin-page .clear-search,
body.admin-page .hero-actions button {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    background: var(--admin-gold) !important;
    color: var(--admin-ink) !important;
    -webkit-text-fill-color: var(--admin-ink) !important;
    border: 1px solid var(--admin-gold) !important;
    box-shadow: none !important;
    text-decoration: none !important;
    font-weight: 950 !important;
}

body.admin-page .danger-link {
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    color: #9f1d1d !important;
    -webkit-text-fill-color: #9f1d1d !important;
    border: 1px solid #9f1d1d !important;
    text-decoration: none !important;
    font-weight: 950 !important;
}

body.admin-page .admin-table-wrap {
    overflow-x: auto !important;
    border: 1px solid var(--admin-line) !important;
    border-radius: 24px !important;
    background: #ffffff !important;
}

body.admin-page .admin-table {
    width: 100% !important;
    min-width: 980px !important;
    border-collapse: collapse !important;
    table-layout: auto !important;
    background: #ffffff !important;
}

body.admin-page .admin-table th {
    height: 58px !important;
    padding: 14px 16px !important;
    background: var(--admin-ink) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 0 !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: 1.7px !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    text-align: left !important;
}

body.admin-page .admin-table td {
    min-height: 74px !important;
    padding: 14px 16px !important;
    color: var(--admin-text) !important;
    -webkit-text-fill-color: var(--admin-text) !important;
    border-bottom: 1px solid #eeeeee !important;
    vertical-align: middle !important;
}

body.admin-page .admin-table tr:nth-child(even) td {
    background: #fffdf7 !important;
}

body.admin-page .admin-table tr:hover td {
    background: var(--admin-soft) !important;
}

body.admin-products-page .admin-table {
    min-width: 1180px !important;
}

body.admin-products-page .admin-product-thumb {
    width: 74px !important;
    height: 74px !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    background: #fff8df !important;
    border: 1px solid #d9c47c !important;
    box-shadow: 4px 4px 0 rgba(17,17,17,0.08) !important;
}

body.admin-products-page .admin-product-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block !important;
}

body.admin-products-page .admin-product-thumb span {
    color: var(--admin-ink) !important;
    -webkit-text-fill-color: var(--admin-ink) !important;
    font-size: 26px !important;
    font-weight: 950 !important;
}

body.admin-products-page .admin-table td:nth-child(3) {
    font-weight: 950 !important;
}

body.admin-products-page .admin-table td:nth-child(6) {
    font-weight: 950 !important;
}

/* =========================================================
   Admin final refinement: dashboard, forms, thumbnails, buttons
   ========================================================= */
body.admin-dashboard-page .admin-dashboard-hero {
    min-height: 380px !important;
    grid-template-columns: minmax(0, 0.72fr) minmax(340px, 0.4fr) !important;
    background:
        linear-gradient(90deg, rgba(17,17,17,0.9) 0%, rgba(17,17,17,0.68) 52%, rgba(202,165,58,0.16) 100%),
        #111111 !important;
}

body.admin-dashboard-page .admin-dashboard-hero .admin-hero-media::before {
    content: "STORE COMMAND" !important;
    position: absolute !important;
    left: 18px !important;
    bottom: 18px !important;
    z-index: 2 !important;
    padding: 8px 12px !important;
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: 2px !important;
}

body.admin-dashboard-page .admin-dashboard-hero .admin-hero-media::after {
    content: "" !important;
    position: absolute !important;
    inset: 42px !important;
    border: 2px solid rgba(17,17,17,0.12) !important;
    border-radius: 24px !important;
    background:
        linear-gradient(90deg, transparent 46%, rgba(17,17,17,0.12) 46%, rgba(17,17,17,0.12) 54%, transparent 54%),
        linear-gradient(0deg, transparent 46%, rgba(202,165,58,0.34) 46%, rgba(202,165,58,0.34) 54%, transparent 54%) !important;
}

body.admin-dashboard-page .admin-metric-card {
    position: relative !important;
    overflow: hidden !important;
}

body.admin-dashboard-page .admin-metric-card::after {
    content: "" !important;
    position: absolute !important;
    right: -28px !important;
    top: -28px !important;
    width: 90px !important;
    height: 90px !important;
    border-radius: 50% !important;
    background: rgba(202,165,58,0.18) !important;
}

body.admin-dashboard-page .admin-functions-panel .hero-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

body.admin-dashboard-page .admin-functions-panel .hero-actions a,
body.admin-dashboard-page .admin-functions-panel .hero-actions button {
    width: 100% !important;
}

body.admin-products-page .admin-form-panel,
body.admin-categories-page .admin-form-panel {
    position: relative !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 100% 0%, rgba(202,165,58,0.14), transparent 25%),
        #ffffff !important;
    border-top: 6px solid #111111 !important;
}

body.admin-products-page .admin-form-panel::after,
body.admin-categories-page .admin-form-panel::after {
    content: "KRYLO EDITOR" !important;
    position: absolute !important;
    right: 24px !important;
    top: 24px !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    background: #fff8df !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: 1px solid #d9c47c !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: 1.8px !important;
}

body.admin-categories-page .admin-form-panel::after {
    content: "CATEGORY BUILDER" !important;
}

body.admin-products-page .admin-form,
body.admin-categories-page .admin-form {
    margin-top: 8px !important;
    padding: 18px !important;
    border-radius: 22px !important;
    background: #fffdf7 !important;
    border: 1px solid #ece6d5 !important;
}

body.admin-products-page .admin-form input,
body.admin-products-page .admin-form select,
body.admin-categories-page .admin-form input,
body.admin-categories-page .admin-form select {
    padding-left: 16px !important;
    background:
        linear-gradient(90deg, rgba(202,165,58,0.08), transparent 34%),
        #ffffff !important;
}

body.admin-products-page .admin-product-thumb {
    width: 82px !important;
    height: 82px !important;
    padding: 5px !important;
    background: #ffffff !important;
    border: 1px solid #d9c47c !important;
    border-radius: 18px !important;
}

body.admin-products-page .admin-product-thumb img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
}

body.admin-products-page .admin-table td:nth-child(10),
body.admin-categories-page .admin-table td:last-child,
body.admin-users-page .admin-table td:last-child {
    white-space: nowrap !important;
}

body.admin-page .admin-table .checkout-btn,
body.admin-page .admin-table .danger-link,
body.admin-products-page .admin-table .checkout-btn,
body.admin-products-page .admin-table .danger-link,
body.admin-categories-page .admin-table .checkout-btn,
body.admin-categories-page .admin-table .danger-link,
body.admin-users-page .admin-table .checkout-btn,
body.admin-users-page .admin-table .danger-link {
    width: auto !important;
    min-width: 82px !important;
    max-width: none !important;
    min-height: 38px !important;
    margin: 3px !important;
    padding: 0 14px !important;
    font-size: 12px !important;
    letter-spacing: 0.8px !important;
}

body.admin-products-page .admin-table .checkout-btn,
body.admin-categories-page .admin-table .checkout-btn,
body.admin-users-page .admin-table .checkout-btn {
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #111111 !important;
}

body.admin-products-page .admin-table .danger-link,
body.admin-categories-page .admin-table .danger-link,
body.admin-users-page .admin-table .danger-link {
    background: #ffffff !important;
    color: #9f1d1d !important;
    -webkit-text-fill-color: #9f1d1d !important;
    border-color: #9f1d1d !important;
}

body.admin-profile-page .admin-profile-card {
    display: grid !important;
    grid-template-columns: minmax(250px, 0.35fr) minmax(0, 1fr) !important;
    gap: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    border-radius: 30px !important;
}

body.admin-profile-page .admin-profile-card .admin-panel-head {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
        linear-gradient(180deg, #111111 0%, #1b1b1b 72%, #caa53a 72.2%, #caa53a 100%) !important;
    align-content: start !important;
    min-height: 100% !important;
}

body.admin-profile-page .admin-profile-card .admin-panel-head span,
body.admin-profile-page .admin-profile-card .admin-panel-head h2 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body.admin-profile-page .admin-profile-card > p,
body.admin-profile-page .admin-profile-card .admin-form {
    margin: 0 !important;
    padding-left: clamp(22px, 3vw, 36px) !important;
    padding-right: clamp(22px, 3vw, 36px) !important;
}

body.admin-profile-page .admin-profile-card > p {
    padding-top: 28px !important;
    color: #0f5132 !important;
    -webkit-text-fill-color: #0f5132 !important;
    font-weight: 900 !important;
}

body.admin-profile-page .admin-profile-card .admin-form {
    padding-top: 18px !important;
    padding-bottom: 34px !important;
    background: #ffffff !important;
    border: 0 !important;
}

body.admin-profile-page .admin-password-field {
    position: relative !important;
}

body.admin-profile-page .admin-password-field input {
    padding-right: 86px !important;
}

body.admin-profile-page .admin-toggle-password {
    position: absolute !important;
    top: 50% !important;
    right: 8px !important;
    transform: translateY(-50%) !important;
    min-width: 62px !important;
    min-height: 36px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    background: #fff8df !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: 1px solid #d9c47c !important;
    font-size: 12px !important;
    font-weight: 950 !important;
}

@media (max-width: 980px) {
    body.admin-dashboard-page .admin-functions-panel .hero-actions,
    body.admin-profile-page .admin-profile-card {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   Admin final visual repair and creative controls
   ========================================================= */
body.admin-page .admin-nav {
    position: relative !important;
    z-index: 20 !important;
}

body.admin-page .admin-nav .nav-links a {
    transform: none !important;
}

body.admin-page .admin-nav .nav-links a:hover,
body.admin-page .admin-nav .nav-links a.bag {
    transform: none !important;
    translate: none !important;
}

body.admin-dashboard-page .admin-dashboard-visual {
    position: relative !important;
    overflow: hidden !important;
    border: 8px solid #ffffff !important;
    background: #ffffff !important;
}

body.admin-dashboard-page .admin-dashboard-visual img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 240px !important;
    object-fit: cover !important;
    object-position: center !important;
    filter: contrast(1.05) saturate(0.9) brightness(0.92) !important;
}

body.admin-dashboard-page .admin-dashboard-visual::before {
    content: "STORE COMMAND" !important;
    position: absolute !important;
    left: 16px !important;
    bottom: 16px !important;
    z-index: 3 !important;
    padding: 8px 12px !important;
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: 2px !important;
}

body.admin-dashboard-page .admin-dashboard-visual::after {
    content: none !important;
    display: none !important;
}

body.admin-dashboard-page .admin-primary-btn {
    background: #caa53a !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: 1px solid #caa53a !important;
    min-width: 190px !important;
    justify-content: center !important;
}

body.admin-dashboard-page .admin-secondary-btn {
    background: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: 1px solid #ffffff !important;
    min-width: 170px !important;
    justify-content: center !important;
}

body.admin-profile-page .admin-profile-card {
    grid-template-columns: minmax(320px, 0.34fr) minmax(0, 1fr) !important;
    min-height: 460px !important;
}

body.admin-profile-page .admin-profile-card .admin-panel-head {
    padding: 34px !important;
}

body.admin-profile-page .admin-profile-card .admin-panel-head h2 {
    font-size: clamp(44px, 4.4vw, 68px) !important;
    line-height: 1.02 !important;
}

body.admin-profile-page .admin-profile-card .admin-form {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-content: start !important;
    gap: 16px !important;
}

body.admin-profile-page .admin-profile-card .admin-form > button {
    grid-column: 1 / -1 !important;
    width: min(260px, 100%) !important;
}

body.admin-profile-page .admin-password-field input {
    min-width: 0 !important;
}

body.admin-profile-page .admin-toggle-password {
    z-index: 3 !important;
}

body.admin-products-page .admin-product-thumb,
body.admin-dashboard-page .top-seller-thumb,
body.admin-page .top-seller-thumb {
    width: 88px !important;
    height: 88px !important;
    padding: 8px !important;
    overflow: hidden !important;
}

body.admin-products-page .admin-product-thumb img,
body.admin-dashboard-page .top-seller-thumb img,
body.admin-page .top-seller-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
    scale: 1 !important;
}

body.admin-products-page .admin-form-panel .admin-panel-head::before,
body.admin-categories-page .admin-form-panel .admin-panel-head::before {
    content: "01" !important;
    display: inline-grid !important;
    place-items: center !important;
    width: 42px !important;
    height: 42px !important;
    margin-right: 12px !important;
    border-radius: 50% !important;
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 950 !important;
}

body.admin-categories-page .admin-form-panel .admin-panel-head::before {
    content: "02" !important;
}

body.admin-products-page .admin-form,
body.admin-categories-page .admin-form {
    position: relative !important;
}

body.admin-products-page .admin-form::before,
body.admin-categories-page .admin-form::before {
    content: "Fill the fields, choose audience, then publish to catalogue." !important;
    grid-column: 1 / -1 !important;
    display: block !important;
    padding: 12px 14px !important;
    border-radius: 16px !important;
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 850 !important;
}

body.admin-categories-page .admin-form::before {
    content: "Create clean Men, Women, or Kids subcategory groups." !important;
}

body.admin-page .admin-table .checkout-btn,
body.admin-page .admin-table .danger-link {
    width: auto !important;
    min-width: 86px !important;
    max-width: 130px !important;
    min-height: 38px !important;
    border-radius: 999px !important;
}

body.admin-products-page .admin-table td:last-child {
    white-space: nowrap !important;
}

@media (max-width: 980px) {
    body.admin-profile-page .admin-profile-card {
        grid-template-columns: 1fr !important;
    }

    body.admin-profile-page .admin-profile-card .admin-form {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 980px) {
    body.admin-page .admin-fashion-hero,
    body.admin-page .admin-metric-grid,
    body.admin-page .admin-form {
        grid-template-columns: 1fr !important;
    }

    body.admin-page .admin-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 720px) {
    body.admin-page .admin-fashion-hero,
    body.admin-page .admin-metric-grid,
    body.admin-page .admin-panel {
        width: min(94%, calc(100% - 18px)) !important;
    }

    body.admin-page .admin-nav {
        align-items: flex-start !important;
        flex-direction: column !important;
    }
}

/* Auth fallback: applies even if an older PHP page is still missing the body class */
body:has(.split-container .auth-box),
body.krylo-auth-body {
    background:
        radial-gradient(circle at 12% 10%, rgba(202,165,58,0.22), transparent 28%),
        linear-gradient(135deg, #ffffff 0%, #f7f7f7 56%, #fff8df 100%) !important;
}

.split-container:has(.auth-box) {
    width: min(1180px, calc(100% - 48px)) !important;
    min-height: min(760px, calc(100vh - 56px)) !important;
    margin: 28px auto !important;
    display: grid !important;
    grid-template-columns: minmax(360px, 1.05fr) minmax(360px, 0.95fr) !important;
    background: #ffffff !important;
    border: 1px solid #dedede !important;
    border-radius: 32px !important;
    overflow: hidden !important;
    box-shadow: 0 26px 70px rgba(17,17,17,0.13) !important;
}

.split-container:has(.auth-box) .split-image {
    position: relative !important;
    min-height: 640px !important;
    background: #111111 !important;
    overflow: hidden !important;
}

.split-container:has(.auth-box) .split-image::before {
    content: "KRYLO FASHION" !important;
    position: absolute !important;
    left: 34px !important;
    top: 34px !important;
    z-index: 2 !important;
    padding: 10px 14px !important;
    border: 1px solid rgba(255,255,255,0.34) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: 3px !important;
}

.split-container:has(.auth-box) .split-image::after {
    content: "Minimal looks. Everyday confidence." !important;
    position: absolute !important;
    left: 34px !important;
    right: 34px !important;
    bottom: 34px !important;
    z-index: 2 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: clamp(34px, 4vw, 58px) !important;
    line-height: 0.96 !important;
    font-weight: 950 !important;
    text-shadow: 0 8px 26px rgba(0,0,0,0.6) !important;
}

.split-container:has(.auth-box) .split-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    filter: grayscale(18%) contrast(1.06) brightness(0.82) !important;
    transform: scale(1.02) !important;
}

.split-container:has(.auth-box) .split-form {
    min-height: 640px !important;
    display: grid !important;
    place-items: center !important;
    padding: clamp(28px, 5vw, 64px) !important;
    background:
        linear-gradient(180deg, #ffffff 0%, #ffffff 68%, #fff8df 100%) !important;
}

.split-container:has(.auth-box) .auth-box {
    width: min(100%, 470px) !important;
    margin: 0 !important;
    padding: clamp(26px, 4vw, 42px) !important;
    background: #ffffff !important;
    color: #171717 !important;
    border: 1px solid #dedede !important;
    border-top: 5px solid #caa53a !important;
    border-radius: 26px !important;
    box-shadow: 9px 9px 0 rgba(202,165,58,0.22), 0 18px 42px rgba(17,17,17,0.08) !important;
}

.split-container:has(.auth-box) .auth-box h1 {
    margin: 0 0 10px !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-size: clamp(42px, 5vw, 66px) !important;
    line-height: 0.95 !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
}

.split-container:has(.auth-box) .auth-box h2 {
    margin: 0 0 24px !important;
    color: #626262 !important;
    -webkit-text-fill-color: #626262 !important;
    font-size: 17px !important;
    line-height: 1.45 !important;
    font-weight: 800 !important;
}

.split-container:has(.auth-box) .auth-box form {
    display: grid !important;
    gap: 14px !important;
    margin: 0 0 20px !important;
}

.split-container:has(.auth-box) .auth-box input {
    width: 100% !important;
    min-height: 54px !important;
    padding: 0 16px !important;
    background: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: 1px solid #dedede !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    font-size: 15px !important;
    font-weight: 800 !important;
}

.split-container:has(.auth-box) .password-field {
    position: relative !important;
}

.split-container:has(.auth-box) .auth-box .password-field input {
    padding-right: 88px !important;
}

.split-container:has(.auth-box) .toggle-password {
    position: absolute !important;
    top: 50% !important;
    right: 8px !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    min-width: 64px !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    background: #fff8df !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: 1px solid #d9c47c !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
}

.split-container:has(.auth-box) .auth-box button[type="submit"],
.split-container:has(.auth-box) .auth-box button[name="register"],
.split-container:has(.auth-box) .auth-box button[name="login"],
.split-container:has(.auth-box) .auth-box button[name="check_email"],
.split-container:has(.auth-box) .auth-box button[name="reset_password"] {
    min-height: 56px !important;
    border-radius: 999px !important;
    background: #111111 !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid #111111 !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    letter-spacing: 2px !important;
    box-shadow: 6px 6px 0 rgba(202,165,58,0.28) !important;
    cursor: pointer !important;
}

.split-container:has(.auth-box) .auth-box a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    min-height: 44px !important;
    margin-top: 10px !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    background: #ffffff !important;
    border: 1px solid #111111 !important;
    border-radius: 999px !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 950 !important;
}

@media (max-width: 920px) {
    .split-container:has(.auth-box) {
        grid-template-columns: 1fr !important;
    }

    .split-container:has(.auth-box) .split-image {
        min-height: 320px !important;
    }

    .split-container:has(.auth-box) .split-form {
        min-height: auto !important;
    }
}

/* Final auth refinement: remove duplicate password icons and lift the fashion UI */
body.krylo-auth-body .auth-box,
.split-container:has(.auth-box) .auth-box {
    position: relative !important;
    overflow: hidden !important;
    border-top: 0 !important;
}

body.krylo-auth-body .auth-box::before,
.split-container:has(.auth-box) .auth-box::before {
    content: "ACCOUNT ACCESS" !important;
    display: inline-flex !important;
    width: fit-content !important;
    margin-bottom: 18px !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    background: #fff8df !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: 1px solid #d9c47c !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: 2px !important;
}

body.krylo-register-body .auth-box::before {
    content: "JOIN THE EDIT" !important;
}

body.krylo-forgot-body .auth-box::before {
    content: "ACCOUNT RECOVERY" !important;
}

body.krylo-auth-body .auth-box::after,
.split-container:has(.auth-box) .auth-box::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 0 auto 0 !important;
    height: 5px !important;
    background: linear-gradient(90deg, #111111 0%, #caa53a 52%, #111111 100%) !important;
}

body.krylo-auth-body .auth-box h1,
.split-container:has(.auth-box) .auth-box h1 {
    letter-spacing: 8px !important;
    font-size: clamp(42px, 4.4vw, 58px) !important;
}

body.krylo-auth-body .auth-box h2,
.split-container:has(.auth-box) .auth-box h2 {
    color: #222222 !important;
    -webkit-text-fill-color: #222222 !important;
    padding-bottom: 18px !important;
    border-bottom: 1px solid #ece6d5 !important;
}

body.krylo-auth-body .auth-box input::-ms-reveal,
body.krylo-auth-body .auth-box input::-ms-clear,
.split-container:has(.auth-box) .auth-box input::-ms-reveal,
.split-container:has(.auth-box) .auth-box input::-ms-clear {
    display: none !important;
}

body.krylo-auth-body .auth-box .password-field input,
.split-container:has(.auth-box) .auth-box .password-field input {
    padding-right: 86px !important;
}

body.krylo-auth-body .toggle-password,
.split-container:has(.auth-box) .toggle-password {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: absolute !important;
    top: 50% !important;
    right: 8px !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    min-width: 62px !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    background: #fff8df !important;
    background-image: none !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: 1px solid #d9c47c !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
    cursor: pointer !important;
    z-index: 3 !important;
}

body.krylo-auth-body .toggle-password:hover,
.split-container:has(.auth-box) .toggle-password:hover {
    background: #caa53a !important;
    border-color: #caa53a !important;
}

body.krylo-auth-body .auth-box input,
.split-container:has(.auth-box) .auth-box input {
    background:
        linear-gradient(90deg, rgba(202,165,58,0.08), transparent 30%),
        #ffffff !important;
    border-color: #d9d9d9 !important;
}

body.krylo-auth-body .auth-box input::placeholder,
.split-container:has(.auth-box) .auth-box input::placeholder {
    color: #666666 !important;
    opacity: 1 !important;
}

body.krylo-auth-body .auth-box button[type="submit"],
.split-container:has(.auth-box) .auth-box button[type="submit"],
.split-container:has(.auth-box) .auth-box button[name="register"],
.split-container:has(.auth-box) .auth-box button[name="login"],
.split-container:has(.auth-box) .auth-box button[name="check_email"],
.split-container:has(.auth-box) .auth-box button[name="reset_password"] {
    background: #111111 !important;
    background-image: none !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid #111111 !important;
    box-shadow: 7px 7px 0 rgba(202,165,58,0.3) !important;
}

body.krylo-auth-body .auth-box button[type="submit"]:hover,
.split-container:has(.auth-box) .auth-box button[type="submit"]:hover {
    background: #caa53a !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border-color: #caa53a !important;
}

body.krylo-auth-body .password-rules,
.split-container:has(.auth-box) .password-rules {
    background: #fbfbfb !important;
    border: 1px solid #ece6d5 !important;
    border-radius: 16px !important;
    padding: 12px !important;
}

body.krylo-auth-body .split-form,
.split-container:has(.auth-box) .split-form {
    background:
        radial-gradient(circle at 84% 16%, rgba(202,165,58,0.16), transparent 26%),
        linear-gradient(180deg, #ffffff 0%, #ffffff 62%, #fff8df 100%) !important;
}

/* Final admin studio pass: steadier nav, real visuals, tighter controls */
body.admin-page .admin-nav {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    min-height: 76px !important;
    overflow: visible !important;
}

body.admin-page .admin-nav .nav-links {
    align-items: center !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
}

body.admin-page .admin-nav .nav-links::-webkit-scrollbar {
    display: none !important;
}

body.admin-page .admin-nav .nav-links a,
body.admin-page .admin-nav .nav-links a:hover,
body.admin-page .admin-nav .nav-links a:focus,
body.admin-page .admin-nav .nav-links a.bag {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    translate: none !important;
    margin: 0 !important;
    white-space: nowrap !important;
    line-height: 1 !important;
}

body.admin-page .admin-nav .nav-links a::before,
body.admin-page .admin-nav .nav-links a::after {
    content: none !important;
    display: none !important;
}

body.admin-page .admin-primary-btn,
body.admin-page .admin-secondary-btn,
body.admin-page .hero-actions button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 52px !important;
    padding: 0 24px !important;
    border-radius: 999px !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
    text-decoration: none !important;
    opacity: 1 !important;
    visibility: visible !important;
}

body.admin-page .admin-primary-btn,
body.admin-page .hero-actions button:not(.outline) {
    background: #caa53a !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: 1px solid #caa53a !important;
    box-shadow: 7px 7px 0 rgba(17,17,17,0.18) !important;
}

body.admin-page .admin-secondary-btn,
body.admin-page .hero-actions button.outline {
    background: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: 1px solid #111111 !important;
    box-shadow: 7px 7px 0 rgba(202,165,58,0.22) !important;
}

body.admin-dashboard-page .admin-dashboard-visual::before,
body.admin-dashboard-page .admin-dashboard-visual::after,
body.admin-page .admin-image-placeholder::before,
body.admin-page .admin-image-placeholder::after,
body.admin-page .admin-image-placeholder span {
    content: none !important;
    display: none !important;
}

body.admin-dashboard-page .admin-dashboard-visual,
body.admin-products-page .admin-products-visual,
body.admin-profile-page .admin-profile-visual {
    min-height: 290px !important;
    border: 8px solid #ffffff !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    background: #fff8df !important;
    box-shadow: 12px 12px 0 rgba(202,165,58,0.28) !important;
}

body.admin-dashboard-page .admin-dashboard-visual img,
body.admin-products-page .admin-products-visual img,
body.admin-profile-page .admin-profile-visual img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 290px !important;
    object-fit: cover !important;
    object-position: center !important;
    filter: saturate(0.96) contrast(1.02) !important;
}

body.admin-dashboard-page .admin-fashion-hero {
    background:
        linear-gradient(90deg, rgba(17,17,17,0.98) 0%, rgba(17,17,17,0.92) 52%, rgba(202,165,58,0.18) 100%),
        #111111 !important;
}

body.admin-profile-page .admin-profile-card {
    grid-template-columns: minmax(300px, 0.34fr) minmax(0, 1fr) !important;
    align-items: stretch !important;
    overflow: hidden !important;
}

body.admin-profile-page .admin-profile-card .admin-panel-head {
    min-height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

body.admin-profile-page .admin-profile-card .admin-panel-head h2 {
    max-width: 240px !important;
    overflow-wrap: anywhere !important;
}

body.admin-profile-page .admin-profile-card .admin-form {
    grid-template-columns: repeat(2, minmax(240px, 1fr)) !important;
    gap: 16px !important;
}

body.admin-profile-page .admin-password-field {
    position: relative !important;
    min-width: 0 !important;
}

body.admin-profile-page .admin-password-field input {
    width: 100% !important;
    padding-right: 88px !important;
}

body.admin-profile-page .admin-toggle-password {
    position: absolute !important;
    top: 50% !important;
    right: 10px !important;
    transform: translateY(-50%) !important;
    min-width: 58px !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    background: #fff8df !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: 1px solid #d9c47c !important;
    box-shadow: none !important;
    font-size: 12px !important;
}

body.admin-products-page .admin-product-thumb,
body.admin-dashboard-page .top-seller-thumb,
body.admin-page .top-seller-thumb {
    width: 92px !important;
    height: 92px !important;
    padding: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    border: 1px solid rgba(202,165,58,0.42) !important;
    box-shadow: 5px 5px 0 rgba(202,165,58,0.18) !important;
}

body.admin-products-page .admin-product-thumb img,
body.admin-dashboard-page .top-seller-thumb img,
body.admin-page .top-seller-thumb img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
}

body.admin-products-page .admin-table {
    min-width: 1260px !important;
}

body.admin-products-page .admin-table th:nth-child(2),
body.admin-products-page .admin-table td:nth-child(2),
body.admin-dashboard-page .staff-table th:nth-child(2),
body.admin-dashboard-page .staff-table td:nth-child(2) {
    width: 120px !important;
    min-width: 120px !important;
}

body.admin-page .admin-table th {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body.admin-page .admin-table td {
    vertical-align: middle !important;
}

body.admin-products-page .admin-table td:last-child {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    min-width: 190px !important;
}

body.admin-products-page .admin-table td:last-child .checkout-btn,
body.admin-products-page .admin-table td:last-child .danger-link {
    width: auto !important;
    min-width: 82px !important;
    max-width: 110px !important;
    min-height: 42px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    letter-spacing: 1px !important;
}

body.admin-products-page .admin-form-panel {
    border-top: 6px solid #111111 !important;
    background:
        linear-gradient(135deg, rgba(255,248,223,0.92) 0%, rgba(255,255,255,0.98) 44%, rgba(202,165,58,0.16) 100%),
        #ffffff !important;
}

body.admin-products-page .admin-form-panel .admin-form {
    position: relative !important;
    grid-template-columns: 1.4fr 1fr 1fr 0.9fr !important;
    align-items: end !important;
}

body.admin-products-page .admin-form-panel .admin-form::before {
    content: "Build the product card: audience, subcategory, price, rating, badge, stock." !important;
    grid-column: 1 / -1 !important;
    display: block !important;
    padding: 13px 16px !important;
    border-left: 5px solid #caa53a !important;
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-radius: 16px !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: 1px !important;
}

body.admin-products-page .admin-form-panel input,
body.admin-products-page .admin-form-panel select,
body.admin-categories-page .admin-form-panel input,
body.admin-categories-page .admin-form-panel select {
    min-height: 54px !important;
    border-radius: 16px !important;
    border: 1px solid #dedede !important;
    background: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-weight: 850 !important;
}

body.admin-products-page .admin-form-panel button,
body.admin-categories-page .admin-form-panel button {
    min-height: 54px !important;
    border-radius: 999px !important;
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid #111111 !important;
    box-shadow: 6px 6px 0 rgba(202,165,58,0.28) !important;
}

body.admin-products-page .admin-form-panel .clear-search {
    min-height: 54px !important;
    border-radius: 999px !important;
    border: 1px solid #111111 !important;
    background: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

@media (max-width: 1100px) {
    body.admin-profile-page .admin-profile-card,
    body.admin-products-page .admin-form-panel .admin-form {
        grid-template-columns: 1fr !important;
    }

    body.admin-profile-page .admin-profile-card .admin-panel-head h2 {
        max-width: none !important;
    }
}

/* Admin profile/product/nav correction pass */
body.admin-page .admin-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 18px !important;
    height: 88px !important;
    min-height: 88px !important;
    padding: 0 clamp(28px, 3vw, 58px) !important;
}

body.admin-page .admin-nav .logo {
    flex: 0 0 auto !important;
    min-width: 240px !important;
    white-space: nowrap !important;
}

body.admin-page .admin-nav .nav-links {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 12px !important;
}

body.admin-page .admin-nav .nav-links a {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    min-height: 50px !important;
    padding: 0 18px !important;
    border-radius: 999px !important;
}

body.admin-page .admin-nav .nav-links a.bag {
    min-width: 0 !important;
}

body.admin-profile-page .admin-profile-card {
    width: min(1080px, calc(100% - 56px)) !important;
    min-height: 0 !important;
    margin: 28px auto 42px !important;
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) !important;
    background: #ffffff !important;
}

body.admin-profile-page .admin-profile-card .admin-panel-head {
    grid-row: 1 / span 2 !important;
    min-height: 360px !important;
    padding: 34px !important;
    background:
        linear-gradient(180deg, #111111 0%, #111111 72%, #caa53a 72%, #caa53a 100%) !important;
}

body.admin-profile-page .admin-profile-card .admin-panel-head h2 {
    max-width: none !important;
    font-size: clamp(38px, 4vw, 54px) !important;
    line-height: 1.05 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

body.admin-profile-page .admin-profile-card > p {
    grid-column: 2 !important;
    align-self: end !important;
    width: calc(100% - 56px) !important;
    margin: 28px 28px 0 !important;
    padding: 12px 16px !important;
    border-radius: 14px !important;
    background: #fff8df !important;
    border: 1px solid rgba(202,165,58,0.34) !important;
}

body.admin-profile-page .admin-profile-card .admin-form {
    grid-column: 2 !important;
    padding: 38px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-content: center !important;
}

body.admin-profile-page .admin-profile-card .admin-form input {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.admin-profile-page .admin-profile-card .admin-form > button {
    justify-self: center !important;
    width: min(340px, 100%) !important;
    margin-top: 4px !important;
}

body.admin-products-page .admin-products-hero {
    min-height: 430px !important;
    max-height: 470px !important;
    overflow: hidden !important;
}

body.admin-products-page .admin-products-visual {
    min-height: 360px !important;
    max-height: 410px !important;
    background: #fff8df !important;
}

body.admin-products-page .admin-products-visual img {
    min-height: 360px !important;
    max-height: 410px !important;
    object-fit: contain !important;
    object-position: center !important;
    padding: 24px !important;
}

body.admin-products-page .admin-table td:last-child {
    display: table-cell !important;
    text-align: center !important;
    vertical-align: middle !important;
    min-width: 190px !important;
    padding-top: 18px !important;
    padding-bottom: 18px !important;
}

body.admin-products-page .admin-table td:last-child .checkout-btn,
body.admin-products-page .admin-table td:last-child .danger-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    margin: 4px 5px !important;
}

body.admin-products-page .admin-table tr:nth-child(odd) td:last-child {
    background: #ffffff !important;
}

body.admin-products-page .admin-table tr:nth-child(even) td:last-child {
    background: #fff8df !important;
}

body.admin-products-page .admin-table tr:hover td:last-child {
    background: #fff3c4 !important;
}

@media (max-width: 1280px) {
    body.admin-page .admin-nav .logo {
        min-width: 190px !important;
    }

    body.admin-page .admin-nav .nav-links {
        gap: 7px !important;
    }

    body.admin-page .admin-nav .nav-links a {
        padding: 0 12px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 900px) {
    body.admin-page .admin-nav {
        height: auto !important;
        min-height: 88px !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }

    body.admin-page .admin-nav .nav-links {
        justify-content: flex-start !important;
        flex-wrap: wrap !important;
    }

    body.admin-profile-page .admin-profile-card {
        grid-template-columns: 1fr !important;
    }

    body.admin-profile-page .admin-profile-card .admin-panel-head,
    body.admin-profile-page .admin-profile-card .admin-form,
    body.admin-profile-page .admin-profile-card > p {
        grid-column: 1 !important;
        grid-row: auto !important;
    }

    body.admin-profile-page .admin-profile-card .admin-form {
        grid-template-columns: 1fr !important;
        padding: 24px !important;
    }
}

/* Admin profile and staff access final polish */
body.admin-profile-page .admin-profile-hero,
body.admin-users-page .admin-users-hero {
    grid-template-columns: minmax(0, 0.92fr) minmax(360px, 0.72fr) !important;
    min-height: 360px !important;
    padding: clamp(28px, 4vw, 54px) !important;
}

body.admin-profile-page .admin-profile-hero .admin-hero-copy,
body.admin-users-page .admin-users-hero .admin-hero-copy {
    max-width: 620px !important;
}

body.admin-profile-page .admin-profile-visual,
body.admin-users-page .admin-users-visual {
    position: relative !important;
    min-height: 260px !important;
    max-height: 320px !important;
    border-radius: 28px !important;
    overflow: hidden !important;
    border: 7px solid #ffffff !important;
    background: #fff8df !important;
    box-shadow: 10px 10px 0 rgba(202,165,58,0.26) !important;
}

body.admin-profile-page .admin-profile-visual img,
body.admin-users-page .admin-users-visual img {
    width: 100% !important;
    height: 100% !important;
    min-height: 260px !important;
    max-height: 320px !important;
    object-fit: cover !important;
    object-position: center !important;
}

body.admin-page .admin-image-path {
    position: absolute !important;
    right: 14px !important;
    bottom: 14px !important;
    z-index: 2 !important;
    display: inline-flex !important;
    max-width: calc(100% - 28px) !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,0.92) !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: 1px solid rgba(202,165,58,0.42) !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: 1px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.admin-profile-page .admin-profile-card {
    width: min(1180px, calc(100% - 56px)) !important;
    grid-template-columns: minmax(260px, 330px) minmax(0, 1fr) !important;
    border-radius: 28px !important;
    background:
        linear-gradient(90deg, #ffffff 0%, #ffffff 72%, rgba(255,248,223,0.7) 100%) !important;
}

body.admin-profile-page .admin-profile-card .admin-panel-head {
    min-height: 330px !important;
    padding: 34px 30px !important;
    background:
        linear-gradient(180deg, #111111 0%, #111111 66%, #caa53a 66%, #caa53a 100%) !important;
}

body.admin-profile-page .admin-profile-card .admin-panel-head h2 {
    font-size: clamp(34px, 3.4vw, 48px) !important;
}

body.admin-profile-page .admin-profile-card .admin-form {
    padding: 34px clamp(30px, 4vw, 56px) !important;
    gap: 18px !important;
}

body.admin-profile-page .admin-role-lock,
body.admin-users-page .admin-role-lock {
    min-height: 62px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    padding: 12px 18px !important;
    border-radius: 18px !important;
    background:
        linear-gradient(135deg, #111111 0%, #1d1a12 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid rgba(202,165,58,0.42) !important;
    box-shadow: 6px 6px 0 rgba(202,165,58,0.18) !important;
}

body.admin-profile-page .admin-role-lock span,
body.admin-users-page .admin-role-lock span {
    color: #caa53a !important;
    -webkit-text-fill-color: #caa53a !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: 2px !important;
}

body.admin-profile-page .admin-role-lock strong,
body.admin-users-page .admin-role-lock strong {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    text-align: right !important;
}

body.admin-profile-page .admin-password-field,
body.admin-users-page .admin-password-field {
    position: relative !important;
}

body.admin-profile-page .admin-password-field input,
body.admin-users-page .admin-password-field input {
    padding-right: 88px !important;
}

body.admin-profile-page .admin-toggle-password,
body.admin-users-page .admin-toggle-password {
    position: absolute !important;
    top: 50% !important;
    right: 10px !important;
    transform: translateY(-50%) !important;
    min-width: 58px !important;
    min-height: 38px !important;
    border-radius: 999px !important;
    padding: 0 12px !important;
    background: #caa53a !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: 1px solid #caa53a !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: 0 !important;
}

body.admin-profile-page .admin-profile-card .admin-form > button {
    grid-column: 1 / -1 !important;
    min-height: 56px !important;
    width: min(380px, 100%) !important;
    justify-self: center !important;
    background: #caa53a !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border-color: #caa53a !important;
}

body.admin-users-page .admin-people-form .admin-form {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: center !important;
}

body.admin-users-page .admin-people-form .admin-form > button {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: min(320px, 100%) !important;
}

@media (max-width: 980px) {
    body.admin-profile-page .admin-profile-hero,
    body.admin-users-page .admin-users-hero {
        grid-template-columns: 1fr !important;
    }

    body.admin-profile-page .admin-profile-card,
    body.admin-users-page .admin-people-form .admin-form {
        grid-template-columns: 1fr !important;
    }
}


/* =========================================================
   FINAL USER REQUEST PATCH: clean admin placeholders/profile
   ========================================================= */
body.admin-page .admin-image-path,
body.admin-page .admin-image-placeholder > span,
body.admin-page .placeholder-label,
body.admin-dashboard-page .admin-dashboard-visual::before,
body.admin-dashboard-page .admin-dashboard-visual::after,
body.admin-categories-page .admin-categories-visual::before,
body.admin-categories-page .admin-categories-visual::after,
body.admin-products-page .admin-form-panel::after,
body.admin-categories-page .admin-form-panel::after {
    content: none !important;
    display: none !important;
}

body.admin-page .admin-media-link,
body.admin-dashboard-page .admin-dashboard-visual,
body.admin-categories-page .admin-categories-visual,
body.admin-users-page .admin-users-visual,
body.admin-profile-page .admin-profile-visual {
    position: relative !important;
    display: block !important;
    min-height: 290px !important;
    overflow: hidden !important;
    border: 8px solid #ffffff !important;
    border-radius: 28px !important;
    background: #fff8df !important;
    box-shadow: 12px 12px 0 rgba(202,165,58,0.24), 0 18px 42px rgba(17,17,17,0.10) !important;
    text-decoration: none !important;
}

body.admin-page .admin-media-link img,
body.admin-dashboard-page .admin-dashboard-visual img,
body.admin-categories-page .admin-categories-visual img,
body.admin-users-page .admin-users-visual img,
body.admin-profile-page .admin-profile-visual img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 290px !important;
    object-fit: cover !important;
    object-position: center !important;
    border: 0 !important;
}

body.admin-categories-page .admin-categories-visual img,
body.admin-products-page .admin-products-visual img {
    object-fit: contain !important;
    padding: 24px !important;
    background: #fff8df !important;
}

body.admin-profile-page .admin-profile-card {
    display: block !important;
    width: min(980px, calc(100% - 48px)) !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 30px !important;
    background: #ffffff !important;
}

body.admin-profile-page .admin-profile-card .admin-panel-head {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 28px 34px !important;
    border: 0 !important;
    border-bottom: 1px solid #ece6d5 !important;
    border-left: 7px solid #caa53a !important;
    border-radius: 0 !important;
    background: linear-gradient(90deg, #ffffff 0%, #fffdf7 70%, #fff8df 100%) !important;
    display: block !important;
}

body.admin-profile-page .admin-profile-card .admin-panel-head span {
    color: #8a5f1c !important;
    -webkit-text-fill-color: #8a5f1c !important;
}

body.admin-profile-page .admin-profile-card .admin-panel-head h2 {
    max-width: none !important;
    margin-top: 8px !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-size: clamp(32px, 3.4vw, 50px) !important;
    line-height: 1.1 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
}

body.admin-profile-page .admin-profile-card > p {
    width: auto !important;
    margin: 22px 34px 0 !important;
    padding: 13px 16px !important;
    border-radius: 14px !important;
    background: #eef9f1 !important;
    color: #0f5132 !important;
    -webkit-text-fill-color: #0f5132 !important;
    border: 1px solid rgba(15,81,50,0.16) !important;
    font-weight: 900 !important;
}

body.admin-profile-page .admin-profile-card .admin-form {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    margin: 0 !important;
    padding: 30px 34px 36px !important;
    background: #ffffff !important;
    border: 0 !important;
}

body.admin-profile-page .admin-locked-input {
    position: relative !important;
    min-width: 0 !important;
}

body.admin-profile-page .admin-locked-input input {
    width: 100% !important;
    padding-right: 84px !important;
    background: #f7f7f7 !important;
    color: #444444 !important;
    -webkit-text-fill-color: #444444 !important;
    cursor: not-allowed !important;
}

body.admin-profile-page .admin-locked-input span {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: 0.6px !important;
}

body.admin-profile-page .admin-role-lock {
    background: #fff8df !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: 1px solid #d9c47c !important;
    box-shadow: none !important;
}

body.admin-profile-page .admin-role-lock span {
    color: #8a5f1c !important;
    -webkit-text-fill-color: #8a5f1c !important;
}

body.admin-profile-page .admin-role-lock strong {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

body.admin-profile-page .admin-password-field {
    position: relative !important;
    min-width: 0 !important;
}

body.admin-profile-page .admin-password-field input {
    width: 100% !important;
    padding-right: 86px !important;
}

body.admin-profile-page .admin-toggle-password {
    position: absolute !important;
    right: 9px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 64px !important;
    min-width: 64px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: #fff8df !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: 1px solid #d9c47c !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    line-height: 1 !important;
    z-index: 5 !important;
}

body.admin-profile-page .admin-profile-card .admin-form > button[name="update_profile"] {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: min(320px, 100%) !important;
    min-height: 54px !important;
    margin-top: 6px !important;
    border-radius: 999px !important;
    background: #caa53a !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: 1px solid #caa53a !important;
    box-shadow: 6px 6px 0 rgba(17,17,17,0.16) !important;
}

@media (max-width: 760px) {
    body.admin-profile-page .admin-profile-card .admin-form {
        grid-template-columns: 1fr !important;
        padding: 24px !important;
    }

    body.admin-profile-page .admin-profile-card .admin-panel-head {
        padding: 24px !important;
    }
}

/* =========================================================
   REQUEST PATCH: sharper profile form, product row cards,
   staff password button alignment, and staff log icons
   ========================================================= */
body.admin-page .admin-field-shell {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    display: block !important;
}

body.admin-page .admin-field-shell input {
    width: 100% !important;
    box-sizing: border-box !important;
    padding-left: 52px !important;
}

body.admin-page .admin-field-icon {
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 6 !important;
    width: 24px !important;
    height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    background: #111111 !important;
    color: #caa53a !important;
    -webkit-text-fill-color: #caa53a !important;
    font-size: 12px !important;
    line-height: 1 !important;
}

body.admin-profile-page .admin-profile-card {
    width: min(1120px, calc(100% - 56px)) !important;
    border-radius: 26px !important;
    border: 1px solid rgba(17,17,17,0.18) !important;
    background: #f4f4f2 !important;
    box-shadow: 14px 14px 0 rgba(17,17,17,0.12), 0 24px 54px rgba(17,17,17,0.12) !important;
}

body.admin-profile-page .admin-profile-card .admin-panel-head {
    padding: 30px 36px !important;
    border-left: 0 !important;
    border-bottom: 5px solid #caa53a !important;
    border-radius: 26px 26px 0 0 !important;
    background:
        linear-gradient(135deg, rgba(202,165,58,0.16) 0%, transparent 38%),
        #111111 !important;
}

body.admin-profile-page .admin-profile-card .admin-panel-head span {
    color: #caa53a !important;
    -webkit-text-fill-color: #caa53a !important;
}

body.admin-profile-page .admin-profile-card .admin-panel-head h2 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: clamp(34px, 4vw, 58px) !important;
    letter-spacing: -1.5px !important;
}

body.admin-profile-page .admin-profile-access-band {
    margin: 24px 34px 0 !important;
    min-height: 76px !important;
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 16px 18px !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    border: 1px solid rgba(17,17,17,0.12) !important;
    box-shadow: inset 6px 0 0 #caa53a !important;
}

body.admin-profile-page .admin-profile-access-icon {
    width: 44px !important;
    height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 14px !important;
    background: #111111 !important;
    color: #caa53a !important;
    -webkit-text-fill-color: #caa53a !important;
    font-size: 16px !important;
}

body.admin-profile-page .admin-profile-access-band small {
    display: block !important;
    margin-bottom: 4px !important;
    color: #8a5f1c !important;
    -webkit-text-fill-color: #8a5f1c !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: 2px !important;
}

body.admin-profile-page .admin-profile-access-band strong {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-size: 22px !important;
    font-weight: 950 !important;
}

body.admin-profile-page .admin-profile-form-v2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    padding: 26px 34px 38px !important;
    background: #f4f4f2 !important;
}

body.admin-profile-page .admin-profile-form-v2 input,
body.admin-users-page .staff-password-field input {
    min-height: 62px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(17,17,17,0.16) !important;
    background: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    box-shadow: 0 10px 22px rgba(17,17,17,0.05) !important;
}

body.admin-profile-page .admin-profile-locked-name input {
    background: #ededeb !important;
    padding-right: 104px !important;
}

body.admin-profile-page .admin-lock-chip,
body.admin-profile-page .admin-locked-input span.admin-lock-chip {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    min-height: 34px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: 0.8px !important;
    z-index: 7 !important;
}

body.admin-profile-page .admin-profile-role-card,
body.admin-users-page .staff-role-lock {
    min-height: 62px !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    border: 1px solid rgba(202,165,58,0.55) !important;
    box-shadow: inset 6px 0 0 #caa53a, 0 10px 22px rgba(17,17,17,0.05) !important;
}

body.admin-profile-page .admin-profile-role-card span,
body.admin-users-page .staff-role-lock span {
    color: #8a5f1c !important;
    -webkit-text-fill-color: #8a5f1c !important;
}

body.admin-profile-page .admin-profile-role-card strong,
body.admin-users-page .staff-role-lock strong {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

body.admin-profile-page .admin-password-field,
body.admin-users-page .staff-password-field {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
}

body.admin-profile-page .admin-password-field input,
body.admin-users-page .staff-password-field input {
    width: 100% !important;
    box-sizing: border-box !important;
    padding-right: 92px !important;
}

body.admin-profile-page .admin-toggle-password,
body.admin-users-page .staff-password-field .admin-toggle-password {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 64px !important;
    min-width: 64px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 !important;
    border-radius: 11px !important;
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid #111111 !important;
    box-shadow: none !important;
    font-size: 12px !important;
    line-height: 36px !important;
    z-index: 8 !important;
}

body.admin-profile-page .admin-profile-card .admin-form > button[name="update_profile"] {
    min-height: 58px !important;
    width: min(360px, 100%) !important;
    border-radius: 16px !important;
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border-color: #111111 !important;
    box-shadow: 6px 6px 0 rgba(202,165,58,0.34) !important;
}

body.admin-users-page .admin-people-form .admin-form > .staff-password-field {
    grid-column: 1 / 2 !important;
}

body.admin-users-page .admin-people-form .admin-form > .staff-password-field input {
    display: block !important;
    width: 100% !important;
}

body.admin-users-page .admin-people-form .admin-form > .staff-role-lock {
    grid-column: 2 / 3 !important;
}

body.admin-products-page .admin-table-wrap {
    background: transparent !important;
    border: 0 !important;
    overflow-x: auto !important;
}

body.admin-products-page .admin-products-table {
    min-width: 1240px !important;
    border-collapse: separate !important;
    border-spacing: 0 16px !important;
    background: transparent !important;
}

body.admin-products-page .admin-products-table .admin-table-heading th {
    background: #111111 !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.admin-products-page .admin-product-row td {
    background: #ffffff !important;
    border-top: 1px solid rgba(17,17,17,0.10) !important;
    border-bottom: 1px solid rgba(17,17,17,0.10) !important;
    box-shadow: 0 12px 28px rgba(17,17,17,0.07) !important;
}

body.admin-products-page .admin-product-row td:first-child {
    border-left: 1px solid rgba(17,17,17,0.10) !important;
    border-radius: 20px 0 0 20px !important;
    box-shadow: inset 6px 0 0 #caa53a, 0 12px 28px rgba(17,17,17,0.07) !important;
}

body.admin-products-page .admin-product-row td:last-child {
    border-right: 1px solid rgba(17,17,17,0.10) !important;
    border-radius: 0 20px 20px 0 !important;
}

body.admin-products-page .admin-product-row:hover td {
    background: #fffdf7 !important;
    transform: translateY(-1px) !important;
}

body.admin-products-page .admin-product-id-pill,
body.admin-products-page .admin-audience-pill,
body.admin-products-page .admin-price-pill,
body.admin-products-page .admin-rating-pill,
body.admin-products-page .admin-product-badge,
body.admin-products-page .admin-stock-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    white-space: nowrap !important;
}

body.admin-products-page .admin-product-id-pill,
body.admin-products-page .admin-audience-pill,
body.admin-products-page .admin-rating-pill {
    background: #f4f4f2 !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: 1px solid rgba(17,17,17,0.12) !important;
}

body.admin-products-page .admin-price-pill,
body.admin-products-page .admin-product-badge {
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

body.admin-products-page .admin-stock-pill {
    background: #eef9f1 !important;
    color: #0f5132 !important;
    -webkit-text-fill-color: #0f5132 !important;
    border: 1px solid rgba(15,81,50,0.16) !important;
}

body.admin-products-page .admin-stock-empty {
    background: #fff1f1 !important;
    color: #9f1d1d !important;
    -webkit-text-fill-color: #9f1d1d !important;
    border-color: rgba(159,29,29,0.18) !important;
}

body.admin-products-page .admin-product-name-card strong {
    display: block !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    line-height: 1.25 !important;
}

body.admin-products-page .admin-product-name-card span {
    display: block !important;
    margin-top: 4px !important;
    color: #7a7a7a !important;
    -webkit-text-fill-color: #7a7a7a !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: 0.7px !important;
    text-transform: uppercase !important;
}

body.admin-staff-logs-page .admin-staff-log-hero {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 390px) !important;
    align-items: center !important;
}

body.admin-staff-logs-page .staff-log-icon-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

body.admin-staff-logs-page .staff-log-icon-grid div {
    min-height: 116px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,0.10) !important;
    border: 1px solid rgba(202,165,58,0.35) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05) !important;
}

body.admin-staff-logs-page .staff-log-icon-grid span {
    width: 42px !important;
    height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 14px !important;
    background: #caa53a !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-size: 20px !important;
}

body.admin-staff-logs-page .staff-log-icon-grid strong {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: 1.4px !important;
    text-transform: uppercase !important;
}

body.admin-staff-logs-page .staff-head-icon {
    display: inline-flex !important;
    width: 24px !important;
    height: 24px !important;
    margin-right: 6px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    background: #caa53a !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-size: 12px !important;
}

body.admin-staff-logs-page .staff-action-chip {
    gap: 8px !important;
    border-radius: 999px !important;
}

body.admin-staff-logs-page .staff-action-chip span {
    width: 22px !important;
    height: 22px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    background: #111111 !important;
    color: #caa53a !important;
    -webkit-text-fill-color: #caa53a !important;
    font-size: 12px !important;
}

@media (max-width: 900px) {
    body.admin-profile-page .admin-profile-form-v2,
    body.admin-users-page .admin-people-form .admin-form {
        grid-template-columns: 1fr !important;
    }

    body.admin-users-page .admin-people-form .admin-form > .staff-password-field,
    body.admin-users-page .admin-people-form .admin-form > .staff-role-lock {
        grid-column: 1 / -1 !important;
    }

    body.admin-staff-logs-page .admin-staff-log-hero {
        grid-template-columns: 1fr !important;
    }

    body.admin-staff-logs-page .staff-log-icon-grid {
        grid-template-columns: 1fr !important;
    }
}

/* =========================================================
   FINAL PATCH: simplified profile + no emoji staff log icons
   Replace image files here when ready:
   ../assets/images/profile-placeholder.svg
   ../assets/images/staff-log-placeholder.svg
========================================================= */
body.admin-profile-page .admin-profile-clean-hero {
    width: min(1180px, calc(100% - 56px)) !important;
    margin: 34px auto 28px !important;
    padding: clamp(30px, 4vw, 48px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1.15fr) minmax(260px, 390px) !important;
    align-items: center !important;
    gap: 30px !important;
    border-radius: 30px !important;
    border: 1px solid rgba(202,165,58,0.26) !important;
    background: linear-gradient(135deg, #111111 0%, #171717 52%, #2b2412 100%) !important;
    box-shadow: 18px 18px 0 rgba(202,165,58,0.12), 0 24px 60px rgba(0,0,0,0.16) !important;
    overflow: hidden !important;
}

body.admin-profile-page .admin-profile-clean-hero .admin-hero-copy {
    position: relative !important;
    z-index: 2 !important;
}

body.admin-profile-page .admin-profile-clean-hero .admin-kicker,
body.admin-profile-page .admin-profile-clean-hero p {
    color: rgba(255,255,255,0.78) !important;
    -webkit-text-fill-color: rgba(255,255,255,0.78) !important;
}

body.admin-profile-page .admin-profile-clean-hero .admin-kicker {
    color: #caa53a !important;
    -webkit-text-fill-color: #caa53a !important;
}

body.admin-profile-page .admin-profile-clean-hero h1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: clamp(44px, 5vw, 76px) !important;
    line-height: 0.95 !important;
    letter-spacing: -2px !important;
}

body.admin-profile-page .admin-profile-placeholder-link,
body.admin-staff-logs-page .staff-log-placeholder-card {
    display: block !important;
    position: relative !important;
    min-height: 255px !important;
    border-radius: 24px !important;
    overflow: hidden !important;
    border: 1px dashed rgba(202,165,58,0.74) !important;
    background: #111111 !important;
    text-decoration: none !important;
    box-shadow: none !important;
}

body.admin-profile-page .admin-profile-placeholder-link img,
body.admin-staff-logs-page .staff-log-placeholder-card img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 255px !important;
    object-fit: cover !important;
    border: 0 !important;
}

body.admin-profile-page .admin-profile-placeholder-link span,
body.admin-staff-logs-page .staff-log-placeholder-card span {
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    bottom: 14px !important;
    display: block !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,0.94) !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 0.3px !important;
    text-align: center !important;
}

body.admin-profile-page .admin-profile-card-clean {
    width: min(1080px, calc(100% - 56px)) !important;
    margin: 0 auto 52px !important;
    display: block !important;
    padding: 0 !important;
    border-radius: 28px !important;
    background: #ffffff !important;
    border: 1px solid rgba(17,17,17,0.12) !important;
    box-shadow: 0 24px 60px rgba(17,17,17,0.08) !important;
    overflow: hidden !important;
}

body.admin-profile-page .admin-profile-card-clean .admin-panel-head {
    min-height: 0 !important;
    padding: 26px 34px !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(17,17,17,0.10) !important;
    border-left: 8px solid #caa53a !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    display: block !important;
}

body.admin-profile-page .admin-profile-card-clean .admin-panel-head span {
    color: #8a5f1c !important;
    -webkit-text-fill-color: #8a5f1c !important;
    font-size: 12px !important;
    letter-spacing: 4px !important;
}

body.admin-profile-page .admin-profile-card-clean .admin-panel-head h2 {
    margin: 8px 0 0 !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-size: clamp(30px, 3vw, 44px) !important;
    line-height: 1.06 !important;
}

body.admin-profile-page .admin-form-message {
    margin: 22px 34px 0 !important;
    padding: 13px 16px !important;
    border-radius: 14px !important;
    background: #eef9f1 !important;
    color: #0f5132 !important;
    -webkit-text-fill-color: #0f5132 !important;
    border: 1px solid rgba(15,81,50,0.16) !important;
    font-weight: 900 !important;
}

body.admin-profile-page .admin-profile-form-v3 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 20px !important;
    margin: 0 !important;
    padding: 30px 34px 38px !important;
    background: #ffffff !important;
    border: 0 !important;
}

body.admin-profile-page .admin-field-block {
    min-width: 0 !important;
}

body.admin-profile-page .admin-field-block label {
    display: block !important;
    margin: 0 0 8px !important;
    color: #8a5f1c !important;
    -webkit-text-fill-color: #8a5f1c !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
}

body.admin-profile-page .admin-field-block small {
    display: block !important;
    margin-top: 8px !important;
    color: #747474 !important;
    -webkit-text-fill-color: #747474 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
}

body.admin-profile-page .admin-field-shell,
body.admin-users-page .staff-password-field {
    position: relative !important;
    min-height: 62px !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    border-radius: 16px !important;
    background: #ffffff !important;
    border: 1px solid rgba(17,17,17,0.14) !important;
    box-shadow: 0 10px 22px rgba(17,17,17,0.05) !important;
    overflow: hidden !important;
}

body.admin-page .admin-field-icon {
    position: static !important;
    flex: 0 0 58px !important;
    width: 58px !important;
    height: 100% !important;
    min-height: 62px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0 !important;
    background: #111111 !important;
    color: #caa53a !important;
    -webkit-text-fill-color: #caa53a !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    letter-spacing: 0.4px !important;
}

body.admin-profile-page .admin-profile-form-v3 input,
body.admin-users-page .staff-password-field input {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 62px !important;
    min-height: 62px !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    box-shadow: none !important;
    font-size: 15px !important;
    font-weight: 850 !important;
}

body.admin-profile-page .admin-profile-form-v3 input::placeholder,
body.admin-users-page .staff-password-field input::placeholder {
    color: #646464 !important;
    -webkit-text-fill-color: #646464 !important;
}

body.admin-profile-page .admin-locked-input input {
    background: #f7f7f7 !important;
    cursor: not-allowed !important;
    padding-right: 94px !important;
}

body.admin-profile-page .admin-lock-chip,
body.admin-profile-page .admin-locked-input span.admin-lock-chip {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: auto !important;
    min-width: 70px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: 0.6px !important;
    z-index: 8 !important;
}

body.admin-profile-page .admin-password-field input,
body.admin-users-page .staff-password-field input {
    padding-right: 94px !important;
}

body.admin-profile-page .admin-toggle-password,
body.admin-users-page .staff-password-field .admin-toggle-password {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 64px !important;
    min-width: 64px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    border: 1px solid #111111 !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    line-height: 36px !important;
    z-index: 9 !important;
}

body.admin-profile-page .admin-profile-form-v3 > button[name="update_profile"] {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: min(340px, 100%) !important;
    min-height: 58px !important;
    margin-top: 8px !important;
    border-radius: 16px !important;
    background: #111111 !important;
    border: 1px solid #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 6px 6px 0 rgba(202,165,58,0.32) !important;
}

body.admin-profile-page .admin-profile-access-band,
body.admin-profile-page .admin-profile-role-card {
    display: none !important;
}

body.admin-users-page .admin-people-form .admin-form > .staff-password-field {
    grid-column: 1 / 2 !important;
}

body.admin-staff-logs-page .admin-staff-log-hero {
    width: min(1180px, calc(100% - 56px)) !important;
    margin: 34px auto 28px !important;
    padding: clamp(28px, 4vw, 44px) !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(270px, 390px) !important;
    align-items: center !important;
    gap: 28px !important;
}

body.admin-staff-logs-page .staff-log-icon-grid {
    display: none !important;
}

body.admin-staff-logs-page .staff-head-icon {
    display: inline-flex !important;
    width: auto !important;
    min-width: 42px !important;
    height: 24px !important;
    margin-right: 8px !important;
    padding: 0 8px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    background: #caa53a !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-size: 9px !important;
    font-weight: 950 !important;
    letter-spacing: 0.5px !important;
}

body.admin-staff-logs-page .staff-action-chip span {
    width: auto !important;
    min-width: 30px !important;
    height: 22px !important;
    padding: 0 7px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: #111111 !important;
    color: #caa53a !important;
    -webkit-text-fill-color: #caa53a !important;
    font-size: 9px !important;
    font-weight: 950 !important;
    letter-spacing: 0.4px !important;
}

@media (max-width: 900px) {
    body.admin-profile-page .admin-profile-clean-hero,
    body.admin-profile-page .admin-profile-form-v3,
    body.admin-staff-logs-page .admin-staff-log-hero {
        grid-template-columns: 1fr !important;
    }

    body.admin-profile-page .admin-profile-clean-hero,
    body.admin-profile-page .admin-profile-card-clean,
    body.admin-staff-logs-page .admin-staff-log-hero {
        width: min(100% - 28px, 1180px) !important;
    }
}

/* Latest override: image paths, product picture field, and add-staff box visibility */
body.admin-profile-page .admin-profile-placeholder-link,
body.admin-staff-logs-page .staff-log-placeholder-card,
body.admin-users-page .admin-users-visual.admin-media-link {
    overflow: hidden !important;
}

body.admin-profile-page .admin-profile-placeholder-link span,
body.admin-staff-logs-page .staff-log-placeholder-card span,
body.admin-users-page .admin-users-visual .admin-replace-path {
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    bottom: 14px !important;
    z-index: 10 !important;
    display: block !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,0.96) !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: 1px solid rgba(202,165,58,0.42) !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: 0.2px !important;
    line-height: 1.25 !important;
    text-align: center !important;
    white-space: normal !important;
}

body.admin-products-page .admin-product-image-field {
    grid-column: 1 / -1 !important;
}

body.admin-products-page .admin-product-image-field input {
    width: 100% !important;
}

body.admin-products-page .admin-product-image-field .form-hint,
body.admin-products-page .admin-product-image-path {
    display: block !important;
    margin-top: 7px !important;
    color: #6f6f6f !important;
    -webkit-text-fill-color: #6f6f6f !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    line-height: 1.35 !important;
    overflow-wrap: anywhere !important;
}

body.admin-users-page .admin-people-form .admin-form > .staff-password-field {
    grid-column: 1 / 2 !important;
}

body.admin-users-page .admin-people-form .admin-form > .staff-role-lock {
    grid-column: 2 / 3 !important;
    min-width: 0 !important;
    width: 100% !important;
    overflow: visible !important;
}

body.admin-users-page .staff-role-lock strong {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
}

body.admin-page .admin-field-shell {
    overflow: visible !important;
}

body.admin-page .admin-field-icon {
    align-self: stretch !important;
    height: auto !important;
}

@media (max-width: 980px) {
    body.admin-users-page .admin-people-form .admin-form > .staff-password-field,
    body.admin-users-page .admin-people-form .admin-form > .staff-role-lock {
        grid-column: 1 / -1 !important;
    }
}

/* Final requested cleanup: proper icon boxes + real product upload UI */
body.admin-page .admin-field-shell,
body.admin-profile-page .admin-field-shell,
body.admin-users-page .staff-password-field {
    min-height: 62px !important;
    height: 62px !important;
    display: flex !important;
    align-items: stretch !important;
    overflow: hidden !important;
    border-radius: 18px !important;
}

body.admin-page .admin-field-icon,
body.admin-profile-page .admin-field-icon,
body.admin-users-page .staff-password-field .admin-field-icon {
    flex: 0 0 72px !important;
    width: 72px !important;
    min-width: 72px !important;
    height: 62px !important;
    min-height: 62px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0 !important;
    background: #111111 !important;
    color: #d3ad39 !important;
    -webkit-text-fill-color: #d3ad39 !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: 0.8px !important;
    line-height: 1 !important;
}

body.admin-profile-page .admin-profile-form-v3 input,
body.admin-users-page .staff-password-field input {
    height: 62px !important;
    min-height: 62px !important;
    line-height: 62px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.admin-profile-page .admin-lock-chip,
body.admin-profile-page .admin-toggle-password,
body.admin-users-page .staff-password-field .admin-toggle-password {
    top: 50% !important;
    transform: translateY(-50%) !important;
}

body.admin-users-page .admin-people-form .admin-form {
    align-items: stretch !important;
    gap: 18px !important;
}

body.admin-users-page .admin-people-form .admin-form > input[type="text"],
body.admin-users-page .admin-people-form .admin-form > input[type="email"] {
    min-height: 62px !important;
    height: 62px !important;
    line-height: 62px !important;
    padding: 0 18px !important;
}

body.admin-users-page .admin-people-form .admin-form > .staff-password-field,
body.admin-users-page .admin-people-form .admin-form > .staff-role-lock {
    min-height: 62px !important;
    height: 62px !important;
    margin: 0 !important;
}

body.admin-users-page .staff-role-lock {
    align-items: center !important;
    border-radius: 18px !important;
    overflow: hidden !important;
}

body.admin-products-page .admin-product-image-uploader {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 150px minmax(0, 1fr) !important;
    gap: 18px !important;
    padding: 18px !important;
    border-radius: 22px !important;
    background: linear-gradient(135deg, #111111 0%, #181818 55%, #fff8df 55%, #fff8df 100%) !important;
    border: 1px solid rgba(211,173,57,0.55) !important;
    box-shadow: 8px 8px 0 rgba(211,173,57,0.16) !important;
}

body.admin-products-page .admin-upload-preview {
    min-height: 142px !important;
    aspect-ratio: 1 / 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 2px solid #d3ad39 !important;
}

body.admin-products-page .admin-upload-preview img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    padding: 10px !important;
}

body.admin-products-page .admin-upload-preview span {
    width: 68px !important;
    height: 68px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: #111111 !important;
    color: #d3ad39 !important;
    -webkit-text-fill-color: #d3ad39 !important;
    font-size: 16px !important;
    font-weight: 950 !important;
}

body.admin-products-page .admin-upload-control {
    min-width: 0 !important;
    display: grid !important;
    gap: 10px !important;
    align-content: center !important;
}

body.admin-products-page .admin-upload-control label {
    display: inline-flex !important;
    width: fit-content !important;
    min-height: 44px !important;
    padding: 0 18px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: #d3ad39 !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    letter-spacing: 0.8px !important;
    cursor: pointer !important;
}

body.admin-products-page .admin-upload-control input[type="file"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

body.admin-products-page .admin-upload-control input[type="text"] {
    width: 100% !important;
    min-height: 54px !important;
    padding: 0 16px !important;
    border-radius: 16px !important;
    background: #ffffff !important;
}

body.admin-products-page .admin-product-image-path {
    display: none !important;
}

body.admin-staff-logs-page .admin-icon-path-note {
    width: min(1180px, calc(100% - 56px)) !important;
    margin: -10px auto 22px !important;
    padding: 12px 16px !important;
    border-radius: 14px !important;
    background: #fff8df !important;
    border: 1px solid rgba(211,173,57,0.46) !important;
    color: #6b510f !important;
    -webkit-text-fill-color: #6b510f !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    line-height: 1.45 !important;
}

body.admin-staff-logs-page .staff-head-icon {
    width: 38px !important;
    min-width: 38px !important;
    height: 30px !important;
    padding: 0 !important;
    border-radius: 10px !important;
}

body.admin-staff-logs-page .staff-head-icon img {
    width: 18px !important;
    height: 18px !important;
    display: block !important;
    object-fit: contain !important;
}

body.admin-staff-logs-page .staff-action-chip span {
    width: 30px !important;
    min-width: 30px !important;
    height: 26px !important;
    padding: 0 !important;
}

body.admin-staff-logs-page .staff-action-chip span img {
    width: 16px !important;
    height: 16px !important;
    display: block !important;
    object-fit: contain !important;
}

@media (max-width: 760px) {
    body.admin-products-page .admin-product-image-uploader {
        grid-template-columns: 1fr !important;
    }

    body.admin-products-page .admin-upload-preview {
        width: min(180px, 100%) !important;
    }
}


/* =========================================================
   2026-05-23 final admin cleanup: profile, staff form, uploads and staff logs
   ========================================================= */
body.admin-page .admin-field-shell,
body.admin-profile-page .admin-field-shell,
body.admin-users-page .admin-staff-form-v2 .admin-field-shell,
body.admin-users-page .admin-staff-form-v2 .staff-password-field {
    position: relative !important;
    display: flex !important;
    align-items: stretch !important;
    min-height: 64px !important;
    height: 64px !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    border: 1px solid rgba(17,17,17,0.14) !important;
    box-shadow: 0 12px 26px rgba(17,17,17,0.06) !important;
}

body.admin-page .admin-field-icon,
body.admin-profile-page .admin-field-icon,
body.admin-users-page .admin-staff-form-v2 .admin-field-icon,
body.admin-users-page .staff-password-field .admin-field-icon {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    flex: 0 0 76px !important;
    width: 76px !important;
    min-width: 76px !important;
    height: 64px !important;
    min-height: 64px !important;
    align-self: stretch !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0 !important;
    background: #111111 !important;
    color: #d3ad39 !important;
    -webkit-text-fill-color: #d3ad39 !important;
    font-size: 10px !important;
    font-weight: 950 !important;
    letter-spacing: 1px !important;
    line-height: 1 !important;
    z-index: 2 !important;
}

body.admin-profile-page .admin-profile-form-v3 input,
body.admin-users-page .admin-staff-form-v2 .admin-field-shell input,
body.admin-users-page .admin-staff-form-v2 .staff-password-field input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 64px !important;
    min-height: 64px !important;
    padding: 0 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-size: 15px !important;
    font-weight: 850 !important;
    line-height: 64px !important;
}

body.admin-profile-page .admin-password-field input,
body.admin-users-page .admin-staff-form-v2 .staff-password-field input {
    padding-right: 98px !important;
}

body.admin-profile-page .admin-toggle-password,
body.admin-users-page .admin-staff-form-v2 .admin-toggle-password {
    position: absolute !important;
    top: 50% !important;
    right: 12px !important;
    left: auto !important;
    transform: translateY(-50%) !important;
    width: 66px !important;
    min-width: 66px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-height: 38px !important;
    padding: 0 !important;
    border-radius: 999px !important;
    background: #d3ad39 !important;
    border: 1px solid #d3ad39 !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    box-shadow: none !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    line-height: 38px !important;
    z-index: 8 !important;
}

body.admin-profile-page .admin-lock-chip {
    right: 12px !important;
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 999px !important;
}

body.admin-profile-page .admin-profile-card-clean,
body.admin-users-page .admin-staff-form-card {
    width: min(1180px, calc(100% - 56px)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border-radius: 30px !important;
    background: #ffffff !important;
    border: 1px solid rgba(17,17,17,0.12) !important;
    box-shadow: 0 28px 68px rgba(17,17,17,0.08) !important;
    overflow: hidden !important;
}

body.admin-profile-page .admin-profile-card-clean .admin-panel-head,
body.admin-users-page .admin-staff-form-card .admin-panel-head {
    display: flex !important;
    align-items: end !important;
    justify-content: space-between !important;
    gap: 20px !important;
    min-height: 116px !important;
    padding: 28px 32px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(135deg, #fffdf8 0%, #fff8df 100%) !important;
    box-shadow: inset 8px 0 0 #caa53a !important;
}

body.admin-profile-page .admin-profile-card-clean .admin-panel-head span,
body.admin-users-page .admin-staff-form-card .admin-panel-head span {
    color: #8a5f1c !important;
    -webkit-text-fill-color: #8a5f1c !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: 5px !important;
}

body.admin-profile-page .admin-profile-card-clean .admin-panel-head h2,
body.admin-users-page .admin-staff-form-card .admin-panel-head h2 {
    margin: 6px 0 0 !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-size: clamp(34px, 4.5vw, 58px) !important;
    line-height: 0.95 !important;
    letter-spacing: -1.5px !important;
}

body.admin-profile-page .admin-profile-form-v3,
body.admin-users-page .admin-staff-form-v2 {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 22px 26px !important;
    padding: 30px 32px 40px !important;
    margin: 0 !important;
    background: #ffffff !important;
    border: 0 !important;
}

body.admin-users-page .admin-staff-form-v2 .admin-field-block,
body.admin-profile-page .admin-profile-form-v3 .admin-field-block {
    min-width: 0 !important;
    display: block !important;
}

body.admin-users-page .admin-staff-form-v2 .admin-field-block label,
body.admin-profile-page .admin-profile-form-v3 .admin-field-block label {
    display: block !important;
    margin: 0 0 10px !important;
    color: #8a5f1c !important;
    -webkit-text-fill-color: #8a5f1c !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: 2.8px !important;
    text-transform: uppercase !important;
}

body.admin-users-page .admin-staff-form-v2 .staff-role-lock {
    min-height: 64px !important;
    height: 64px !important;
    align-self: end !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    margin: 0 !important;
    padding: 0 22px !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    border: 1px solid rgba(202,165,58,0.75) !important;
    box-shadow: inset 8px 0 0 #d3ad39, 0 12px 26px rgba(17,17,17,0.06) !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    overflow: hidden !important;
}

body.admin-users-page .admin-staff-form-v2 .staff-role-lock span {
    color: #8a5f1c !important;
    -webkit-text-fill-color: #8a5f1c !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: 2.2px !important;
}

body.admin-users-page .admin-staff-form-v2 .staff-role-lock strong {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-size: 15px !important;
    font-weight: 950 !important;
    text-align: right !important;
}

body.admin-profile-page .admin-profile-form-v3 > button[name="update_profile"],
body.admin-users-page .admin-staff-form-v2 > button {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: min(420px, 100%) !important;
    min-height: 58px !important;
    margin-top: 4px !important;
    border-radius: 18px !important;
    background: #111111 !important;
    border: 1px solid #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 8px 8px 0 rgba(202,165,58,0.28) !important;
    font-weight: 950 !important;
}

body.admin-profile-page .admin-form-message,
body.admin-users-page .admin-form-message {
    margin: 22px 32px 0 !important;
    padding: 12px 16px !important;
    border-radius: 14px !important;
    background: #fff8df !important;
    border: 1px solid rgba(202,165,58,0.35) !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-size: 13px !important;
    font-weight: 900 !important;
}

body.admin-profile-page .admin-profile-clean-hero .admin-profile-placeholder-link span,
body.admin-staff-logs-page .staff-log-placeholder-card span,
body.admin-users-page .admin-users-visual .admin-replace-path {
    display: none !important;
}

body.admin-profile-page .admin-profile-placeholder-link,
body.admin-staff-logs-page .staff-log-placeholder-card {
    border: 0 !important;
    background: #111111 !important;
}

body.admin-profile-page .admin-profile-placeholder-link img,
body.admin-staff-logs-page .staff-log-placeholder-card img {
    object-fit: cover !important;
    object-position: center !important;
}

body.admin-profile-page .admin-profile-upload-guide {
    width: min(1180px, calc(100% - 56px)) !important;
    margin: -22px auto 54px !important;
    display: grid !important;
    grid-template-columns: 170px minmax(0, 1fr) !important;
    gap: 24px !important;
    align-items: center !important;
    padding: 22px !important;
    border-radius: 28px !important;
    background: linear-gradient(135deg, #111111 0%, #181818 58%, #fff8df 58%, #fff8df 100%) !important;
    border: 1px solid rgba(202,165,58,0.35) !important;
    box-shadow: 12px 12px 0 rgba(202,165,58,0.16), 0 22px 50px rgba(17,17,17,0.08) !important;
}

body.admin-profile-page .admin-upload-guide-visual {
    height: 140px !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 2px solid #d3ad39 !important;
}

body.admin-profile-page .admin-upload-guide-visual img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

body.admin-profile-page .admin-upload-guide-copy span {
    display: block !important;
    margin-bottom: 8px !important;
    color: #8a5f1c !important;
    -webkit-text-fill-color: #8a5f1c !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: 3px !important;
}

body.admin-profile-page .admin-upload-guide-copy h3 {
    margin: 0 0 8px !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-size: clamp(22px, 3vw, 34px) !important;
    line-height: 1.05 !important;
}

body.admin-profile-page .admin-upload-guide-copy p {
    margin: 0 !important;
    color: #5f5f5f !important;
    -webkit-text-fill-color: #5f5f5f !important;
    font-size: 14px !important;
    font-weight: 750 !important;
    max-width: 680px !important;
}

body.admin-products-page .admin-product-image-uploader {
    grid-column: 1 / -1 !important;
    order: 20 !important;
    grid-template-columns: 175px minmax(0, 1fr) !important;
    padding: 22px !important;
    border-radius: 28px !important;
    background: linear-gradient(135deg, #111111 0%, #171717 52%, #fff8df 52%, #fff8df 100%) !important;
    border: 1px solid rgba(211,173,57,0.58) !important;
    box-shadow: 10px 10px 0 rgba(211,173,57,0.15), 0 18px 42px rgba(17,17,17,0.08) !important;
}

body.admin-products-page .admin-upload-preview {
    width: 150px !important;
    min-height: 150px !important;
    height: 150px !important;
    border-radius: 24px !important;
}

body.admin-products-page .admin-upload-control label {
    background: #111111 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 5px 5px 0 rgba(211,173,57,0.28) !important;
}

body.admin-staff-logs-page .admin-icon-path-note {
    display: none !important;
}

body.admin-staff-logs-page .staff-head-icon,
body.admin-staff-logs-page .staff-action-chip span {
    background: #d3ad39 !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
}

body.admin-staff-logs-page .staff-head-icon img,
body.admin-staff-logs-page .staff-action-chip span img {
    display: block !important;
    object-fit: contain !important;
}

@media (max-width: 900px) {
    body.admin-profile-page .admin-profile-form-v3,
    body.admin-users-page .admin-staff-form-v2,
    body.admin-profile-page .admin-profile-upload-guide,
    body.admin-products-page .admin-product-image-uploader {
        grid-template-columns: 1fr !important;
    }

    body.admin-profile-page .admin-profile-card-clean,
    body.admin-users-page .admin-staff-form-card,
    body.admin-profile-page .admin-profile-upload-guide {
        width: min(100% - 28px, 1180px) !important;
    }

    body.admin-products-page .admin-upload-preview {
        width: min(180px, 100%) !important;
    }
}


/* =========================================================
   2026-05-23 cleanup pass: remove profile lower image card, center product visual, improve product upload panel
   ========================================================= */
body.admin-profile-page .admin-profile-upload-guide {
    display: none !important;
}

body.admin-products-page .admin-products-hero {
    align-items: center !important;
}

body.admin-products-page .admin-products-visual {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #fff8df !important;
}

body.admin-products-page .admin-products-visual img {
    width: 100% !important;
    height: 100% !important;
    min-height: 360px !important;
    max-height: none !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
    padding: 0 !important;
    background: #fff8df !important;
}

body.admin-products-page .admin-product-image-uploader {
    grid-column: 1 / -1 !important;
    order: 20 !important;
    display: grid !important;
    grid-template-columns: 210px minmax(0, 1fr) !important;
    gap: 24px !important;
    align-items: center !important;
    padding: 24px !important;
    border-radius: 30px !important;
    background: linear-gradient(180deg, #fffdf4 0%, #fff8df 100%) !important;
    border: 1px solid rgba(211,173,57,0.65) !important;
    box-shadow: 10px 10px 0 rgba(211,173,57,0.14), 0 18px 42px rgba(17,17,17,0.08) !important;
}

body.admin-products-page .admin-upload-preview-wrap {
    display: grid !important;
    gap: 10px !important;
    justify-items: center !important;
    align-content: center !important;
}

body.admin-products-page .admin-upload-preview-wrap small {
    color: #6c5b25 !important;
    -webkit-text-fill-color: #6c5b25 !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .5px !important;
}

body.admin-products-page .admin-upload-preview {
    width: 190px !important;
    height: 190px !important;
    min-height: 190px !important;
    aspect-ratio: 1 / 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border-radius: 26px !important;
    background: #ffffff !important;
    border: 2px solid #d3ad39 !important;
    box-shadow: 7px 7px 0 rgba(17,17,17,0.1) !important;
}

body.admin-products-page .admin-upload-preview img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    display: block !important;
    object-fit: cover !important;
    object-position: center center !important;
    padding: 0 !important;
}

body.admin-products-page .admin-upload-control {
    min-width: 0 !important;
    display: grid !important;
    gap: 12px !important;
    align-content: center !important;
}

body.admin-products-page .admin-upload-control-head {
    display: grid !important;
    gap: 5px !important;
    margin-bottom: 2px !important;
}

body.admin-products-page .admin-upload-control-head span {
    color: #8a5f1c !important;
    -webkit-text-fill-color: #8a5f1c !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: 3px !important;
}

body.admin-products-page .admin-upload-control-head strong {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-size: clamp(20px, 2.1vw, 30px) !important;
    line-height: 1.05 !important;
    font-weight: 950 !important;
}

body.admin-products-page .admin-upload-control-head p {
    margin: 0 !important;
    color: #5f5f5f !important;
    -webkit-text-fill-color: #5f5f5f !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    font-weight: 750 !important;
}

body.admin-products-page .admin-upload-control label.admin-upload-file-button {
    display: inline-flex !important;
    width: fit-content !important;
    min-width: 220px !important;
    min-height: 50px !important;
    padding: 0 24px !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: #d3ad39 !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: 1px solid #b88d1f !important;
    box-shadow: 6px 6px 0 rgba(17,17,17,0.18) !important;
    font-size: 14px !important;
    font-weight: 950 !important;
    letter-spacing: .4px !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 2 !important;
}

body.admin-products-page .admin-upload-control label.admin-upload-file-button:hover {
    transform: translateY(-1px) !important;
}

body.admin-products-page .admin-upload-control input[type="file"] {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

body.admin-products-page .admin-upload-control input[type="text"] {
    width: 100% !important;
    min-height: 58px !important;
    padding: 0 18px !important;
    border-radius: 18px !important;
    background: #ffffff !important;
    border: 1px solid rgba(17,17,17,0.14) !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    box-shadow: inset 0 0 0 1px rgba(211,173,57,0.12) !important;
}

body.admin-products-page .admin-upload-control .form-hint {
    color: #656565 !important;
    -webkit-text-fill-color: #656565 !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
    font-weight: 750 !important;
}

body.admin-products-page .admin-form > button {
    grid-column: 1 / -1 !important;
    justify-self: center !important;
    width: min(420px, 100%) !important;
    min-height: 56px !important;
    border-radius: 999px !important;
    background: #d3ad39 !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    box-shadow: 7px 7px 0 rgba(17,17,17,0.15) !important;
    font-weight: 950 !important;
}

body.admin-products-page .admin-product-thumb {
    padding: 0 !important;
}

body.admin-products-page .admin-product-thumb img {
    object-fit: cover !important;
    object-position: center center !important;
    padding: 0 !important;
}

@media (max-width: 900px) {
    body.admin-products-page .admin-product-image-uploader {
        grid-template-columns: 1fr !important;
    }

    body.admin-products-page .admin-upload-preview {
        width: min(220px, 100%) !important;
        height: auto !important;
    }

    body.admin-products-page .admin-upload-control label.admin-upload-file-button {
        width: 100% !important;
    }
}

/* 2026-05-24: admin product submit polish + varied product card colors */
body.admin-products-page .admin-form > button.admin-product-submit-button {
    order: 30 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    width: min(460px, 100%) !important;
    min-height: 62px !important;
    margin-top: 4px !important;
    border: 0 !important;
    border-radius: 18px !important;
    background:
        linear-gradient(135deg, #111111 0%, #2a2515 52%, #d3ad39 100%) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    box-shadow: 8px 8px 0 rgba(17,17,17,0.16), 0 20px 34px rgba(17,17,17,0.14) !important;
    letter-spacing: .3px !important;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease !important;
}

body.admin-products-page .admin-form > button.admin-product-submit-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 10px 10px 0 rgba(17,17,17,0.18), 0 26px 42px rgba(17,17,17,0.18) !important;
}

body.admin-products-page .admin-form > button.admin-product-submit-button.has-uploaded-image {
    background:
        linear-gradient(135deg, #0f5132 0%, #168052 48%, #d3ad39 100%) !important;
}

body.admin-products-page .admin-submit-icon {
    width: 42px !important;
    height: 42px !important;
    display: inline-grid !important;
    place-items: center !important;
    flex: 0 0 42px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,0.16) !important;
    border: 1px solid rgba(255,255,255,0.22) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: 1px !important;
}

body.admin-products-page .admin-product-row-men td {
    background: #fffdf7 !important;
}

body.admin-products-page .admin-product-row-women td {
    background: #fff6fb !important;
}

body.admin-products-page .admin-product-row-kids td {
    background: #f3fbff !important;
}

body.admin-products-page .admin-product-row-men td:first-child {
    box-shadow: inset 6px 0 0 #caa53a, 0 12px 28px rgba(17,17,17,0.07) !important;
}

body.admin-products-page .admin-product-row-women td:first-child {
    box-shadow: inset 6px 0 0 #d85d93, 0 12px 28px rgba(17,17,17,0.07) !important;
}

body.admin-products-page .admin-product-row-kids td:first-child {
    box-shadow: inset 6px 0 0 #2f9ec8, 0 12px 28px rgba(17,17,17,0.07) !important;
}

body.admin-products-page .admin-product-row-women .admin-product-thumb {
    background: #fff0f7 !important;
    border-color: #efb3ce !important;
}

body.admin-products-page .admin-product-row-kids .admin-product-thumb {
    background: #eefaff !important;
    border-color: #a8dff3 !important;
}

body.admin-products-page .admin-product-row:hover td {
    filter: saturate(1.08) !important;
}

body.index-fashion-home .products > .product-card {
    border-radius: 22px !important;
    border-color: rgba(17,17,17,0.12) !important;
    box-shadow: 0 18px 36px rgba(17,17,17,0.08) !important;
}

body.index-fashion-home .products > .product-card:nth-child(6n+1) {
    background: linear-gradient(180deg, #ffffff 0%, #fff8df 100%) !important;
}

body.index-fashion-home .products > .product-card:nth-child(6n+2) {
    background: linear-gradient(180deg, #ffffff 0%, #f1f8ff 100%) !important;
}

body.index-fashion-home .products > .product-card:nth-child(6n+3) {
    background: linear-gradient(180deg, #ffffff 0%, #fff2f8 100%) !important;
}

body.index-fashion-home .products > .product-card:nth-child(6n+4) {
    background: linear-gradient(180deg, #ffffff 0%, #f2fff8 100%) !important;
}

body.index-fashion-home .products > .product-card:nth-child(6n+5) {
    background: linear-gradient(180deg, #ffffff 0%, #f8f4ff 100%) !important;
}

body.index-fashion-home .products > .product-card:nth-child(6n) {
    background: linear-gradient(180deg, #ffffff 0%, #fff5ed 100%) !important;
}

body.index-fashion-home .products > .product-card .product-img {
    background: rgba(255,255,255,0.72) !important;
    border-bottom: 1px solid rgba(17,17,17,0.08) !important;
}

body.index-fashion-home .products > .product-card:hover {
    transform: translateY(-7px) !important;
    box-shadow: 0 24px 54px rgba(17,17,17,0.15) !important;
}

/* 2026-05-24: checkout delivery address UI */
body.cx-checkout-body .cx-delivery-card {
    margin: 22px 0 !important;
    padding: 20px !important;
    border-radius: 24px !important;
    background:
        linear-gradient(180deg, #ffffff 0%, #fffaf0 100%) !important;
    border: 1px solid #e3d2a4 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 12px 28px rgba(17,17,17,0.06) !important;
}

body.cx-checkout-body .cx-delivery-head {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr) !important;
    gap: 12px !important;
    align-items: center !important;
    margin-bottom: 16px !important;
}

body.cx-checkout-body .cx-delivery-head h3 {
    margin: 2px 0 0 !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-size: 22px !important;
    line-height: 1.1 !important;
    font-weight: 950 !important;
}

body.cx-checkout-body .cx-delivery-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

body.cx-checkout-body .cx-delivery-grid label {
    display: grid !important;
    gap: 7px !important;
    min-width: 0 !important;
}

body.cx-checkout-body .cx-delivery-grid label span {
    color: #5c5c5c !important;
    -webkit-text-fill-color: #5c5c5c !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: 1.4px !important;
    text-transform: uppercase !important;
}

body.cx-checkout-body .cx-delivery-grid input,
body.cx-checkout-body .cx-delivery-grid textarea {
    width: 100% !important;
    min-height: 48px !important;
    padding: 12px 14px !important;
    border-radius: 15px !important;
    background: #ffffff !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: 1px solid #dddddd !important;
    outline: none !important;
    font: inherit !important;
    font-weight: 800 !important;
    resize: vertical !important;
}

body.cx-checkout-body .cx-delivery-grid input:focus,
body.cx-checkout-body .cx-delivery-grid textarea:focus {
    border-color: #caa53a !important;
    box-shadow: 0 0 0 4px rgba(202,165,58,0.16) !important;
}

body.cx-checkout-body .cx-delivery-wide {
    grid-column: 1 / -1 !important;
}

body.cx-orders-body .cx-order-address-detail {
    grid-column: 1 / -1 !important;
}

body.cx-orders-body .cx-order-address-detail strong,
body.cx-order-success-body .cx-delivery-summary strong {
    font-size: 15px !important;
    line-height: 1.35 !important;
}

body.staff-orders-page .staff-customer-delivery {
    display: grid !important;
    gap: 5px !important;
    min-width: 230px !important;
}

body.staff-orders-page .staff-customer-delivery strong {
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-size: 14px !important;
    font-weight: 950 !important;
}

body.staff-orders-page .staff-customer-delivery span,
body.staff-orders-page .staff-customer-delivery small {
    color: #5e5e5e !important;
    -webkit-text-fill-color: #5e5e5e !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    font-weight: 750 !important;
}

@media (max-width: 720px) {
    body.cx-checkout-body .cx-delivery-grid {
        grid-template-columns: 1fr !important;
    }
}

/* 2026-05-24: readable order confirmation summary card */
body.cx-order-success-body .cx-order-details {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 22px !important;
    background: #ffffff !important;
    border: 1px solid #ded7c7 !important;
    box-shadow: 0 16px 34px rgba(17,17,17,0.07) !important;
}

body.cx-order-success-body .cx-order-details div {
    min-height: 0 !important;
    padding: 16px 18px !important;
    border: 0 !important;
    border-bottom: 1px solid #eee6d6 !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    display: grid !important;
    grid-template-columns: minmax(96px, .55fr) minmax(0, 1fr) !important;
    gap: 14px !important;
    align-items: start !important;
}

body.cx-order-success-body .cx-order-details div:nth-child(even) {
    background: #fffbf2 !important;
}

body.cx-order-success-body .cx-order-details div span {
    color: #6f614c !important;
    -webkit-text-fill-color: #6f614c !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
    font-weight: 950 !important;
    letter-spacing: 1.4px !important;
}

body.cx-order-success-body .cx-order-details div strong {
    max-width: 100% !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    font-size: 17px !important;
    line-height: 1.3 !important;
    font-weight: 850 !important;
    letter-spacing: 0 !important;
    text-align: right !important;
    word-break: normal !important;
    overflow-wrap: anywhere !important;
}

body.cx-order-success-body .cx-order-details div:first-child strong {
    font-size: 24px !important;
    font-weight: 950 !important;
}

body.cx-order-success-body .cx-order-details .cx-delivery-summary {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
}

body.cx-order-success-body .cx-order-details .cx-delivery-summary strong {
    text-align: left !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
    font-weight: 800 !important;
}

body.cx-order-success-body .cx-proof-under-tracking {
    width: 100% !important;
    min-height: 54px !important;
    margin: 16px 0 0 !important;
    border-radius: 16px !important;
    font-size: 13px !important;
    letter-spacing: 1.2px !important;
}

body.cx-orders-body .cx-order-details {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
}

body.cx-orders-body .cx-order-details div {
    min-height: 0 !important;
    padding: 14px 16px !important;
    border-radius: 14px !important;
    display: grid !important;
    grid-template-columns: minmax(90px, .55fr) minmax(0, 1fr) !important;
    gap: 10px !important;
    align-items: start !important;
}

body.cx-orders-body .cx-order-details strong {
    max-width: 100% !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
    text-align: right !important;
    overflow-wrap: anywhere !important;
}

body.cx-orders-body .cx-order-address-detail {
    grid-template-columns: 1fr !important;
}

body.cx-orders-body .cx-order-address-detail strong {
    text-align: left !important;
    font-size: 14px !important;
}

@media (max-width: 520px) {
    body.cx-order-success-body .cx-order-details div,
    body.cx-orders-body .cx-order-details div {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    body.cx-order-success-body .cx-order-details div strong,
    body.cx-orders-body .cx-order-details strong {
        text-align: left !important;
    }
}

/* 2026-05-24: final order success hero and centered proof button */
body.cx-order-success-body .cx-order-success-page {
    background:
        radial-gradient(circle at 9% 8%, rgba(202,165,58,0.18), transparent 28%),
        linear-gradient(180deg, #fffdf8 0%, #f7f2e8 100%) !important;
}

body.cx-order-success-body .cx-success-hero {
    position: relative !important;
    min-height: 470px !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .72fr) !important;
    gap: clamp(18px, 3vw, 38px) !important;
    align-items: stretch !important;
    overflow: hidden !important;
    border: 1px solid #ded7c7 !important;
    border-radius: 34px !important;
    background:
        linear-gradient(90deg, rgba(17,17,17,0.78) 0%, rgba(17,17,17,0.48) 44%, rgba(255,255,255,0.10) 70%),
        linear-gradient(135deg, #151515 0%, #3a3325 45%, #f2e4c3 100%) !important;
    box-shadow: 0 30px 70px rgba(17,17,17,0.16) !important;
}

body.cx-order-success-body .cx-success-hero::before {
    content: "" !important;
    position: absolute !important;
    inset: 24px !important;
    border: 1px solid rgba(255,255,255,0.16) !important;
    border-radius: 26px !important;
    pointer-events: none !important;
}

body.cx-order-success-body .cx-success-hero .cx-hero-copy {
    position: relative !important;
    z-index: 2 !important;
    max-width: 760px !important;
    padding: clamp(34px, 5vw, 70px) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.cx-order-success-body .cx-success-hero .cx-kicker {
    width: fit-content !important;
    margin-bottom: 18px !important;
    padding: 9px 13px !important;
    border-radius: 999px !important;
    background: rgba(202,165,58,0.18) !important;
    color: #f4dfae !important;
    -webkit-text-fill-color: #f4dfae !important;
    border: 1px solid rgba(244,223,174,0.28) !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: 3px !important;
}

body.cx-order-success-body .cx-success-hero h1 {
    max-width: 720px !important;
    margin: 0 !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 8px 24px rgba(0,0,0,0.32) !important;
    font-size: clamp(42px, 6.2vw, 86px) !important;
    line-height: 0.98 !important;
    letter-spacing: 0 !important;
}

body.cx-order-success-body .cx-success-hero p:not(.cx-kicker) {
    max-width: 620px !important;
    margin-top: 20px !important;
    color: rgba(255,255,255,0.86) !important;
    -webkit-text-fill-color: rgba(255,255,255,0.86) !important;
    text-shadow: none !important;
    font-size: 18px !important;
    line-height: 1.65 !important;
    font-weight: 650 !important;
}

body.cx-order-success-body .cx-success-hero .cx-checkout-hero-meta span {
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(255,255,255,0.94) !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border: 1px solid rgba(255,255,255,0.42) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,0.12) !important;
}

body.cx-order-success-body .cx-success-actions {
    margin-top: 28px !important;
    display: flex !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}

body.cx-order-success-body .cx-success-actions .cx-btn {
    min-width: 190px !important;
    min-height: 52px !important;
    border-radius: 999px !important;
}

body.cx-order-success-body .cx-success-actions .cx-btn-light {
    background: rgba(255,255,255,0.96) !important;
    color: #111111 !important;
    -webkit-text-fill-color: #111111 !important;
    border-color: rgba(255,255,255,0.78) !important;
}

body.cx-order-success-body .cx-success-visual {
    position: relative !important;
    z-index: 2 !important;
    margin: clamp(22px, 3vw, 34px) !important;
    min-height: 360px !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    border-radius: 30px !important;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,248,223,0.82)) !important;
    border: 1px solid rgba(255,255,255,0.72) !important;
    box-shadow: 0 24px 54px rgba(0,0,0,0.22) !important;
}

body.cx-order-success-body .cx-success-visual img {
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    padding: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
    background: transparent !important;
}

body.cx-order-success-body .cx-order-details .cx-proof-under-tracking {
    justify-self: center !important;
    width: min(360px, calc(100% - 36px)) !important;
    max-width: 360px !important;
    margin: 18px auto 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    border-radius: 18px !important;
}

@media (max-width: 900px) {
    body.cx-order-success-body .cx-success-hero {
        grid-template-columns: 1fr !important;
    }

    body.cx-order-success-body .cx-success-visual {
        min-height: 260px !important;
        margin-top: 0 !important;
    }
}

@media (max-width: 560px) {
    body.cx-order-success-body .cx-success-hero {
        min-height: auto !important;
        border-radius: 24px !important;
    }

    body.cx-order-success-body .cx-success-hero .cx-hero-copy {
        padding: 28px 22px !important;
    }

    body.cx-order-success-body .cx-success-hero h1 {
        font-size: clamp(36px, 11vw, 48px) !important;
    }

    body.cx-order-success-body .cx-success-hero p:not(.cx-kicker) {
        font-size: 15px !important;
    }
}

/* 2026-05-24: staff orders address wrapping fix */
body.staff-orders-page .staff-table {
    min-width: 1560px !important;
    table-layout: fixed !important;
}

body.staff-orders-page .staff-table th:nth-child(1),
body.staff-orders-page .staff-table td:nth-child(1) { width: 7% !important; }

body.staff-orders-page .staff-table th:nth-child(2),
body.staff-orders-page .staff-table td:nth-child(2) { width: 20% !important; }

body.staff-orders-page .staff-table th:nth-child(3),
body.staff-orders-page .staff-table td:nth-child(3) { width: 10% !important; }

body.staff-orders-page .staff-table th:nth-child(4),
body.staff-orders-page .staff-table td:nth-child(4) { width: 10% !important; }

body.staff-orders-page .staff-table th:nth-child(5),
body.staff-orders-page .staff-table td:nth-child(5) { width: 10% !important; }

body.staff-orders-page .staff-table th:nth-child(6),
body.staff-orders-page .staff-table td:nth-child(6) { width: 34% !important; }

body.staff-orders-page .staff-table th:nth-child(7),
body.staff-orders-page .staff-table td:nth-child(7) { width: 11% !important; }

body.staff-orders-page .staff-table th,
body.staff-orders-page .staff-table td {
    overflow: visible !important;
}

body.staff-orders-page .staff-table td:nth-child(6) {
    min-width: 500px !important;
}

body.staff-orders-page .staff-table th:nth-child(6) {
    min-width: 500px !important;
}

body.staff-orders-page .staff-order-sync-form {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: minmax(190px, 1fr) minmax(150px, .82fr) 86px !important;
}

body.staff-orders-page .staff-order-sync-form input,
body.staff-orders-page .staff-order-sync-form select,
body.staff-orders-page .staff-order-sync-form button {
    min-width: 0 !important;
}

body.staff-orders-page .staff-table tbody td {
    height: auto !important;
    min-height: 112px !important;
    vertical-align: middle !important;
}

body.staff-orders-page .staff-customer-delivery {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: grid !important;
    gap: 6px !important;
}

body.staff-orders-page .staff-customer-delivery strong,
body.staff-orders-page .staff-customer-delivery span,
body.staff-orders-page .staff-customer-delivery small {
    max-width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    white-space: normal !important;
}

body.staff-orders-page .staff-customer-delivery strong {
    font-size: 15px !important;
    line-height: 1.2 !important;
}

body.staff-orders-page .staff-customer-delivery span {
    font-size: 12px !important;
    line-height: 1.3 !important;
}

body.staff-orders-page .staff-customer-delivery small {
    color: #6b6255 !important;
    -webkit-text-fill-color: #6b6255 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    font-weight: 750 !important;
}

/* 2026-05-24: visible tracking action card, no off-screen clipping */
body.staff-orders-page .staff-table {
    min-width: 1080px !important;
    width: 100% !important;
    table-layout: fixed !important;
}

body.staff-orders-page .staff-table th:nth-child(7),
body.staff-orders-page .staff-table td:nth-child(7) {
    display: none !important;
}

body.staff-orders-page .staff-table th:nth-child(1),
body.staff-orders-page .staff-table td:nth-child(1) { width: 9% !important; }

body.staff-orders-page .staff-table th:nth-child(2),
body.staff-orders-page .staff-table td:nth-child(2) { width: 29% !important; }

body.staff-orders-page .staff-table th:nth-child(3),
body.staff-orders-page .staff-table td:nth-child(3) { width: 12% !important; }

body.staff-orders-page .staff-table th:nth-child(4),
body.staff-orders-page .staff-table td:nth-child(4) { width: 13% !important; }

body.staff-orders-page .staff-table th:nth-child(5),
body.staff-orders-page .staff-table td:nth-child(5) { width: 13% !important; }

body.staff-orders-page .staff-table th:nth-child(6),
body.staff-orders-page .staff-table td:nth-child(6) {
    width: 24% !important;
    min-width: 0 !important;
    overflow: visible !important;
}

body.staff-orders-page .staff-order-sync-form {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 74px !important;
    gap: 10px !important;
    padding: 10px !important;
    border-radius: 18px !important;
    background: #f7f7f7 !important;
    border: 1px solid #dedede !important;
    box-shadow: none !important;
}

body.staff-orders-page .staff-order-sync-form input[type="hidden"] {
    display: none !important;
}

body.staff-orders-page .staff-order-sync-form .staff-tracking-input {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.staff-orders-page .staff-order-sync-form .staff-status-select {
    width: 100% !important;
    min-width: 0 !important;
    height: 44px !important;
    padding: 0 12px !important;
    font-size: 12px !important;
}

body.staff-orders-page .staff-order-sync-form .staff-sync-btn {
    width: 74px !important;
    min-width: 74px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 8px !important;
    font-size: 12px !important;
}

/* =========================================================
   Wishlist hero rounded-corner repair
   - keeps the brown wishlist hero panel rounded instead of sharp
   ========================================================= */
body.cx-wishlist-body .wishlist-page-wrapper .wishlist-page-hero,
body.cx-wishlist-body .wishlist-page-wrapper .customer-page-hero {
    border-radius: 34px !important;
    overflow: hidden !important;
}

body.cx-wishlist-body .wishlist-page-wrapper .wishlist-hero-visual {
    border-radius: 24px !important;
    overflow: hidden !important;
}

/* =========================================================
   2026-06-03: Checkout page polish + unified role nav
   ========================================================= */
body.cx-checkout-body .cx-checkout-page {
    width: min(100%, 1500px) !important;
    margin: 0 auto !important;
    padding: clamp(28px, 4vw, 54px) clamp(18px, 4vw, 54px) 70px !important;
}

body.cx-checkout-body .cx-checkout-hero-enhanced {
    position: relative !important;
    width: 100% !important;
    min-height: clamp(310px, 34vw, 430px) !important;
    margin: 0 auto 32px !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 0.92fr) minmax(320px, 1.08fr) !important;
    gap: 0 !important;
    overflow: hidden !important;
    border: 1px solid #111 !important;
    border-radius: 0 !important;
    background: #efe2c4 !important;
    box-shadow: 0 28px 70px rgba(20, 16, 10, 0.14) !important;
}

body.cx-checkout-body .cx-checkout-hero-enhanced::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        linear-gradient(90deg, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.56) 36%, rgba(179,145,63,0.20) 100%),
        repeating-linear-gradient(90deg, rgba(17,17,17,0.05) 0 1px, transparent 1px 92px) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

body.cx-checkout-body .cx-checkout-hero-enhanced .cx-hero-copy {
    position: relative !important;
    z-index: 2 !important;
    padding: clamp(28px, 4.4vw, 56px) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    color: #111 !important;
    text-align: left !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

body.cx-checkout-body .cx-checkout-hero-enhanced .cx-kicker {
    display: inline-flex !important;
    width: auto !important;
    margin: 0 0 18px !important;
    padding: 9px 13px !important;
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    background: #fff !important;
    border: 1px solid rgba(17,17,17,0.18) !important;
    border-radius: 999px !important;
    box-shadow: 0 12px 24px rgba(17,17,17,0.08) !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: 2px !important;
}

body.cx-checkout-body .cx-checkout-hero-enhanced h1 {
    max-width: 680px !important;
    margin: 0 !important;
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    text-shadow: none !important;
    font-size: clamp(40px, 5.8vw, 78px) !important;
    line-height: 0.92 !important;
    letter-spacing: 0 !important;
}

body.cx-checkout-body .cx-checkout-hero-enhanced p:not(.cx-kicker) {
    max-width: 580px !important;
    margin: 16px 0 0 !important;
    color: #3d3527 !important;
    -webkit-text-fill-color: #3d3527 !important;
    font-size: clamp(14px, 1.2vw, 17px) !important;
    line-height: 1.65 !important;
    font-weight: 650 !important;
    text-shadow: none !important;
}

body.cx-checkout-body .cx-checkout-hero-meta {
    margin-top: 22px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

body.cx-checkout-body .cx-checkout-hero-meta span {
    min-height: 38px !important;
    padding: 0 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    background: #111 !important;
    border: 1px solid #111 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
    box-shadow: none !important;
    letter-spacing: 1.2px !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    text-transform: uppercase !important;
}

body.cx-checkout-body .cx-checkout-hero-visual {
    position: relative !important;
    z-index: 2 !important;
    min-height: auto !important;
    height: auto !important;
    margin: clamp(14px, 2vw, 24px) clamp(14px, 2vw, 24px) clamp(14px, 2vw, 24px) 0 !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 1px solid rgba(17,17,17,0.16) !important;
    box-shadow: 0 24px 48px rgba(17,17,17,0.16) !important;
}

body.cx-checkout-body .cx-checkout-hero-visual::after {
    content: "KRYLO ORDER REVIEW" !important;
    position: absolute !important;
    left: 18px !important;
    bottom: 18px !important;
    padding: 9px 12px !important;
    background: rgba(255,255,255,0.92) !important;
    border: 1px solid rgba(17,17,17,0.16) !important;
    color: #111 !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: 1.7px !important;
}

body.cx-checkout-body .cx-checkout-hero-visual img {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    background: #efe2c4 !important;
}

body.cx-checkout-body .cx-checkout-image-placeholder.cx-checkout-hero-visual {
    display: block !important;
}

body.cx-checkout-body .checkout-flow-progress {
    width: min(100%, 1120px) !important;
    margin: 0 auto 32px !important;
    padding: 10px !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px !important;
    border-radius: 999px !important;
    background: #fff !important;
    border: 1px solid var(--k-line) !important;
    box-shadow: 0 16px 38px rgba(17,17,17,0.08) !important;
}

body.cx-checkout-body .checkout-flow-progress span {
    min-height: 50px !important;
    border-radius: 999px !important;
    background: #f4f4f1 !important;
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    font-size: 12px !important;
    font-weight: 950 !important;
    letter-spacing: 0.8px !important;
}

body.cx-checkout-body .checkout-flow-progress span.active {
    background: #111 !important;
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

body.cx-checkout-body .cx-checkout-layout {
    align-items: start !important;
    gap: 26px !important;
}

body.cx-checkout-body .cx-checkout-main-card,
body.cx-checkout-body .cx-checkout-side-card {
    border: 1px solid #111 !important;
    border-radius: 0 !important;
    background: #fff !important;
    box-shadow: 0 22px 48px rgba(17,17,17,0.08) !important;
}

body.cx-checkout-body .cx-checkout-side-card {
    position: sticky !important;
    top: 92px !important;
}

body.cx-checkout-body .cx-section-heading h2,
body.cx-checkout-body .cx-checkout-side-card h2 {
    color: #111 !important;
    -webkit-text-fill-color: #111 !important;
    font-size: clamp(25px, 2.3vw, 34px) !important;
    letter-spacing: 0 !important;
}

body.cx-checkout-body .cx-bank-line,
body.cx-checkout-body .cx-checkout-total-box,
body.cx-checkout-body .cx-delivery-card {
    border-radius: 0 !important;
}

body.cx-checkout-body .cx-checkout-total-box {
    border: 1px solid #111 !important;
    background: #111 !important;
}

body.cx-checkout-body .cx-checkout-total-box span,
body.cx-checkout-body .cx-checkout-total-box strong,
body.cx-checkout-body .cx-checkout-total-box small {
    color: #fff !important;
    -webkit-text-fill-color: #fff !important;
}

body.cx-checkout-body .cx-btn-dark {
    background: #111 !important;
    color: #fff !important;
    border-color: #111 !important;
}

body.cx-checkout-body .cx-btn-dark:hover {
    background: var(--k-accent) !important;
    color: #111 !important;
    border-color: #111 !important;
}

body.admin-page .admin-nav,
body.staff-page .staff-nav,
body.staff-page .staff-nav.krylo-customer-nav {
    min-height: 72px !important;
    padding: 0 5.5% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    background: rgba(255,255,255,0.96) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--k-line) !important;
    box-shadow: 0 8px 25px rgba(0,0,0,0.04) !important;
    backdrop-filter: blur(18px) !important;
}

body.admin-page .admin-nav .logo,
body.staff-page .staff-nav .logo,
body.staff-page .staff-nav.krylo-customer-nav .logo {
    margin: 0 !important;
    color: var(--k-black) !important;
    -webkit-text-fill-color: var(--k-black) !important;
    background: none !important;
    border: 0 !important;
    font-size: 25px !important;
    font-weight: 950 !important;
    letter-spacing: 5px !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
}

body.admin-page .admin-nav .logo::before,
body.admin-page .admin-nav .logo::after,
body.staff-page .staff-nav .logo::before,
body.staff-page .staff-nav .logo::after,
body.staff-page .staff-nav.krylo-customer-nav .logo::before,
body.staff-page .staff-nav.krylo-customer-nav .logo::after {
    content: none !important;
    display: none !important;
}

body.admin-page .admin-nav .nav-links,
body.staff-page .staff-nav .nav-links,
body.staff-page .staff-nav.krylo-customer-nav .nav-links {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: wrap !important;
    gap: 6px 22px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    overflow: visible !important;
}

body.admin-page .admin-nav .nav-links a,
body.staff-page .staff-nav .nav-links a,
body.staff-page .staff-nav.krylo-customer-nav .nav-links a {
    position: relative !important;
    min-height: 40px !important;
    padding: 10px 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    color: #151515 !important;
    -webkit-text-fill-color: #151515 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 1.2px !important;
    line-height: 1.15 !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    transform: none !important;
}

body.admin-page .admin-nav .nav-links a::before,
body.staff-page .staff-nav .nav-links a::before,
body.staff-page .staff-nav.krylo-customer-nav .nav-links a::before {
    content: none !important;
    display: none !important;
}

body.admin-page .admin-nav .nav-links a::after,
body.staff-page .staff-nav .nav-links a::after,
body.staff-page .staff-nav.krylo-customer-nav .nav-links a::after {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    bottom: 2px !important;
    width: 0 !important;
    height: 2px !important;
    background: var(--k-black) !important;
    border: 0 !important;
    transform: none !important;
    transition: width 0.3s ease !important;
}

body.admin-page .admin-nav .nav-links a:hover,
body.admin-page .admin-nav .nav-links a.bag,
body.staff-page .staff-nav .nav-links a:hover,
body.staff-page .staff-nav .nav-links a.bag,
body.staff-page .staff-nav.krylo-customer-nav .nav-links a:hover,
body.staff-page .staff-nav.krylo-customer-nav .nav-links a.bag {
    color: var(--k-accent) !important;
    -webkit-text-fill-color: var(--k-accent) !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
}

body.admin-page .admin-nav .nav-links a:hover::after,
body.admin-page .admin-nav .nav-links a.bag::after,
body.staff-page .staff-nav .nav-links a:hover::after,
body.staff-page .staff-nav .nav-links a.bag::after,
body.staff-page .staff-nav.krylo-customer-nav .nav-links a:hover::after,
body.staff-page .staff-nav.krylo-customer-nav .nav-links a.bag::after {
    width: 100% !important;
}

@media (max-width: 980px) {
    body.cx-checkout-body .cx-checkout-hero-enhanced {
        grid-template-columns: 1fr !important;
    }

    body.cx-checkout-body .cx-checkout-hero-visual {
        min-height: 310px !important;
        margin: 0 clamp(22px, 5vw, 40px) clamp(22px, 5vw, 40px) !important;
    }

    body.cx-checkout-body .cx-checkout-side-card {
        position: static !important;
    }

    body.admin-page .admin-nav,
    body.staff-page .staff-nav,
    body.staff-page .staff-nav.krylo-customer-nav {
        min-height: auto !important;
        padding: 18px 5.5% !important;
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    body.admin-page .admin-nav .nav-links,
    body.staff-page .staff-nav .nav-links,
    body.staff-page .staff-nav.krylo-customer-nav .nav-links {
        justify-content: flex-start !important;
    }
}

@media (max-width: 640px) {
    body.cx-checkout-body .cx-checkout-page {
        padding-inline: 14px !important;
    }

    body.cx-checkout-body .cx-checkout-hero-enhanced .cx-hero-copy {
        padding: 30px 22px !important;
    }

    body.cx-checkout-body .cx-checkout-hero-enhanced h1 {
        font-size: clamp(40px, 13vw, 58px) !important;
    }

    body.cx-checkout-body .checkout-flow-progress {
        grid-template-columns: 1fr 1fr !important;
        border-radius: 22px !important;
    }
}