/* =========================================================
   HEXCORE PROVIDERS
   COMPLETE STYLE SHEET
========================================================= */


/* =========================================================
   RESET / GLOBAL
========================================================= */

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

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    position: relative;
    background: #080b09;
    color: #ffffff;
    font-family: Arial, Helvetica, sans-serif;
}

a {
    text-decoration: none;
}

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

button {
    font-size: inherit;
}

.hidden {
    display: none !important;
}


/* =========================================================
   HEADER
========================================================= */

.main-header {
    height: 72px;
    position: relative;
    z-index: 20;
    background: rgba(11, 15, 12, 0.94);
    border-bottom: 1px solid #202a22;
    backdrop-filter: blur(8px);
}

.header-container {
    width: 100%;
    max-width: 1250px;
    height: 100%;
    margin: auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
}


/* =========================================================
   BRAND
========================================================= */

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    font-weight: bold;
}

.brand-logo {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #39ff14, #087f23);
    color: #041004;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 900;
    box-shadow: 0 0 20px rgba(57, 255, 20, 0.15);
}


/* =========================================================
   MAIN NAVIGATION
========================================================= */

.main-nav {
    height: 100%;
    margin-left: 60px;
    display: flex;
    align-items: center;
    gap: 30px;
}

    .main-nav a {
        height: 100%;
        display: flex;
        align-items: center;
        position: relative;
        color: #88928a;
        font-size: 13px;
        font-weight: bold;
        transition: 0.2s;
    }

        .main-nav a:hover {
            color: #ffffff;
        }

        .main-nav a.active {
            color: #ffffff;
        }

            .main-nav a.active::after {
                content: "";
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                height: 3px;
                background: #39ff14;
            }


/* =========================================================
   ACCOUNT BUTTON AREA
========================================================= */

.account-buttons {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 15px;
}

.login {
    color: #9ba59d;
    font-size: 13px;
    font-weight: bold;
    transition: 0.2s;
}

    .login:hover {
        color: #ffffff;
    }

.create-account {
    padding: 11px 16px;
    background: #39ff14;
    color: #041004;
    border-radius: 6px;
    font-size: 12px;
    font-weight: bold;
    transition: 0.2s;
}

    .create-account:hover {
        background: #22c55e;
    }


/* =========================================================
   LOGGED-IN ACCOUNT
========================================================= */

.account-name {
    padding: 9px 12px;
    color: #39ff14;
    border-radius: 6px;
    font-size: 13px;
    font-weight: bold;
    transition: 0.2s;
}

    .account-name:visited {
        color: #39ff14;
    }

    .account-name:hover {
        background: #121913;
        color: #70ff56;
    }

.logout-button {
    padding: 9px 14px;
    background: #151b16;
    color: #b4beb6;
    border: 1px solid #29332b;
    border-radius: 6px;
    font-size: 12px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

    .logout-button:hover {
        border-color: #39ff14;
        background: #1b231d;
        color: #ffffff;
    }


/* =========================================================
   HERO
========================================================= */

.hero {
    min-height: 520px;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    text-align: center;
    background: transparent;
}

.hero-content {
    width: 100%;
    max-width: 900px;
    padding: 80px 30px 30px;
}

.hero-logo {
    width: 230px;
    height: 150px;
    margin: 35px auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #39ff14, #087f23);
    color: #041004;
    border-radius: 18px;
    font-weight: 900;
    box-shadow: 0 0 35px rgba(57, 255, 20, 0.17);
}

.hero h1 {
    margin-top: 7px;
    color: #39ff14;
    font-size: clamp(40px, 5vw, 58px);
    line-height: 1.05;
    letter-spacing: 1.5px;
    text-transform: none;
    text-shadow: 0 0 18px rgba(57, 255, 20, 0.18);
}

.hero p {
    margin-top: 14px;
    color: #b5bdb7;
    font-size: 16px;
}

.hero-buttons {
    margin-top: 28px;
    display: flex;
    justify-content: center;
    gap: 12px;
}


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

.green-button,
.dark-button {
    display: inline-block;
    padding: 13px 22px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: bold;
    transition: 0.2s;
}

.green-button {
    background: #39ff14;
    color: #041004;
}

    .green-button:hover {
        background: #22c55e;
    }

.dark-button {
    background: #151b16;
    color: #ffffff;
    border: 1px solid #29332b;
}

    .dark-button:hover {
        background: #1c241e;
        border-color: #39ff14;
    }


/* =========================================================
   PRODUCTS / STOREFRONT
========================================================= */

.products-section {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    padding: 75px 20px;
}

.small-title {
    color: #39ff14;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 2px;
}

.products-section h2 {
    margin-top: 5px;
    margin-bottom: 30px;
    font-size: 30px;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.product-card {
    overflow: hidden;
    background: #101411;
    border: 1px solid #222c24;
    border-radius: 9px;
    transition: 0.2s;
}

    .product-card:hover {
        transform: translateY(-5px);
        border-color: #39ff14;
        box-shadow: 0 15px 45px rgba(0, 0, 0, 0.35);
    }

.product-image {
    height: 220px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #1b241d, #0d110e);
    color: #465048;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 2px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.product-info {
    padding: 20px;
}

    .product-info h3 {
        font-size: 18px;
    }

    .product-info p {
        margin-top: 8px;
        color: #788079;
        font-size: 13px;
        line-height: 1.6;
    }

.product-bottom {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

    .product-bottom strong {
        font-size: 20px;
    }

    .product-bottom button {
        padding: 10px 14px;
        background: #39ff14;
        color: #041004;
        border: none;
        border-radius: 5px;
        font-weight: bold;
        cursor: pointer;
        transition: 0.2s;
    }

        .product-bottom button:hover {
            background: #22c55e;
        }


/* =========================================================
   PRODUCT STATUS BADGES
========================================================= */

.product-status {
    position: absolute;
    top: 14px;
    right: 14px;
    padding: 6px 9px;
    border-radius: 5px;
    font-size: 9px;
    font-weight: bold;
    text-transform: uppercase;
}

    .product-status.available {
        color: #39ff14;
        background: rgba(57, 255, 20, 0.12);
    }

    .product-status.updating {
        color: #ffbd32;
        background: rgba(255, 189, 50, 0.12);
    }

    .product-status.offline {
        color: #ff6262;
        background: rgba(255, 80, 80, 0.12);
    }


/* =========================================================
   FOOTER
========================================================= */

footer {
    width: 100%;
    max-width: 1200px;
    margin: auto;
    padding: 30px 20px;
    border-top: 1px solid #1d251f;
    color: #677068;
    font-size: 12px;
}


/* =========================================================
   LOGIN / REGISTER
========================================================= */

.auth-page {
    min-height: 100vh;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at top, #17231a, #080b09 55%);
}

.auth-card {
    width: 100%;
    max-width: 430px;
    padding: 38px;
    background: #0f1410;
    border: 1px solid #263029;
    border-radius: 12px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.50);
}

.auth-logo {
    width: 65px;
    height: 65px;
    margin: 0 auto 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #39ff14, #087f23);
    color: #031003;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 900;
    box-shadow: 0 0 30px rgba(57, 255, 20, 0.18);
}

.auth-card h1 {
    margin-bottom: 6px;
    text-align: center;
    font-size: 28px;
}

.auth-subtitle {
    margin-bottom: 28px;
    text-align: center;
    color: #78827b;
    font-size: 13px;
}

.auth-card form {
    display: flex;
    flex-direction: column;
}

.auth-card label {
    margin-bottom: 7px;
    color: #b5beb7;
    font-size: 12px;
    font-weight: bold;
}

.auth-card input {
    width: 100%;
    margin-bottom: 18px;
    padding: 13px 14px;
    background: #090d0a;
    color: #ffffff;
    border: 1px solid #29332b;
    border-radius: 6px;
    outline: none;
    font-size: 14px;
}

    .auth-card input:focus {
        border-color: #39ff14;
        box-shadow: 0 0 0 2px rgba(57, 255, 20, 0.08);
    }

    .auth-card input::placeholder {
        color: #515952;
    }

.auth-button {
    width: 100%;
    margin-top: 4px;
    padding: 13px;
    background: #39ff14;
    color: #031003;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

    .auth-button:hover {
        background: #22c55e;
    }

.auth-message {
    min-height: 20px;
    margin-top: 18px;
    text-align: center;
    color: #8d978f;
    font-size: 12px;
}

    .auth-message.error {
        color: #ff6666;
    }

    .auth-message.success {
        color: #39ff14;
    }

.auth-bottom {
    margin-top: 18px;
    text-align: center;
    color: #747e77;
    font-size: 12px;
}

    .auth-bottom a {
        color: #39ff14;
        font-weight: bold;
    }

        .auth-bottom a:hover {
            color: #7cff63;
        }


/* =========================================================
   ACCOUNT PAGE
========================================================= */

.account-page {
    min-height: calc(100vh - 72px);
    padding: 70px 20px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    background: radial-gradient(circle at top, #17231a, #080b09 55%);
}

.account-card {
    width: 100%;
    max-width: 650px;
    padding: 40px;
    background: #0f1410;
    border: 1px solid #263029;
    border-radius: 12px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.45);
}

.account-avatar {
    width: 70px;
    height: 70px;
    margin: 0 auto 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #39ff14, #087f23);
    color: #031003;
    border-radius: 14px;
    font-weight: 900;
    box-shadow: 0 0 30px rgba(57, 255, 20, 0.18);
}

.account-card h1 {
    text-align: center;
    font-size: 30px;
}

.account-subtitle {
    margin: 7px 0 35px;
    text-align: center;
    color: #78827b;
    font-size: 13px;
}

.account-row {
    min-height: 65px;
    margin-bottom: 12px;
    padding: 15px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: #090d0a;
    border: 1px solid #263029;
    border-radius: 7px;
}

    .account-row span {
        color: #7c877f;
        font-size: 12px;
    }

    .account-row strong {
        color: #ffffff;
        font-size: 13px;
        text-align: right;
    }

#role {
    color: #39ff14;
}

.account-actions {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 12px;
}


/* =========================================================
   ADMIN PAGE
========================================================= */

.admin-page {
    width: 100%;
    max-width: 1200px;
    min-height: calc(100vh - 72px);
    margin: auto;
    padding: 70px 20px;
}

.admin-loading {
    margin-top: 100px;
    text-align: center;
    color: #39ff14;
    font-size: 14px;
}

.admin-header {
    margin-bottom: 35px;
}

    .admin-header h1 {
        margin-top: 6px;
        font-size: 34px;
    }

    .admin-header p {
        margin-top: 8px;
        color: #768079;
        font-size: 14px;
    }


/* =========================================================
   ADMIN DASHBOARD GRID
========================================================= */

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

.admin-card {
    min-height: 180px;
    padding: 25px;
    background: #0f1410;
    color: #ffffff;
    border: 1px solid #263029;
    border-radius: 10px;
    appearance: none;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: 0.2s;
}

    .admin-card:hover {
        transform: translateY(-4px);
        border-color: #39ff14;
        box-shadow: 0 15px 45px rgba(0, 0, 0, 0.35);
    }

    .admin-card h3 {
        color: #39ff14;
        font-size: 18px;
    }

    .admin-card p {
        margin-top: 10px;
        color: #768079;
        font-size: 13px;
        line-height: 1.6;
    }

.admin-card-link {
    display: block;
    margin-top: 20px;
    color: #39ff14;
    font-size: 11px;
    font-weight: bold;
}


/* =========================================================
   ADMIN OPEN SECTION
========================================================= */

.admin-section-area {
    margin-top: 10px;
}

.admin-section-top {
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
}

    .admin-section-top h2 {
        font-size: 28px;
    }

.admin-back-button {
    padding: 10px 16px;
    background: #151b16;
    color: #ffffff;
    border: 1px solid #29332b;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

    .admin-back-button:hover {
        background: #1b231d;
        border-color: #39ff14;
    }

.admin-section-card {
    padding: 30px;
    background: #0f1410;
    border: 1px solid #263029;
    border-radius: 10px;
}

    .admin-section-card h3 {
        color: #39ff14;
        font-size: 20px;
    }

    .admin-section-card p {
        margin-top: 10px;
        color: #7b857e;
        font-size: 13px;
        line-height: 1.7;
    }


/* =========================================================
   ADMIN GREEN BUTTON
========================================================= */

.admin-green-button {
    margin-top: 25px;
    padding: 11px 18px;
    background: #39ff14;
    color: #041004;
    border: none;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

    .admin-green-button:hover {
        background: #22c55e;
    }

.admin-no-margin {
    margin-top: 0;
}


/* =========================================================
   ADMIN STATS
========================================================= */

.admin-stat-row {
    margin-top: 25px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.admin-stat {
    padding: 20px;
    background: #090d0a;
    border: 1px solid #263029;
    border-radius: 7px;
}

    .admin-stat span {
        display: block;
        color: #768079;
        font-size: 11px;
    }

    .admin-stat strong {
        display: block;
        margin-top: 7px;
        color: #39ff14;
        font-size: 25px;
    }


/* =========================================================
   ADMIN EMPTY / ERRORS / MESSAGES
========================================================= */

.admin-empty {
    margin-top: 25px;
    padding: 25px;
    text-align: center;
    color: #687269;
    background: #090d0a;
    border: 1px dashed #29332b;
    border-radius: 7px;
}

.admin-error {
    margin-top: 10px;
    color: #ff6666;
    font-size: 12px;
}

.admin-role-message {
    min-height: 20px;
    margin-top: 18px;
    color: #78827b;
    font-size: 12px;
}

    .admin-role-message.success {
        color: #39ff14;
    }

    .admin-role-message.error {
        color: #ff6666;
    }


/* =========================================================
   ADMIN USER MANAGEMENT
========================================================= */

.admin-users-header {
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

    .admin-users-header strong {
        color: #39ff14;
        font-size: 13px;
    }

.admin-users-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-user-row {
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: #090d0a;
    border: 1px solid #263029;
    border-radius: 7px;
}

.admin-user-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .admin-user-info strong {
        color: #ffffff;
        font-size: 13px;
    }

    .admin-user-info span {
        color: #758078;
        font-size: 11px;
    }

.you-badge {
    width: fit-content;
    padding: 3px 6px;
    background: rgba(57, 255, 20, 0.12);
    color: #39ff14;
    border-radius: 4px;
    font-size: 8px;
    font-weight: bold;
}

.admin-user-role {
    display: flex;
    align-items: center;
    gap: 8px;
}

.role-select {
    min-width: 120px;
    padding: 9px 11px;
    background: #111712;
    color: #ffffff;
    border: 1px solid #29332b;
    border-radius: 5px;
    outline: none;
}

    .role-select:focus {
        border-color: #39ff14;
    }

    .role-select:disabled {
        opacity: 0.55;
        cursor: not-allowed;
    }

.save-role-button {
    padding: 9px 13px;
    background: #39ff14;
    color: #041004;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

    .save-role-button:hover {
        background: #22c55e;
    }

    .save-role-button:disabled {
        opacity: 0.45;
        cursor: not-allowed;
    }


/* =========================================================
   ROLE PREVIEW BADGES
========================================================= */

.role-preview {
    margin-top: 20px;
    display: flex;
    gap: 10px;
}

.role {
    padding: 7px 11px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: bold;
}

.customer-role {
    background: #171d18;
    color: #c0c8c2;
}

.support-role {
    background: rgba(70, 140, 255, 0.12);
    color: #5ca7ff;
}

.admin-role {
    background: rgba(57, 255, 20, 0.12);
    color: #39ff14;
}


/* =========================================================
   ADMIN PRODUCT MANAGEMENT
========================================================= */

.admin-products-header {
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.admin-products-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.admin-product-row {
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: #090d0a;
    border: 1px solid #263029;
    border-radius: 7px;
}

.admin-product-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

    .admin-product-info strong {
        color: #ffffff;
        font-size: 14px;
    }

    .admin-product-info span {
        color: #39ff14;
        font-size: 13px;
        font-weight: bold;
    }

    .admin-product-info small {
        color: #748078;
        font-size: 10px;
    }

.admin-product-actions {
    display: flex;
    gap: 8px;
}

.product-edit-button,
.admin-small-dark-button {
    padding: 9px 14px;
    background: #151b16;
    color: #ffffff;
    border: 1px solid #29332b;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

    .product-edit-button:hover,
    .admin-small-dark-button:hover {
        background: #1b231d;
        border-color: #39ff14;
    }

.product-delete-button {
    padding: 9px 14px;
    background: rgba(255, 80, 80, 0.10);
    color: #ff6969;
    border: 1px solid rgba(255, 80, 80, 0.30);
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

    .product-delete-button:hover {
        background: rgba(255, 80, 80, 0.18);
        border-color: #ff6969;
    }


/* =========================================================
   ADMIN PRODUCT FORM
========================================================= */

.admin-form-header {
    margin-bottom: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.admin-product-form {
    display: flex;
    flex-direction: column;
}

    .admin-product-form label {
        margin-bottom: 7px;
        color: #b7c0b9;
        font-size: 12px;
        font-weight: bold;
    }

    .admin-product-form input,
    .admin-product-form textarea,
    .admin-product-form select {
        width: 100%;
        margin-bottom: 18px;
        padding: 12px 14px;
        background: #090d0a;
        color: #ffffff;
        border: 1px solid #29332b;
        border-radius: 6px;
        outline: none;
        font-size: 13px;
    }

        .admin-product-form input::placeholder,
        .admin-product-form textarea::placeholder {
            color: #515952;
        }

    .admin-product-form textarea {
        min-height: 120px;
        resize: vertical;
    }

        .admin-product-form input:focus,
        .admin-product-form textarea:focus,
        .admin-product-form select:focus {
            border-color: #39ff14;
            box-shadow: 0 0 0 2px rgba(57, 255, 20, 0.06);
        }

    .admin-product-form select {
        cursor: pointer;
    }


/* =========================================================
   ADMIN CHECKBOX
========================================================= */

.admin-checkbox-row {
    margin-top: 4px;
    display: flex !important;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

    .admin-checkbox-row input {
        width: auto;
        margin: 0;
    }

    .admin-checkbox-row span {
        color: #a7b0a9;
        font-size: 12px;
    }


/* =========================================================
   ADMIN PRODUCT STATUS EXAMPLES
========================================================= */

.status-example {
    margin-top: 25px;
    display: flex;
    gap: 10px;
}

.status-option {
    padding: 7px 11px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: bold;
}

    .status-option.available {
        background: rgba(57, 255, 20, 0.12);
        color: #39ff14;
    }

    .status-option.updating {
        background: rgba(255, 189, 50, 0.12);
        color: #ffbd32;
    }

    .status-option.offline {
        background: rgba(255, 80, 80, 0.12);
        color: #ff6262;
    }


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 850px) {

    .main-nav {
        display: none;
    }

    .brand span {
        display: none;
    }

    .hero {
        min-height: 470px;
    }

    .hero-content {
        padding: 55px 20px 25px;
    }

    .hero-logo {
        width: 180px;
        height: 120px;
        margin-top: 25px;
    }

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

    .hero-buttons {
        flex-direction: column;
        align-items: center;
    }

    .product-grid {
        grid-template-columns: 1fr;
    }

    .account-actions {
        flex-direction: column;
    }

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

    .admin-stat-row {
        grid-template-columns: 1fr;
    }

    .role-preview,
    .status-example {
        flex-wrap: wrap;
    }
}


/* =========================================================
   SMALLER MOBILE
========================================================= */

@media (max-width: 700px) {

    .account-row {
        align-items: flex-start;
        flex-direction: column;
    }

        .account-row strong {
            text-align: left;
        }

    .admin-users-header,
    .admin-user-row,
    .admin-products-header,
    .admin-product-row,
    .admin-form-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-user-role,
    .admin-product-actions {
        width: 100%;
    }

    .role-select {
        flex: 1;
    }

    .product-edit-button,
    .product-delete-button {
        flex: 1;
    }
}


/* =========================================================
   DYNAMIC SITE BRANDING
========================================================= */

.brand-logo.has-image,
.hero-logo.has-image {
    padding: 0;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
}

.brand-logo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    border-radius: 8px;
}

.hero-logo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    border-radius: 18px;
}


/* Keep hero content above uploaded background */

.hero {
    position: relative;
    overflow: hidden;
}

.hero-content {
    position: relative;
    z-index: 1;
}


/* =========================================================
   ADMIN SITE SETTINGS
========================================================= */

.admin-card-icon {
    margin-bottom: 12px;
    font-size: 18px;
    line-height: 1;
}

.site-settings-preview {
    margin-top: -7px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px;
    background: #090d0a;
    border: 1px solid #263029;
    border-radius: 7px;
}

    .site-settings-preview img {
        width: 110px;
        height: 80px;
        display: block;
        object-fit: contain;
        background: #050706;
        border-radius: 5px;
    }

    .site-settings-preview span {
        color: #78827b;
        font-size: 11px;
    }

    .site-settings-preview.background-preview img {
        width: 220px;
        height: 120px;
        object-fit: cover;
    }

.product-image-upload-note {
    margin-top: -8px;
    margin-bottom: 18px;
    color: #667168;
    font-size: 11px;
    line-height: 1.5;
}

.admin-product-image-preview {
    margin-top: -8px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px;
    background: #090d0a;
    border: 1px solid #263029;
    border-radius: 7px;
}

    .admin-product-image-preview img {
        width: 110px;
        height: 80px;
        object-fit: contain;
        background: #050706;
        border-radius: 5px;
    }

    .admin-product-image-preview span {
        color: #78827b;
        font-size: 11px;
    }

@media (max-width: 700px) {

    .site-settings-preview,
    .admin-product-image-preview {
        align-items: flex-start;
        flex-direction: column;
    }

        .site-settings-preview.background-preview img {
            width: 100%;
            height: auto;
            max-height: 220px;
        }
}


/* =========================================================
   FULL PAGE STOREFRONT BACKGROUND
========================================================= */

.site-background-layer {
    position: fixed;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #080b09;
}

.main-header,
.hero,
.products-section,
footer {
    position: relative;
}

.products-section,
footer {
    z-index: 1;
}

.products-section {
    background: transparent;
}

footer {
    background: rgba(8, 11, 9, 0.82);
}


/* =========================================================
   HERO IMAGE FROM SITE SETTINGS
========================================================= */

.hero-logo.has-image {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
}

    .hero-logo.has-image img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: contain;
        border-radius: 0;
    }