@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Open+Sans:wght@400;600;700&display=swap");

:root {
    --primary: #f64b3f;
    --primary-dark: #d63b32;
    --dark: #222;
    --text: #4a4a4a;
    --muted: #777;
    --line: #e6e6e6;
    --bg: #f7f7f7;
    --tag: #f1f1f1;
    --success: #3ba05d;
    --warning: #f4a11c;
    --info: #2d78f6;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Inter", "Open Sans", Arial, sans-serif;
    color: var(--text);
    background: #fff;
}

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

img {
    max-width: 100%;
    display: block;
}

.container {
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 20px;
}

.flex {
    display: flex;
    align-items: center;
}

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

.btn {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--text);
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn.primary {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: 0 3px 0 var(--primary-dark);
}

.btn.outline {
    background: transparent;
    color: var(--text);
}

.btn.small {
    padding: 7px 10px;
    font-size: 13px;
}

.badge {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    border-radius: 12px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 600;
}

.tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--tag);
    border-radius: 16px;
    font-size: 13px;
}

.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.muted {
    color: var(--muted);
}

.section-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 12px;
}

.grid {
    display: grid;
    gap: 16px;
}

header {
    border-bottom: 1px solid var(--line);
    background: #fff;
}

.topbar {
    padding: 10px 0;
}

.brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 16px;
}

.brand-square {
    width: 30px;
    height: 30px;
    background: var(--primary);
    border-radius: 4px;
    position: relative;
}

.brand-square::after {
    content: "D";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 800;
    font-size: 18px;
}

.search {
    flex: 1;
    margin: 0 16px;
    display: grid;
    grid-template-columns: 1fr 44px;
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
}

.search input {
    border: none;
    padding: 10px 12px;
    font-size: 14px;
}

.search button {
    border: none;
    background: var(--primary);
    color: #fff;
    font-size: 18px;
}

.top-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
}

.top-actions .btn.primary {
    font-weight: 700;
    padding: 9px 12px;
    min-width: 90px;
    text-align: center;
}

.subnav {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: #fdfdfd;
    font-size: 13px;
}

.subnav .container {
    padding: 10px 20px;
}

.subnav .links {
    display: flex;
    gap: 16px;
    color: var(--muted);
}

.hero {
    background: #fff;
    padding: 14px 0 24px;
}

.hero-grid {
    display: grid;
    grid-template-columns: 240px 1fr 260px;
    gap: 12px;
}

.category-list {
    border: 1px solid var(--line);
    padding: 10px;
    background: #fff;
    list-style: none;
    margin: 0;
}

.category-list li {
    display: flex;
    justify-content: space-between;
    padding: 6px 2px;
    font-size: 13px;
    color: var(--text);
}

.category-list li:hover {
    color: var(--primary);
}

.hero-banner {
    position: relative;
    background: linear-gradient(90deg, #00a246, #00c959);
    color: #fff;
    border-radius: 4px;
    overflow: hidden;
    min-height: 240px;
}

.hero-banner img {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 520px;
}

.hero-text {
    position: relative;
    padding: 20px 22px;
    max-width: 50%;
}

.hero-text h1 {
    margin: 0 0 14px;
    font-size: 22px;
    line-height: 1.4;
}

.hero-text p {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.4;
}

.hero-side {
    display: grid;
    gap: 10px;
}

.side-card {
    padding: 12px;
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 4px;
}

.side-card h4 {
    margin: 0 0 8px;
    font-size: 14px;
}

.side-card p {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--muted);
}

.products-section {
    padding: 10px 0 30px;
}

.product-card {
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    display: grid;
    grid-template-rows: 180px auto;
}

.product-card .thumb {
    background: #fafafa;
    padding: 10px;
    display: grid;
    place-items: center;
}

.product-card .body {
    padding: 12px;
    font-size: 13px;
    display: grid;
    gap: 6px;
}

.product-card .price {
    font-weight: 700;
    color: var(--primary);
}

.logos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 12px;
}

.logos .item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 12px;
    display: grid;
    place-items: center;
}

.callout {
    background: #f6f6f6;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: center;
}

.callout h3 {
    margin: 0 0 8px;
}

.callout .form {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 12px;
    display: grid;
    gap: 10px;
}

.callout input,
.form input,
.form select,
.form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 4px;
    font-size: 14px;
}

.strip {
    background: var(--primary);
    color: #fff;
    padding: 16px 0;
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.3px;
}

footer {
    background: #e8e8e8;
    border-top: 1px solid #dcdcdc;
    padding: 30px 0 24px;
    color: #555;
    font-size: 13px;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 18px;
}

.footer-grid h5 {
    margin: 0 0 10px;
    font-size: 14px;
    color: #333;
}

.footer-grid ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 6px;
}

.foot-bottom {
    text-align: center;
    color: #777;
    font-size: 12px;
    margin-top: 18px;
    line-height: 1.5;
}

/* Collection page */
.page {
    padding: 16px 0 40px;
    background: #f3f3f3;
}

.layout {
    display: grid;
    grid-template-columns: 270px 1fr;
    gap: 16px;
}

.filter-panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 12px;
    display: grid;
    gap: 12px;
}

.filter-panel h4 {
    margin: 0 0 8px;
    font-size: 14px;
}

.filter-group {
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 8px 10px;
}

.filter-group label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    margin-bottom: 6px;
}

.filter-group input[type="checkbox"] {
    width: 14px;
    height: 14px;
}

.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

/* Product page */
.product-hero {
    display: grid;
    grid-template-columns: 2fr 1.15fr;
    gap: 16px;
}

.gallery {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 14px;
}

.gallery .main {
    border: 1px solid var(--line);
    height: 320px;
    display: grid;
    place-items: center;
    background: #fafafa;
}

.thumb-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
    gap: 8px;
    margin-top: 10px;
}

.thumb-row img {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 6px;
    background: #fff;
}

.product-summary {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 14px;
    display: grid;
    gap: 8px;
}

.product-summary h2 {
    margin: 0;
    font-size: 18px;
}

.price-large {
    color: var(--dark);
    font-size: 18px;
    font-weight: 700;
}

.detail-list {
    display: grid;
    gap: 6px;
    font-size: 13px;
}

.detail-list strong {
    color: #333;
}

.tabs {
    display: flex;
    gap: 10px;
    border-bottom: 1px solid var(--line);
    margin-top: 20px;
}

.tabs a {
    padding: 10px 12px;
    font-weight: 600;
    border-bottom: 3px solid transparent;
}

.tabs a.active {
    color: var(--primary);
    border-color: var(--primary);
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.table th,
.table td {
    border: 1px solid var(--line);
    padding: 8px;
    text-align: left;
}

/* Auth */
.auth-hero {
    position: relative;
    min-height: 520px;
    background: linear-gradient(90deg, rgba(32, 32, 32, 0.65), rgba(32, 32, 32, 0.45)), url("figma pages/Login-Signup.png") center/cover no-repeat;
    display: grid;
    place-items: center;
}

.auth-card {
    width: 340px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.15);
    padding: 18px;
}

.auth-card h3 {
    margin: 0 0 12px;
    text-align: center;
}

.auth-card .actions {
    margin-top: 10px;
    display: grid;
    gap: 8px;
}

/* Checkout */
.checkout-layout {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 18px;
}

.mini-list {
    display: grid;
    gap: 10px;
}

.mini-card {
    display: grid;
    grid-template-columns: 60px 1fr 80px;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
}

.summary {
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    padding: 12px;
    display: grid;
    gap: 8px;
}

/* Order form */
.order-form {
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    padding: 12px;
}

.order-form .row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}

.order-form label {
    font-size: 13px;
    color: var(--muted);
    display: block;
    margin-bottom: 4px;
}

.account-shell {
    background: #efefef;
    min-height: 100vh;
    padding-bottom: 30px;
}

.account-layout {
    display: grid;
    grid-template-columns: 220px 1fr 300px;
    gap: 16px;
    padding: 16px 0 24px;
}

.sidebar {
    background: #f9f9f9;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 12px;
    display: grid;
    gap: 6px;
}

.side-title {
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.side-link {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    padding: 8px 10px;
    border-radius: 4px;
    cursor: pointer;
}

.side-link.active {
    background: #fff;
    border: 1px solid var(--line);
    font-weight: 600;
}

.account-main {
    display: grid;
    gap: 12px;
}

.account-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 12px;
}

.account-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.chip {
    padding: 6px 10px;
    border: 1px solid var(--line);
    border-radius: 16px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fff;
}

.msg-box {
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fff;
    min-height: 360px;
}

.msg-top {
    border-bottom: 1px solid var(--line);
    padding: 10px;
    font-size: 12px;
    color: var(--muted);
}

.msg-body {
    padding: 12px;
    display: grid;
    gap: 10px;
}

.msg-input {
    border-top: 1px solid var(--line);
    padding: 10px;
    display: flex;
    gap: 8px;
}

.msg-input input {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 4px;
}

.cart-panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 10px;
    display: grid;
    gap: 8px;
}

.promo-box {
    background: #fff;
    border: 1px dashed var(--line);
    border-radius: 6px;
    padding: 16px;
    text-align: center;
    color: var(--muted);
}

.gallery-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 10px;
}

.wide-form input,
.wide-form textarea,
.wide-form select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 4px;
    font-size: 14px;
}

.wide-form textarea {
    resize: vertical;
}

.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.banner-slim {
    background: linear-gradient(90deg, #3c4d66, #1f2a3d);
    color: #fff;
    border-radius: 6px;
    padding: 16px;
    min-height: 120px;
    position: relative;
}

.flag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.flag {
    width: 26px;
    height: 18px;
    background: #ddd;
    border-radius: 3px;
    border: 1px solid #ccc;
}

.list-plain {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 6px;
}

.post-grid {
    display: grid;
    gap: 12px;
}

.post-grid label {
    display: block;
    font-size: 13px;
    color: var(--muted);
    margin-bottom: 6px;
}

.post-grid input,
.post-grid textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 4px;
    font-size: 14px;
}

@media (max-width: 1100px) {
    .hero-grid {
        grid-template-columns: 200px 1fr;
    }

    .hero-side {
        grid-column: 1 / -1;
    }

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

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

    .checkout-layout {
        grid-template-columns: 1fr;
    }

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

    .account-layout {
        grid-template-columns: 1fr;
    }

    .two-col {
        grid-template-columns: 1fr;
    }
}

/* Home v2 */
body.page-home-v2 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

body.page-home-v2 body {
    background: #e5e5e5;
}

body.page-home-v2 .container {
    width: 1200px;
    margin: auto;
}

/* ================= HERO ================= */
body.page-home-v2 .hero-wrapper {
    background: #fff;
    padding: 12px 0;
}

body.page-home-v2 .hero-layout {
    display: grid;
    grid-template-columns: 240px 1fr 266px;
    gap: 12px;
    min-height: 360px;
}

body.page-home-v2 .hero-categories {
    border: 1px solid #e5e5e5;
    background: #fff;
    font-size: 13px;
    display: flex;
    flex-direction: column;
}

body.page-home-v2 .hero-categories h4 {
    padding: 9px 10px;
    background: #fafafa;
    border-bottom: 1px solid #eee;
}

body.page-home-v2 .hero-categories ul {
    list-style: none;
    padding: 6px 8px;
    overflow-y: auto;
}

body.page-home-v2 .hero-categories li {
    padding: 6px;
    cursor: pointer;
}

body.page-home-v2 .hero-categories li:hover {
    background: #f5f5f5;
}

body.page-home-v2 .hero-categories .more {
    color: #2563eb;
    font-weight: bold;
}

body.page-home-v2 .hero-slider {
    border: 1px solid #e5e5e5;
    position: relative;
    overflow: hidden;
}

body.page-home-v2 .slides {
    position: relative;
    width: 100%;
    height: 100%;
}

body.page-home-v2 .slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: 0.6s;
}

body.page-home-v2 .slide.active {
    opacity: 1;
}

body.page-home-v2 .hero-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body.page-home-v2 .right-box {
    border: 1px solid #e5e5e5;
    background: #fff;
    flex: 1;
}

body.page-home-v2 .right-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ================= MOBILE DROPDOWN SECTIONS ================= */
body.page-home-v2 .mobile-sections-categories,
body.page-home-v2 .mobile-sections-signin {
    display: none;
    padding: 12px 0;
}

body.page-home-v2 .mobile-sections-categories {
    padding-bottom: 0;
}

body.page-home-v2 .mobile-sections-signin {
    padding-top: 0;
}

body.page-home-v2 .mobile-categories-top {
    margin-bottom: 12px;
}

body.page-home-v2 .mobile-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Categories Dropdown */
body.page-home-v2 .mobile-categories {
    background: #fff;
    border: 1px solid #e5e5e5;
}

body.page-home-v2 .categories-header {
    padding: 12px;
    background: #fafafa;
    border-bottom: 1px solid #e5e5e5;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
    font-size: 14px;
    transition: background 0.2s ease;
    user-select: none;
}

body.page-home-v2 .categories-header:hover {
    background: #f0f0f0;
}

body.page-home-v2 .categories-header:active {
    background: #e8e8e8;
}

body.page-home-v2 .dropdown-arrow {
    transition: transform 0.3s ease;
}

body.page-home-v2 .dropdown-arrow.open {
    transform: rotate(180deg);
}

body.page-home-v2 .categories-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

body.page-home-v2 .categories-content.open {
    max-height: 400px;
    overflow-y: auto;
}

body.page-home-v2 .categories-content ul {
    list-style: none;
    padding: 8px;
}

body.page-home-v2 .categories-content li {
    padding: 8px;
    font-size: 13px;
    cursor: pointer;
    border-bottom: 1px solid #f5f5f5;
    transition: background 0.2s ease;
}

body.page-home-v2 .categories-content li:last-child {
    border-bottom: none;
}

body.page-home-v2 .categories-content li:hover {
    background: #f5f5f5;
}

body.page-home-v2 .categories-content li:active {
    background: #e8e8e8;
}

body.page-home-v2 .categories-content .more {
    color: #2563eb;
    font-weight: bold;
}

/* Sign In Section */
body.page-home-v2 .mobile-signin {
    background: #ef4836;
    border: 1px solid #e5e5e5;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: center;
}

body.page-home-v2 .mobile-signin h3 {
    color: #fff;
    font-size: 16px;
    margin-bottom: 8px;
}

body.page-home-v2 .mobile-signin button {
    width: 100%;
    padding: 10px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px;
}

body.page-home-v2 .btn-register {
    background: #fff;
    color: #333;
    transition: background 0.3s ease, transform 0.2s ease;
}

body.page-home-v2 .btn-register:hover {
    background: #f5f5f5;
    transform: translateY(-2px);
}

body.page-home-v2 .btn-register:active {
    transform: translateY(0);
}

body.page-home-v2 .btn-signin {
    background: transparent;
    color: #fff;
    border: 2px solid #fff !important;
    transition: background 0.3s ease, transform 0.2s ease;
}

body.page-home-v2 .btn-signin:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
}

body.page-home-v2 .btn-signin:active {
    transform: translateY(0);
}

body.page-home-v2 .app-download {
    background: #fff;
    padding: 15px;
    margin-top: 10px;
    border-radius: 4px;
}

body.page-home-v2 .app-download.app-download-full {
    margin-top: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

body.page-home-v2 .app-download h4 {
    color: #ef4836;
    font-size: 12px;
    margin-bottom: 10px;
}

body.page-home-v2 .app-download img {
    width: 120px;
    height: 120px;
    margin: 10px auto;
    display: block;
}

body.page-home-v2 .app-download p {
    color: #ef4836;
    font-size: 13px;
    font-weight: 600;
}

/* ================= TRENDING PRODUCTS ================= */
body.page-home-v2 .trending-wrapper {
    background: #fff;
    margin-top: 24px;
}

body.page-home-v2 .trending-wrapper .container {
    padding: 40px 16px;
}

body.page-home-v2 .section-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
}

body.page-home-v2 .product-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
}

body.page-home-v2 .product-card {
    cursor: pointer;
    text-align: center;
}

body.page-home-v2 .product-img-wrapper {
    position: relative;
    background: #fff;
    padding: 20px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.page-home-v2 .product-img-wrapper span {
    position: absolute;
    background: #d9d9d9;
    opacity: 0;
    transition: opacity 0.2s ease;
}

body.page-home-v2 .bar-left {
    left: 12px;
    top: 12px;
    bottom: 12px;
    width: 8px;
}

body.page-home-v2 .bar-right {
    right: 12px;
    top: 12px;
    bottom: 12px;
    width: 8px;
}

body.page-home-v2 .bar-bottom {
    left: 12px;
    right: 12px;
    bottom: 12px;
    height: 8px;
}

body.page-home-v2 .product-card:hover span,
body.page-home-v2 .product-card.active span {
    opacity: 1;
}

body.page-home-v2 .product-img-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ================= ARTS & CRAFTS GRID ================= */
body.page-home-v2 .section-wrapper {
    background: #e5e5e5;
    padding: 30px 0;
}

body.page-home-v2 .section-container {
    width: 1200px;
    margin: auto;
    background: #fff;
    display: grid;
    grid-template-columns: 300px 1fr;
    border: 1px solid #e5e5e5;
}

body.page-home-v2 .left-big {
    background: #f3e8f3;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

body.page-home-v2 .left-big img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.page-home-v2 .right-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

body.page-home-v2 .grid-item {
    position: relative;
    border-right: 1px solid #eef1f6;
    border-bottom: 1px solid #eef1f6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px;
    cursor: pointer;
}

body.page-home-v2 .grid-item img {
    width: 100%;
    height: 120px;
    object-fit: contain;
    z-index: 1;
}

body.page-home-v2 .grid-item .product-title {
    margin-top: 10px;
    font-size: 13px;
    color: #666;
}

body.page-home-v2 .grid-item .bar-left,
body.page-home-v2 .grid-item .bar-right,
body.page-home-v2 .grid-item .bar-bottom {
    position: absolute;
    background: #d9d9d9;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 2;
}

body.page-home-v2 .grid-item .bar-left {
    left: 12px;
    top: 12px;
    bottom: 12px;
    width: 8px;
}

body.page-home-v2 .grid-item .bar-right {
    right: 12px;
    top: 12px;
    bottom: 12px;
    width: 8px;
}

body.page-home-v2 .grid-item .bar-bottom {
    left: 12px;
    right: 12px;
    bottom: 12px;
    height: 8px;
}

body.page-home-v2 .grid-item:hover .bar-left,
body.page-home-v2 .grid-item:hover .bar-right,
body.page-home-v2 .grid-item:hover .bar-bottom {
    opacity: 1;
}

/* ================= BRANDS ================= */
body.page-home-v2 .brands-wrapper {
    background: #e5e5e5;
    padding: 40px 20px 60px;
}

body.page-home-v2 .brands-container {
    width: 1200px;
    margin: auto;
}

body.page-home-v2 .brands-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

body.page-home-v2 .brands-title {
    font-size: 22px;
    font-weight: bold;
    color: #222;
}

body.page-home-v2 .view-all-link {
    color: #2f7cf6;
    font-size: 14px;
    text-decoration: none;
}

body.page-home-v2 .view-all-link:hover {
    text-decoration: underline;
}

body.page-home-v2 .brands-grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 26px;
    margin-bottom: 26px;
}

body.page-home-v2 .brand-item {
    display: flex;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.25s ease;
}

body.page-home-v2 .brand-item:hover {
    transform: translateY(-6px);
}

body.page-home-v2 .brand-logo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

body.page-home-v2 .brand-logo img {
    width: 90%;
    height: 90%;
    object-fit: contain;
}

/* ================= EASY SOURCING ================= */
body.page-home-v2 .easy-sourcing-wrapper {
    padding: 40px 0;
    background: #e5e5e5;
}

body.page-home-v2 .easy-sourcing-container {
    width: 1200px;
    margin: auto;
    height: 340px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    background: url("assets/Container (3).png") center/cover no-repeat;
    position: relative;
    overflow: hidden;
}

body.page-home-v2 .easy-left {
    padding: 40px;
    max-width: 520px;
    position: relative;
    z-index: 2;
}

body.page-home-v2 .easy-left::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0.95),
            rgba(255, 255, 255, 0.75),
            rgba(255, 255, 255, 0));
    z-index: -1;
}

body.page-home-v2 .easy-left h2 {
    font-size: 32px;
    margin-bottom: 10px;
}

body.page-home-v2 .easy-left p {
    font-size: 14px;
    color: #555;
    margin-bottom: 18px;
}

body.page-home-v2 .easy-left ul {
    list-style: none;
    margin-bottom: 18px;
}

body.page-home-v2 .easy-left li {
    font-size: 14px;
    color: #444;
    margin-bottom: 6px;
}

body.page-home-v2 .easy-left a {
    font-weight: bold;
    color: #111;
    text-decoration: none;
}

body.page-home-v2 .easy-right {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

body.page-home-v2 .form-card {
    background: #fff;
    padding: 26px;
    width: 100%;
    max-width: 520px;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

body.page-home-v2 .form-card h3 {
    margin-bottom: 14px;
}

body.page-home-v2 .form-card input,
body.page-home-v2 .form-card textarea,
body.page-home-v2 .form-card select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    margin-bottom: 12px;
}

body.page-home-v2 .form-row {
    display: grid;
    grid-template-columns: 1fr 150px;
    gap: 10px;
}

body.page-home-v2 .form-card button {
    background: #f44336;
    color: #fff;
    border: none;
    padding: 12px;
    cursor: pointer;
    width: 100%;
}

/* ================= SECURED BAR ================= */
body.page-home-v2 .secured-bar {
    background: #ef3b36;
    height: 56px;
    display: flex;
    align-items: center;
}

body.page-home-v2 .secured-bar-inner {
    width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
}

body.page-home-v2 .secured-left img {
    height: 40px;
}

body.page-home-v2 .secured-center {
    text-align: center;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}

body.page-home-v2 .secured-right a {
    background: #fff;
    color: #ef3b36;
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 14px;
    text-decoration: none;
}

/* ================= FOOTER ================= */
body.page-home-v2 .footer {
    background: #d0d3d4;
    padding: 40px 0 20px;
}

body.page-home-v2 .footer-inner {
    width: 1200px;
    margin: auto;
}

body.page-home-v2 .footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

body.page-home-v2 .footer h4 {
    font-size: 14px;
    margin-bottom: 10px;
}

body.page-home-v2 .footer-accept-title {
    margin-top: 14px;
}

body.page-home-v2 .footer-community-title {
    margin-top: 16px;
}

body.page-home-v2 .footer ul {
    list-style: none;
}

body.page-home-v2 .footer li {
    font-size: 12px;
    color: #333;
    margin-bottom: 6px;
    cursor: pointer;
}

body.page-home-v2 .footer li:hover {
    text-decoration: underline;
}

body.page-home-v2 .cards {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
}

body.page-home-v2 .cards img {
    width: 100%;
    height: 24px;
    object-fit: contain;
}

body.page-home-v2 .trustpilot {
    margin-top: 14px;
}

body.page-home-v2 .trustpilot img {
    height: 20px;
}

body.page-home-v2 .trustpilot p {
    font-size: 11px;
    margin-top: 6px;
}

body.page-home-v2 .newsletter {
    display: flex;
    max-width: 420px;
    height: 40px;
    overflow: hidden;
    border-radius: 6px;
    margin-bottom: 16px;
    background: #fff;
}

body.page-home-v2 .newsletter input[type="email"] {
    flex: 1;
    border: none;
    padding: 0 14px;
    font-size: 14px;
    outline: none;
    background: #fff;
    color: #333;
    height: 100%;
}

body.page-home-v2 .newsletter button {
    background-color: #333;
    color: #f1cbb0;
    border: none;
    padding: 0 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    height: 100%;
    transition: background 0.2s ease;
}

body.page-home-v2 .newsletter button:hover {
    background-color: #000;
}

body.page-home-v2 .footer-apps {
    margin-top: 16px;
}

body.page-home-v2 .apps-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 12px;
}

body.page-home-v2 .apps-buttons {
    display: flex;
    gap: 14px;
}

body.page-home-v2 .app-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid #bfc3c5;
    border-radius: 8px;
    text-decoration: none;
    min-width: 190px;
}

body.page-home-v2 .app-btn img {
    height: 26px;
}

body.page-home-v2 .app-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

body.page-home-v2 .app-text span {
    font-size: 11px;
    color: #333;
}

body.page-home-v2 .app-text strong {
    font-size: 15px;
    font-weight: 700;
    color: #000;
}

body.page-home-v2 .socials {
    margin-top: 14px;
    display: flex;
    gap: 14px;
}

body.page-home-v2 .socials img {
    height: 18px;
    opacity: 0.85;
}

body.page-home-v2 .footer-bottom {
    margin-top: 30px;
    border-top: 1px solid #999;
    padding-top: 12px;
    text-align: center;
    font-size: 11px;
    color: #333;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 1250px) {

    body.page-home-v2 .container,
    body.page-home-v2 .section-container,
    body.page-home-v2 .brands-container,
    body.page-home-v2 .easy-sourcing-container,
    body.page-home-v2 .secured-bar-inner,
    body.page-home-v2 .footer-inner {
        width: 100%;
        padding-left: 12px;
        padding-right: 12px;
    }
}

@media (max-width: 992px) {

    /* Show mobile sections */
    body.page-home-v2 .mobile-sections-categories,
    body.page-home-v2 .mobile-sections-signin {
        display: block;
    }

    /* Hide desktop sidebar and right panel */
    body.page-home-v2 .hero-categories,
    body.page-home-v2 .hero-right {
        display: none;
    }

    body.page-home-v2 .hero-layout {
        grid-template-columns: 1fr;
    }

    body.page-home-v2 .product-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    body.page-home-v2 .section-container {
        grid-template-columns: 1fr;
    }

    body.page-home-v2 .right-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    body.page-home-v2 .grid-item img {
        height: 100px;
    }

    body.page-home-v2 .brands-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }

    body.page-home-v2 .brand-logo {
        width: 100px;
        height: 100px;
    }

    body.page-home-v2 .easy-sourcing-container {
        grid-template-columns: 1fr;
        height: auto;
        background: #f5f5f5;
    }

    body.page-home-v2 .easy-left::before {
        background: #fff;
    }

    body.page-home-v2 .form-row {
        grid-template-columns: 1fr;
    }

    body.page-home-v2 .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    body.page-home-v2 .apps-buttons {
        flex-direction: column;
    }

    body.page-home-v2 .secured-bar-inner {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 8px;
    }

    body.page-home-v2 .secured-left,
    body.page-home-v2 .secured-right {
        display: none;
    }
}

@media (max-width: 768px) {
    body.page-home-v2 .product-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    body.page-home-v2 .product-img-wrapper {
        height: 120px;
        padding: 10px;
    }

    body.page-home-v2 .brands-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    body.page-home-v2 .brand-logo {
        width: 85px;
        height: 85px;
    }

    body.page-home-v2 .footer-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    body.page-home-v2 .section-title {
        font-size: 14px;
    }

    body.page-home-v2 .brands-title {
        font-size: 18px;
    }

    body.page-home-v2 .product-img-wrapper {
        height: 140px;
    }

    body.page-home-v2 .easy-left h2 {
        font-size: 24px;
    }

    body.page-home-v2 .form-card {
        padding: 20px;
    }
}

/* Header */
body.page-header * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

body.page-header body {
    background: #f5f5f5;
}

/* ================= HEADER ================= */
body.page-header .header {
    background: #fff;
    border-bottom: 2px solid #ddd;
    position: sticky;
    top: 0;
    z-index: 1000;
}

body.page-header .header-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding: 12px 20px;
    gap: 20px;
}

/* ================= HAMBURGER MENU ================= */
body.page-header .hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
}

body.page-header .hamburger span {
    width: 24px;
    height: 3px;
    background: #333;
    border-radius: 2px;
    transition: all 0.3s ease;
}

body.page-header .hamburger.active span:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px);
}

body.page-header .hamburger.active span:nth-child(2) {
    opacity: 0;
}

body.page-header .hamburger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

/* ================= MOBILE DRAWER ================= */
body.page-header .mobile-drawer {
    position: fixed;
    top: 0;
    left: -100%;
    width: 280px;
    height: 100vh;
    background: #fff;
    z-index: 2000;
    transition: left 0.3s ease;
    overflow-y: auto;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}

body.page-header .mobile-drawer.active {
    left: 0;
}

body.page-header .drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1999;
    display: none;
}

body.page-header .drawer-overlay.active {
    display: block;
}

body.page-header .drawer-header {
    padding: 20px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

body.page-header .drawer-close {
    background: transparent;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #666;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.page-header .drawer-menu {
    padding: 10px 0;
}

body.page-header .drawer-menu-item {
    padding: 15px 20px;
    cursor: pointer;
    font-size: 15px;
    border-bottom: 1px solid #f8f8f8;
}

body.page-header .drawer-menu-item:hover {
    background: #f8f8f8;
}

body.page-header .drawer-post-add {
    background: #ef3b36;
    color: #fff;
    margin: 20px;
    padding: 12px;
    border-radius: 4px;
    text-align: center;
    font-weight: 600;
    cursor: pointer;
}

body.page-header .drawer-post-submenu {
    margin: 0 20px 20px;
    border: 1px solid #f0f0f0;
    border-radius: 4px;
    overflow: hidden;
    display: none;
}

body.page-header .drawer-post-submenu.active {
    display: block;
}

body.page-header .drawer-post-submenu-item {
    padding: 12px 15px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    font-size: 14px;
}

body.page-header .drawer-post-submenu-item:last-child {
    border-bottom: none;
}

body.page-header .drawer-post-submenu-item:hover {
    background: #f8f8f8;
}

body.page-header .drawer-signin-btn {
    margin: 20px;
    background: #000;
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    width: calc(100% - 40px);
}

body.page-header .drawer-user-greeting {
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 15px;
    font-weight: 500;
}

body.page-header .drawer-language {
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #f8f8f8;
    cursor: pointer;
}

body.page-header .drawer-language:hover {
    background: #f8f8f8;
}

/* ================= LOGO ================= */
body.page-header .logo {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    white-space: nowrap;
}

body.page-header .logo-icon {
    width: 32px;
    height: 32px;
    background: #ef3b36;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 900;
    font-size: 20px;
}

body.page-header .logo-text {
    color: #000;
    font-size: 18px;
    font-weight: 700;
}

body.page-header .logo-img {
    width: auto;
    height: 40px;
}

body.page-header .logo-img-large {
    width: auto;
    height: 50px;
}

/* ================= SEARCH BAR ================= */
body.page-header .search-container {
    flex: 1;
    max-width: 600px;
    position: relative;
}

body.page-header .search-wrapper {
    display: flex;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
}

body.page-header .search-wrapper input {
    flex: 1;
    padding: 10px 15px;
    border: none;
    outline: none;
    font-size: 14px;
}

body.page-header .search-wrapper button {
    background: #333;
    color: #fff;
    border: none;
    padding: 0 20px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.page-header .search-wrapper button:hover {
    background: #000;
}

body.page-header .search-icon {
    width: 18px;
    height: 18px;
}

/* ================= DESKTOP NAV ================= */
body.page-header .desktop-nav {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* ================= POST AN ADD DROPDOWN ================= */
body.page-header .post-add-container {
    position: relative;
}

body.page-header .post-add-btn {
    background: #ef3b36;
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}

body.page-header .post-add-btn:hover {
    background: #d63631;
}

body.page-header .post-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 220px;
    display: none;
    z-index: 100;
}

body.page-header .post-dropdown.active {
    display: block;
}

body.page-header .post-dropdown-item {
    padding: 12px 20px;
    cursor: pointer;
    font-size: 14px;
    border-bottom: 1px solid #f0f0f0;
}

body.page-header .post-dropdown-item:last-child {
    border-bottom: none;
}

body.page-header .post-dropdown-item:hover {
    background: #f8f8f8;
}

/* ================= LANGUAGE/COUNTRY DROPDOWN ================= */
body.page-header .language-container {
    position: relative;
}

body.page-header .language-btn {
    background: #f5f5f5;
    border: 1px solid #ddd;
    padding: 8px 16px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
}

body.page-header .language-btn:hover {
    background: #ececec;
}

body.page-header .flag-icon {
    width: 20px;
    height: 20px;
    border-radius: 2px;
    overflow: hidden;
}

body.page-header .flag-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.page-header .language-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 280px;
    display: none;
    padding: 20px;
    z-index: 100;
}

body.page-header .language-dropdown.active {
    display: block;
}

body.page-header .dropdown-section {
    margin-bottom: 20px;
}

body.page-header .dropdown-section:last-child {
    margin-bottom: 0;
}

body.page-header .dropdown-section h4 {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

body.page-header .dropdown-option {
    padding: 10px;
    cursor: pointer;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
}

body.page-header .dropdown-option:hover {
    background: #f8f8f8;
}

body.page-header .proceed-btn {
    width: 100%;
    background: #000;
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 15px;
}

body.page-header .proceed-btn:hover {
    background: #333;
}

/* ================= ACCOUNT DROPDOWN ================= */
body.page-header .account-container {
    position: relative;
}

body.page-header .account-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    padding: 8px;
}

body.page-header .account-btn:hover {
    background: #f5f5f5;
    border-radius: 4px;
}

body.page-header .account-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.page-header .account-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.page-header .account-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 240px;
    display: none;
    z-index: 100;
}

body.page-header .account-dropdown.active {
    display: block;
}

body.page-header .account-greeting {
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 15px;
    font-weight: 500;
}

body.page-header .signin-btn {
    margin: 15px 20px;
    background: #000;
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    width: calc(100% - 40px);
}

body.page-header .signin-btn:hover {
    background: #333;
}

body.page-header .account-dropdown-item {
    padding: 12px 20px;
    cursor: pointer;
    font-size: 14px;
    border-bottom: 1px solid #f0f0f0;
}

body.page-header .account-dropdown-item:last-child {
    border-bottom: none;
}

body.page-header .account-dropdown-item:hover {
    background: #f8f8f8;
}

/* ================= FAVORITES & CART ================= */
body.page-header .icon-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
}

body.page-header .icon-btn:hover {
    background: #f5f5f5;
    border-radius: 4px;
}

body.page-header .icon-btn svg {
    width: 24px;
    height: 24px;
    stroke: #333;
    fill: none;
    stroke-width: 2;
}

/* ================= CART DROPDOWN ================= */
body.page-header .cart-container {
    position: relative;
}

body.page-header .cart-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    min-width: 420px;
    display: none;
    z-index: 100;
}

body.page-header .cart-dropdown.active {
    display: block;
}

body.page-header .cart-header {
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 15px;
    font-weight: 600;
    background: #f8f8f8;
}

body.page-header .cart-item {
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    gap: 15px;
}

body.page-header .cart-item-image {
    width: 80px;
    height: 80px;
    background: #f5f5f5;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
}

body.page-header .cart-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.page-header .cart-item-details {
    flex: 1;
    min-width: 0;
}

body.page-header .cart-item-title {
    font-size: 13px;
    line-height: 1.4;
    margin-bottom: 8px;
}

body.page-header .cart-item-rating {
    display: flex;
    gap: 2px;
    margin-bottom: 8px;
}

body.page-header .star {
    width: 12px;
    height: 12px;
    color: #4caf50;
}

body.page-header .cart-item-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

body.page-header .quantity-btn {
    width: 28px;
    height: 28px;
    border: 1px solid #ddd;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

body.page-header .quantity-btn:hover {
    background: #f5f5f5;
}

body.page-header .quantity {
    font-size: 14px;
    min-width: 20px;
    text-align: center;
}

body.page-header .delete-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: #999;
}

body.page-header .delete-btn:hover {
    color: #ef3b36;
}

body.page-header .cart-item-price {
    font-size: 14px;
    font-weight: 600;
    text-align: right;
    flex-shrink: 0;
}

body.page-header .cart-footer {
    padding: 15px 20px;
    background: #f8f8f8;
}

body.page-header .cart-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    flex-direction: column;
    gap: 10px;
}

body.page-header .cart-total-price {
    font-weight: 600;
    font-size: 16px;
}

body.page-header .checkout-btn {
    width: 100%;
    background: #333;
    color: #fff;
    border: none;
    padding: 12px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

body.page-header .checkout-btn:hover {
    background: #000;
}

/* ================= MOBILE ONLY ICONS ================= */
body.page-header .mobile-icons {
    display: none;
    align-items: center;
    gap: 8px;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 992px) {
    body.page-header .search-container {
        max-width: 400px;
    }
}

@media (max-width: 768px) {
    body.page-header .hamburger {
        display: flex;
    }

    body.page-header .desktop-nav {
        display: none;
    }

    body.page-header .mobile-icons {
        display: flex;
    }

    body.page-header .header-inner {
        gap: 12px;
        flex-wrap: wrap;
    }

    body.page-header .search-container {
        order: 3;
        width: 100%;
        max-width: 100%;
    }

    body.page-header .search-wrapper input {
        padding: 8px 12px;
        font-size: 13px;
    }

    body.page-header .search-wrapper button {
        padding: 0 12px;
    }

    body.page-header .logo img {
        height: 40px !important;
    }

    body.page-header .icon-btn {
        padding: 6px;
    }

    body.page-header .icon-btn svg,
    body.page-header .icon-btn img {
        width: 22px;
        height: 22px;
    }

    body.page-header .cart-dropdown {
        position: fixed;
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        border-radius: 12px 12px 0 0;
        min-width: auto;
        max-height: 80vh;
        overflow-y: auto;
    }

    body.page-header .cart-item {
        flex-wrap: wrap;
    }

    body.page-header .cart-item-price {
        width: 100%;
        text-align: left;
        margin-top: 8px;
    }
}

@media (max-width: 480px) {
    body.page-header .header-inner {
        padding: 10px 12px;
    }

    body.page-header .logo img {
        height: 35px !important;
    }

    body.page-header .search-wrapper input {
        font-size: 12px;
        padding: 7px 10px;
    }

    body.page-header .search-wrapper button img {
        width: 16px !important;
        height: 16px !important;
    }

    body.page-header .icon-btn svg,
    body.page-header .icon-btn img {
        width: 20px;
        height: 20px;
    }
}

/* Admin dashboard */
body.page-admin-dashboard * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body.page-admin-dashboard body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Arial;
    background: #e6e6e6;
    color: #111;
}

/* ===== APP LAYOUT ===== */
body.page-admin-dashboard .app {
    display: flex;
    min-height: 100vh;
}

/* ===== MOBILE HEADER ===== */
body.page-admin-dashboard .mobile-header {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 56px;
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
    z-index: 1000;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
}

body.page-admin-dashboard .mobile-header-title {
    font-size: 16px;
    font-weight: 700;
}

body.page-admin-dashboard .menu-toggle {
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

body.page-admin-dashboard .menu-toggle:active {
    background: #f5f5f5;
}

body.page-admin-dashboard .menu-toggle svg {
    width: 24px;
    height: 24px;
    stroke: #111;
    fill: none;
    stroke-width: 2;
}

/* ===== SIDEBAR ===== */
body.page-admin-dashboard .sidebar {
    width: 260px;
    height: 100vh;
    background: #e6e6e6;
    padding: 18px 12px;
    border-right: 1px solid #d2d2d2;
    position: relative;
    display: block;
    gap: 0;
    border: none;
    border-radius: 0;
}

body.page-admin-dashboard .sidebar-title {
    font-size: 12px;
    color: #777;
    margin: 16px 12px 8px;
}

body.page-admin-dashboard .menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-radius: 14px;
    font-size: 15px;
    color: #555;
    cursor: pointer;
    transition: background 0.15s ease;
    user-select: none;
}

body.page-admin-dashboard .menu-item:hover {
    background: #fff;
}

body.page-admin-dashboard .menu-item.active {
    background: #fff;
    color: #000;
    font-weight: 600;
}

body.page-admin-dashboard .menu-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

body.page-admin-dashboard .menu-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.page-admin-dashboard .menu-icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

body.page-admin-dashboard .arrow svg {
    width: 16px;
    height: 16px;
    stroke: #777;
}

/* ===== MAIN ===== */
body.page-admin-dashboard .main {
    flex: 1;
    padding: 18px;
}

/* 2 columns: center + right (always visible) */
body.page-admin-dashboard .shell {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 18px;
    align-items: start;
}

/* ===== RIGHT COLUMN (ALWAYS ON ALL PAGES) ===== */
body.page-admin-dashboard .rightCol {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

body.page-admin-dashboard .panel {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

body.page-admin-dashboard .panelHd {
    padding: 14px 14px 10px;
    font-size: 13px;
    font-weight: 800;
    color: #111;
}

/* Cart */
body.page-admin-dashboard .cartWrap {
    padding: 0 14px 14px;
}

body.page-admin-dashboard .cartItem {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 0 12px;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 10px;
}

body.page-admin-dashboard .cartImg {
    width: 58px;
    height: 46px;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    background: #fafafa;
    flex-shrink: 0;
}

body.page-admin-dashboard .cartImg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.page-admin-dashboard .cartMeta {
    min-width: 0;
    flex: 1;
}

body.page-admin-dashboard .cartTitle {
    font-size: 10px;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 6px;
}

body.page-admin-dashboard .qtyRow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

body.page-admin-dashboard .qtyBox {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f1f1f1;
    border-radius: 6px;
    padding: 4px 6px;
    border: 1px solid #e7e7e7;
}

body.page-admin-dashboard .qBtn {
    width: 18px;
    height: 18px;
    border: none;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 900;
    font-size: 12px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.page-admin-dashboard .qVal {
    min-width: 14px;
    text-align: center;
    font-size: 10px;
    font-weight: 900;
}

body.page-admin-dashboard .cartPrice {
    font-size: 10px;
    font-weight: 900;
}

body.page-admin-dashboard .cartBar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 0 0;
}

body.page-admin-dashboard .checkoutBtn {
    background: #111;
    color: #fff;
    border: none;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
}

body.page-admin-dashboard .cartTotal {
    font-size: 11px;
    font-weight: 900;
}

/* Promotions */
body.page-admin-dashboard .promoBox {
    height: 340px;
}

body.page-admin-dashboard .promoInner {
    height: calc(340px - 44px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 14px;
    padding: 20px;
}

body.page-admin-dashboard .promoIcon {
    width: 64px;
    height: 64px;
    opacity: 0.55;
}

body.page-admin-dashboard .promoText {
    font-size: 14px;
    font-weight: 900;
}

/* ===== CENTER VIEW WRAPPER ===== */
body.page-admin-dashboard .view {
    display: none;
}

body.page-admin-dashboard .view.active {
    display: block;
}

/* ===== DASHBOARD VIEW ===== */
body.page-admin-dashboard .dashCard {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    min-height: 650px;
}

body.page-admin-dashboard .dashTop {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    border-bottom: 1px solid #eee;
    background: #fff;
}

body.page-admin-dashboard .dashAvatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: #fafafa;
}

body.page-admin-dashboard .dashInfo h3 {
    font-size: 14px;
    font-weight: 800;
}

body.page-admin-dashboard .dashInfo a {
    display: inline-block;
    margin-top: 2px;
    font-size: 12px;
    color: #1a73e8;
    text-decoration: none;
}

body.page-admin-dashboard .dashStatsWrap {
    padding: 18px 22px;
}

body.page-admin-dashboard .dashStats {
    background: #f6f6f6;
    border-radius: 10px;
    padding: 22px 10px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
}

body.page-admin-dashboard .sNum {
    font-size: 28px;
    font-weight: 900;
    display: block;
}

body.page-admin-dashboard .sLab {
    font-size: 11px;
    color: #666;
}

body.page-admin-dashboard .dashSectionTitle {
    padding: 18px 22px;
    border-top: 1px solid #eee;
    font-size: 14px;
    font-weight: 800;
}

body.page-admin-dashboard .dashDivider {
    height: 1px;
    background: #eee;
}

body.page-admin-dashboard .dashEmpty {
    text-align: center;
    padding: 70px 0 90px;
}

body.page-admin-dashboard .emptyIcon {
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    border-radius: 10px;
    background: #f3f3f3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #bbb;
}

body.page-admin-dashboard .dashEmpty p {
    font-size: 13px;
    color: #666;
    margin-bottom: 14px;
}

body.page-admin-dashboard .dashEmpty button {
    padding: 9px 22px;
    border: 1.5px solid #111;
    background: #fff;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

body.page-admin-dashboard .dashEmpty button:hover {
    background: #111;
    color: #fff;
}

/* ===== MESSAGES VIEW ===== */
body.page-admin-dashboard .msgShell {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    min-height: 650px;
    display: grid;
    grid-template-columns: 290px 1fr;
}

body.page-admin-dashboard .chatList {
    border-right: 1px solid #ededed;
    background: #fff;
}

body.page-admin-dashboard .chatListTop {
    padding: 14px 14px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

body.page-admin-dashboard .smallMsgIco {
    width: 18px;
    height: 18px;
    opacity: 0.75;
}

body.page-admin-dashboard .searchWrap {
    flex: 1;
    background: #f1f1f1;
    border-radius: 14px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

body.page-admin-dashboard .searchWrap svg {
    width: 14px;
    height: 14px;
    opacity: 0.65;
}

body.page-admin-dashboard .searchWrap input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 12px;
    color: #333;
}

body.page-admin-dashboard .chatItems {
    height: calc(650px - 58px);
    overflow: auto;
    padding: 6px 0;
}

body.page-admin-dashboard .chatItems::-webkit-scrollbar {
    width: 0;
    height: 0;
}

body.page-admin-dashboard .chatItems {
    scrollbar-width: none;
}

body.page-admin-dashboard .cItem {
    padding: 10px 14px;
    display: flex;
    gap: 10px;
    cursor: pointer;
    transition: 0.1s ease;
}

body.page-admin-dashboard .cItem:hover {
    background: #f6f6f6;
}

body.page-admin-dashboard .cItem.active {
    background: #efefef;
}

body.page-admin-dashboard .uAvatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid #d9d9d9;
    background: #f4f4f4;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

body.page-admin-dashboard .uAvatar svg {
    width: 18px;
    height: 18px;
    opacity: 0.65;
}

body.page-admin-dashboard .cMeta {
    min-width: 0;
}

body.page-admin-dashboard .cName {
    font-size: 12px;
    font-weight: 900;
    color: #111;
    line-height: 1.1;
}

body.page-admin-dashboard .cSub {
    font-size: 10px;
    color: #8b8b8b;
    margin-top: 2px;
}

body.page-admin-dashboard .cPrev {
    font-size: 10px;
    color: #555;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 210px;
}

body.page-admin-dashboard .chatArea {
    display: flex;
    flex-direction: column;
    height: 650px;
    background: #fff;
}

body.page-admin-dashboard .chatHeader {
    padding: 14px 18px;
    border-bottom: 1px solid #ededed;
}

body.page-admin-dashboard .chatHeaderTitle {
    font-size: 14px;
    font-weight: 900;
}

body.page-admin-dashboard .chatHeaderTime {
    font-size: 10px;
    color: #8b8b8b;
    margin-top: 2px;
}

body.page-admin-dashboard .chatBody {
    flex: 1;
    padding: 18px;
    background: #fff;
    overflow: auto;
}

body.page-admin-dashboard .chatBody::-webkit-scrollbar {
    width: 0;
    height: 0;
}

body.page-admin-dashboard .chatBody {
    scrollbar-width: none;
}

body.page-admin-dashboard .msgRow {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    align-items: flex-start;
}

body.page-admin-dashboard .bubble {
    max-width: 62%;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 11px;
    line-height: 1.45;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}

body.page-admin-dashboard .bubble.recv {
    background: #fff;
    border: 1px solid #ededed;
}

body.page-admin-dashboard .bubble.send {
    margin-left: auto;
    background: #e2e2e2;
    border: 1px solid #dedede;
}

body.page-admin-dashboard .chatFooter {
    border-top: 1px solid #ededed;
    padding: 12px 16px 16px;
    background: #fff;
}

body.page-admin-dashboard .footerIcons {
    display: flex;
    gap: 10px;
    padding: 6px 0 10px;
}

body.page-admin-dashboard .footerIcons button {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    opacity: 0.85;
}

body.page-admin-dashboard .footerIcons svg {
    width: 16px;
    height: 16px;
}

body.page-admin-dashboard .inputRow {
    background: #efefef;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #e2e2e2;
}

body.page-admin-dashboard .inputRow input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 12px;
    color: #111;
}

body.page-admin-dashboard .sendBtn {
    background: #000;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

/* ===== ICONS ===== */
body.page-admin-dashboard .iconBtn {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
}

body.page-admin-dashboard .iconBtn:hover {
    background: #f3f3f3;
}

body.page-admin-dashboard .trashSvg {
    width: 16px;
    height: 16px;
    stroke: #111;
    fill: none;
    stroke-width: 2;
}

/* ===== SAVED VIEW ===== */
body.page-admin-dashboard .boxCard {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    padding: 18px 20px;
    min-height: 650px;
}

body.page-admin-dashboard .boxTitle {
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 14px;
}

body.page-admin-dashboard .saved-item {
    border-top: 1px solid #e2e2e2;
}

body.page-admin-dashboard .saved-item:first-child {
    border-top: none;
}

body.page-admin-dashboard .saved-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 6px;
    cursor: pointer;
}

body.page-admin-dashboard .saved-header:hover {
    background: #f8f8f8;
}

body.page-admin-dashboard .saved-img {
    width: 46px;
    height: 36px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

body.page-admin-dashboard .saved-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

body.page-admin-dashboard .saved-info {
    flex: 1;
    min-width: 0;
}

body.page-admin-dashboard .saved-title {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.page-admin-dashboard .saved-price {
    font-size: 12px;
    font-weight: 800;
}

body.page-admin-dashboard .saved-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

body.page-admin-dashboard .buy-btn {
    font-size: 11px;
    padding: 4px 12px;
    border-radius: 14px;
    border: 1.5px solid #000;
    background: #fff;
    cursor: pointer;
    font-weight: 900;
}

body.page-admin-dashboard .buy-btn:hover {
    background: #000;
    color: #fff;
}

body.page-admin-dashboard .saved-body {
    display: none;
    padding: 14px 58px 16px;
    background: #fafafa;
    border-top: 1px solid #e2e2e2;
}

body.page-admin-dashboard .saved-item.open .saved-body {
    display: block;
}

body.page-admin-dashboard .details {
    font-size: 12px;
    color: #444;
    line-height: 1.6;
}

/* ===== ORDERS VIEW ===== */
body.page-admin-dashboard .orderRow {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 6px;
    border-top: 1px solid #e2e2e2;
    cursor: pointer;
}

body.page-admin-dashboard .orderRow:first-of-type {
    border-top: none;
}

body.page-admin-dashboard .orderRow:hover {
    background: #f8f8f8;
}

body.page-admin-dashboard .orderImg {
    width: 46px;
    height: 36px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.page-admin-dashboard .orderImg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

body.page-admin-dashboard .orderMeta {
    flex: 1;
    min-width: 0;
}

body.page-admin-dashboard .orderTitle {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 6px;
}

body.page-admin-dashboard .orderLine {
    display: flex;
    gap: 22px;
    font-size: 12px;
    color: #444;
    flex-wrap: wrap;
}

body.page-admin-dashboard .orderPrice {
    font-weight: 900;
    color: #111;
}

body.page-admin-dashboard .orderStatus i {
    font-style: italic;
    font-weight: 700;
}

body.page-admin-dashboard .orderTdx {
    color: #555;
    text-decoration: underline;
}

body.page-admin-dashboard .orderBody {
    display: none;
    padding: 14px 58px 16px;
    background: #fafafa;
    border-top: 1px solid #e2e2e2;
}

body.page-admin-dashboard .orderItem.open .orderBody {
    display: block;
}

/* ===== QUOTES VIEW ===== */
body.page-admin-dashboard .quoteWrap {
    border-top: 1px solid #e2e2e2;
}

body.page-admin-dashboard .quoteWrap:first-of-type {
    border-top: none;
}

body.page-admin-dashboard .qHeader {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 12px;
    position: relative;
    cursor: pointer;
}

body.page-admin-dashboard .qHeader:hover {
    background: #f8f8f8;
}

body.page-admin-dashboard .qAvatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #e0e0e0;
    flex-shrink: 0;
}

body.page-admin-dashboard .qMain {
    flex: 1;
    min-width: 0;
}

body.page-admin-dashboard .qNameRow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

body.page-admin-dashboard .qName {
    font-size: 14px;
    font-weight: 900;
}

body.page-admin-dashboard .qShield {
    font-size: 14px;
}

body.page-admin-dashboard .qBadge {
    font-size: 11px;
    padding: 2px 10px;
    border-radius: 12px;
    background: #fff3cd;
    border: 1px solid #ffe69c;
    font-weight: 900;
}

body.page-admin-dashboard .qLoc {
    font-size: 12px;
    color: #666;
    margin-bottom: 6px;
}

body.page-admin-dashboard .qOffer {
    font-size: 12px;
    font-weight: 900;
}

body.page-admin-dashboard .qActions {
    position: absolute;
    top: 14px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 88px;
}

body.page-admin-dashboard .qBtn {
    font-size: 11px;
    padding: 6px 12px;
    border-radius: 16px;
    cursor: pointer;
    font-weight: 700;
    background: #fff;
    border: 1.5px solid #000;
    white-space: nowrap;
    line-height: 1;
    width: 100%;
    text-align: center;
}

body.page-admin-dashboard .qBtn.reject {
    border: 1px solid #999;
}

body.page-admin-dashboard .qBtn:hover {
    background: #000;
    color: #fff;
}

body.page-admin-dashboard .qBtn.reject:hover {
    background: #444;
    color: #fff;
    border-color: #444;
}

body.page-admin-dashboard .qBody {
    display: none;
    background: #f6f6f6;
    border-top: 1px solid #e2e2e2;
    padding: 14px;
    gap: 14px;
}

body.page-admin-dashboard .quoteItem.open .qBody {
    display: flex;
}

body.page-admin-dashboard .qProdImg {
    width: 120px;
    height: 90px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

body.page-admin-dashboard .qProdImg img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

body.page-admin-dashboard .qProdInfo h4 {
    font-size: 13px;
    font-weight: 900;
    margin-bottom: 10px;
}

body.page-admin-dashboard .qDetails {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 4px 20px;
    font-size: 12px;
}

body.page-admin-dashboard .qLabel {
    font-weight: 900;
}

body.page-admin-dashboard .qClosed {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px;
    border-top: 1px solid #e2e2e2;
    cursor: pointer;
}

body.page-admin-dashboard .qClosed:hover {
    background: #f8f8f8;
}

body.page-admin-dashboard .qClosed .qAvatar {
    width: 32px;
    height: 32px;
}

body.page-admin-dashboard .qClosedText {
    font-size: 12px;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.page-admin-dashboard .qClosedPrice {
    font-size: 12px;
    font-weight: 900;
}

body.page-admin-dashboard .quoteItem.open .qClosed {
    display: none;
}

body.page-admin-dashboard .quoteItem:not(.open) .qHeader {
    display: none;
}

body.page-admin-dashboard .qty-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

body.page-admin-dashboard .qty-box {
    display: flex;
    align-items: center;
    height: 28px;
    border: 1px solid #cfcfcf;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

body.page-admin-dashboard .qty-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: #f3f3f3;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    color: #111;
}

body.page-admin-dashboard .qty-btn:hover {
    background: #e5e5e5;
}

body.page-admin-dashboard .qty-value {
    width: 34px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
}

body.page-admin-dashboard .trash-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

body.page-admin-dashboard .trash-btn svg {
    width: 18px;
    height: 18px;
    stroke: #000;
}

body.page-admin-dashboard .trash-btn:hover svg {
    stroke: #555;
}

/* =====================================================
         RESPONSIVE STYLES
      ===================================================== */
@media (max-width: 1100px) {
    body.page-admin-dashboard .shell {
        grid-template-columns: 1fr;
    }

    body.page-admin-dashboard .rightCol {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
}

@media (max-width: 860px) {
    body.page-admin-dashboard {
        overflow-x: hidden;
    }

    /* Show mobile header */
    body.page-admin-dashboard .mobile-header {
        display: flex;
    }

    /* Hide desktop sidebar */
    body.page-admin-dashboard .sidebar {
        position: fixed;
        top: 56px;
        left: -260px;
        height: calc(100vh - 56px);
        z-index: 999;
        transition: left 0.3s ease;
    }

    body.page-admin-dashboard .sidebar.open {
        left: 0;
    }

    /* Add overlay */
    body.page-admin-dashboard .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 998;
    }

    body.page-admin-dashboard .sidebar-overlay.active {
        display: block;
    }

    /* Adjust main content */
    body.page-admin-dashboard .main {
        padding: 72px 12px 12px;
        width: 100%;
    }

    /* Stack right column */
    body.page-admin-dashboard .rightCol {
        display: flex;
        flex-direction: column;
    }

    /* Messages layout */
    body.page-admin-dashboard .msgShell {
        grid-template-columns: 1fr;
        min-height: 500px;
    }

    body.page-admin-dashboard .chatList {
        border-right: none;
        border-bottom: 1px solid #ededed;
    }

    body.page-admin-dashboard .chatItems {
        height: auto;
        max-height: 200px;
    }

    body.page-admin-dashboard .chatArea {
        height: 500px;
    }

    /* Dashboard stats */
    body.page-admin-dashboard .dashStats {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 16px;
    }

    body.page-admin-dashboard .sNum {
        font-size: 24px;
    }

    /* Adjust card min-heights */
    body.page-admin-dashboard .dashCard,
    body.page-admin-dashboard .boxCard,
    body.page-admin-dashboard .msgShell {
        min-height: auto;
    }

    body.page-admin-dashboard .chatArea {
        height: 400px;
    }
}

@media (max-width: 640px) {

    /* Further mobile optimizations */
    body.page-admin-dashboard .main {
        padding: 64px 8px 8px;
    }

    body.page-admin-dashboard .rightCol {
        gap: 12px;
    }

    body.page-admin-dashboard .panel {
        border-radius: 8px;
    }

    body.page-admin-dashboard .promoBox {
        height: auto;
        min-height: 200px;
    }

    body.page-admin-dashboard .promoInner {
        height: auto;
        padding: 30px 20px;
    }

    /* Saved/Orders/Quotes responsive */
    body.page-admin-dashboard .saved-body,
    body.page-admin-dashboard .orderBody {
        padding: 14px 12px 16px;
    }

    body.page-admin-dashboard .qBody {
        flex-direction: column;
    }

    body.page-admin-dashboard .qProdImg {
        width: 100%;
        height: 160px;
    }

    body.page-admin-dashboard .qDetails {
        grid-template-columns: 120px 1fr;
        gap: 8px 12px;
    }

    /* Bubble max width */
    body.page-admin-dashboard .bubble {
        max-width: 75%;
    }

    /* Order/Saved actions */
    body.page-admin-dashboard .saved-actions {
        flex-direction: column;
        align-items: flex-end;
        gap: 6px;
    }

    body.page-admin-dashboard .buy-btn {
        padding: 6px 14px;
    }

    /* Quote actions on mobile */
    body.page-admin-dashboard .qActions {
        position: static;
        flex-direction: row;
        margin-top: 10px;
        min-width: auto;
    }

    body.page-admin-dashboard .qHeader {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    body.page-admin-dashboard .dashStats {
        padding: 12px;
    }

    body.page-admin-dashboard .cartTitle,
    body.page-admin-dashboard .saved-title,
    body.page-admin-dashboard .orderTitle {
        font-size: 11px;
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
    }

    body.page-admin-dashboard .orderLine {
        flex-direction: column;
        gap: 6px;
    }

    body.page-admin-dashboard .chatArea {
        height: 350px;
    }
}

body.page-admin-dashboard .admin-spacer-40 {
    width: 40px;
}

body.page-admin-dashboard .qty-wrap.admin-qty-wrap {
    margin: 6px 0;
}

body.page-admin-dashboard .msgRow.msgRow-end {
    justify-content: flex-end;
}

/* Cart Complete */
body.page-cart-complete * {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body.page-cart-complete body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial;
    background: #fff;
    color: #111;
}

body.page-cart-complete {
    --blue: #0b5fff;
    --border: #dcdcdc;
    --muted: #6b6b6b;
    --rightbg: #f7f7f7;
}

/* ================= LAYOUT (SHOPIFY-LIKE) ================= */
body.page-cart-complete .checkout {
    display: grid;
    grid-template-columns: minmax(560px, 1fr) 420px;
    min-height: 100vh;
}

/* subtle divider like Shopify */
body.page-cart-complete .right {
    background: var(--rightbg);
    border-left: 1px solid #eee;
}

/* ================= LEFT ================= */
body.page-cart-complete .left {
    padding: 38px 54px;
}

body.page-cart-complete .section {
    margin-bottom: 30px;
}

body.page-cart-complete h2 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 14px;
}

/* ================= FORM (FIXED ALIGNMENT + SMALLER FIELDS) ================= */
body.page-cart-complete label {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 8px;
    display: block;
}

/* smaller + cleaner like Shopify */
body.page-cart-complete input,
body.page-cart-complete select {
    width: 100%;
    height: 46px;
    /* reduced */
    padding: 0 14px;
    /* reduced */
    border-radius: 10px;
    border: 1px solid var(--border);
    font-size: 14px;
    background: #fff;
    color: #111;
}

/* spacing controlled by wrappers (not margin-bottom on inputs) */
body.page-cart-complete .field {
    margin-top: 12px;
}

body.page-cart-complete .field:first-child {
    margin-top: 0;
}

body.page-cart-complete input:focus,
body.page-cart-complete select:focus {
    outline: none;
    border-color: var(--blue);
    box-shadow: 0 0 0 2px rgba(11, 95, 255, .18);
}

body.page-cart-complete .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 12px;
}

/* checkbox alignment fix */
body.page-cart-complete .checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    font-size: 13px;
    color: #111;
}

body.page-cart-complete .checkbox input {
    width: 16px;
    height: 16px;
    accent-color: var(--blue);
}

/* ================= SHIPPING ================= */
body.page-cart-complete .ship-box {
    border: 2px solid var(--blue);
    border-radius: 10px;
    height: 54px;
    /* cleaner */
    padding: 0 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f3f7ff;
    font-weight: 600;
    font-size: 14px;
}

/* ================= RADIO (CENTER DOT + RIGHT TEXT LIKE SHOPIFY) ================= */
body.page-cart-complete .hint {
    font-size: 13px;
    color: var(--muted);
    margin: 0 0 12px;
    line-height: 1.4;
}

body.page-cart-complete .radio {
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 18px;
    display: grid;
    grid-template-columns: 24px 1fr;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
    background: #fff;
    margin-top: 12px;
}

body.page-cart-complete .radio:first-of-type {
    margin-top: 0;
}

body.page-cart-complete .radio input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--blue);
    justify-self: center;
}

body.page-cart-complete .radio .rtext {
    font-size: 14px;
    line-height: 1.2;
}

body.page-cart-complete .radio.active {
    border: 2px solid var(--blue);
    background: #f3f7ff;
    padding: 15px 17px;
    /* keep same visual height after border becomes 2px */
}

/* ================= BUTTON ================= */
body.page-cart-complete .btn {
    width: 100%;
    height: 52px;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 8px;
}

body.page-cart-complete .btn:active {
    transform: translateY(1px);
}

/* ================= RIGHT (STICKY SUMMARY) ================= */
body.page-cart-complete .right {
    padding: 28px 30px;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: auto;
}

/* optional logo space (you said leave logo) */
body.page-cart-complete .logoSpace {
    height: 64px;
}

body.page-cart-complete .cart-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding-bottom: 18px;
    border-bottom: 1px solid #e7e7e7;
    margin-bottom: 18px;
}

body.page-cart-complete .pimg {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    background: #fff;
    border: 1px solid #ddd;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

body.page-cart-complete .pimg img {
    width: 90%;
    height: 90%;
    object-fit: contain;
}

body.page-cart-complete .qty {
    position: absolute;
    top: -7px;
    right: -7px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #111;
    color: #fff;
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.page-cart-complete .cart-info {
    flex: 1;
    min-width: 0;
}

body.page-cart-complete .cart-title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

body.page-cart-complete .cart-var {
    font-size: 12px;
    color: var(--muted);
    margin-top: 4px;
}

body.page-cart-complete .cart-price {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    margin-left: auto;
}

/* Discount row like Shopify: big input + small apply */
body.page-cart-complete .discount {
    display: grid;
    grid-template-columns: 1fr 74px;
    gap: 10px;
    margin: 16px 0 18px;
}

body.page-cart-complete .discount input {
    height: 46px;
    border-radius: 10px;
    padding: 0 14px;
    border: 1px solid var(--border);
    background: #fff;
}

body.page-cart-complete .discount button {
    height: 46px;
    border-radius: 10px;
    border: 1px solid #e1e1e1;
    background: #efefef;
    font-weight: 600;
    cursor: pointer;
}

body.page-cart-complete .sum {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    padding: 6px 0;
}

body.page-cart-complete .sum.sep {
    border-bottom: 1px solid #e1e1e1;
    padding-bottom: 14px;
    margin-bottom: 14px;
}

body.page-cart-complete .totalRow {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-top: 6px;
}

body.page-cart-complete .totalLabel {
    font-size: 20px;
    font-weight: 800;
}

body.page-cart-complete .totalAmt {
    font-size: 18px;
    font-weight: 800;
    white-space: nowrap;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 1020px) {
    body.page-cart-complete .checkout {
        grid-template-columns: 1fr;
    }

    body.page-cart-complete .right {
        position: relative;
        height: auto;
        border-left: none;
        border-top: 1px solid #eee;
    }

    body.page-cart-complete .left {
        padding: 26px 18px;
    }

    body.page-cart-complete .right {
        padding: 22px 18px;
    }

    body.page-cart-complete .logoSpace {
        height: 18px;
    }
}

@media (max-width: 560px) {
    body.page-cart-complete .row {
        grid-template-columns: 1fr;
    }

    body.page-cart-complete .cart-title {
        max-width: 160px;
    }
}

body.page-cart-complete .checkout-checkbox {
    margin-top: 14px;
}

body.page-cart-complete .checkout-checkbox-tight {
    margin-top: 10px;
}

/* Cart Success */
body.page-cart-success * {
    box-sizing: border-box;
    font-family: "Segoe UI", Arial, sans-serif;
}

body.page-cart-success body {
    margin: 0;
    background: #f2f2f2;
    color: #222;
}

body.page-cart-success .page {
    max-width: 1300px;
    margin: 30px auto;
    display: flex;
    gap: 24px;
}

/* LEFT SECTION */
body.page-cart-success .left {
    flex: 2;
}

body.page-cart-success .card {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

body.page-cart-success .success-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

body.page-cart-success .check {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #1a73e8;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
}

body.page-cart-success .confirmation {
    font-size: 13px;
    color: #666;
}

body.page-cart-success .thankyou {
    font-size: 22px;
    font-weight: 600;
    margin: 6px 0;
}

body.page-cart-success .map {
    width: 100%;
    height: 230px;
    border-radius: 6px;
    overflow: hidden;
    margin-top: 10px;
    background: #e0e0e0;
    position: relative;
}

body.page-cart-success .map iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

body.page-cart-success .confirmed-text {
    margin-top: 12px;
    font-size: 14px;
}

body.page-cart-success .confirmed-text strong {
    display: block;
    margin-bottom: 4px;
}

/* ORDER DETAILS */
body.page-cart-success .details h3 {
    margin: 0 0 12px;
    font-size: 16px;
}

body.page-cart-success .details-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    font-size: 14px;
}

body.page-cart-success .label {
    color: #666;
    font-size: 13px;
    margin-bottom: 4px;
}

/* RIGHT SECTION */
body.page-cart-success .right {
    flex: 1;
}

body.page-cart-success .product {
    display: flex;
    gap: 12px;
    margin-bottom: 14px;
}

body.page-cart-success .product img {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    background: #4caf50;
}

body.page-cart-success .product-name {
    font-size: 13px;
    line-height: 1.3;
}

body.page-cart-success .price {
    font-size: 13px;
    white-space: nowrap;
}

body.page-cart-success .discount {
    display: flex;
    gap: 10px;
    margin: 16px 0;
}

body.page-cart-success .discount input {
    flex: 1;
    padding: 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
}

body.page-cart-success .discount button {
    padding: 10px 16px;
    border-radius: 6px;
    border: 1px solid #ccc;
    background: #f5f5f5;
    cursor: pointer;
}

body.page-cart-success .summary {
    font-size: 14px;
}

body.page-cart-success .summary-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

body.page-cart-success .free {
    color: #1b873f;
    font-weight: 500;
}

body.page-cart-success .total {
    font-size: 18px;
    font-weight: 600;
    margin-top: 14px;
    border-top: 1px solid #ddd;
    padding-top: 14px;
}

body.page-cart-success .currency {
    font-size: 13px;
    color: #555;
}

@media (max-width: 900px) {
    body.page-cart-success .page {
        flex-direction: column;
    }
}

/* D Saved */
body.page-d-saved * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body.page-d-saved body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial;
    background: #e6e6e6;
}

/* PAGE */
body.page-d-saved .page {
    padding: 24px;
}

/* MAIN CARD */
body.page-d-saved .saved-box {
    max-width: 980px;
    margin: 0 auto;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    padding: 18px 20px;
}

/* TITLE */
body.page-d-saved .title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 14px;
}

/* ITEM */
body.page-d-saved .saved-item {
    border-top: 1px solid #e2e2e2;
}

body.page-d-saved .saved-item:first-child {
    border-top: none;
}

/* HEADER ROW */
body.page-d-saved .saved-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 6px;
    cursor: pointer;
}

body.page-d-saved .saved-header:hover {
    background: #f8f8f8;
}

/* IMAGE */
body.page-d-saved .saved-img {
    width: 46px;
    height: 36px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

body.page-d-saved .saved-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* TEXT */
body.page-d-saved .saved-info {
    flex: 1;
}

body.page-d-saved .saved-title {
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 4px;
}

body.page-d-saved .saved-price {
    font-size: 12px;
    font-weight: 600;
}

/* ACTIONS */
body.page-d-saved .saved-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* BUY NOW */
body.page-d-saved .buy-btn {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 14px;
    border: 1.5px solid #000;
    background: #fff;
    cursor: pointer;
    font-weight: 600;
}

body.page-d-saved .buy-btn:hover {
    background: #000;
    color: #fff;
}

/* DELETE */
body.page-d-saved .delete-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    color: #888;
}

body.page-d-saved .delete-btn svg {
    width: 18px;
    height: 18px;
    stroke: #000;
}

body.page-d-saved .delete-btn:hover svg {
    stroke: #555;
}

body.page-d-saved .delete-btn:hover {
    color: #000;
}

/* EXPANDED BODY */
body.page-d-saved .saved-body {
    display: none;
    padding: 14px 58px 16px;
    background: #fafafa;
    border-top: 1px solid #e2e2e2;
}

body.page-d-saved .saved-item.open .saved-body {
    display: block;
}

/* DETAILS */
body.page-d-saved .details {
    font-size: 12px;
    color: #444;
    line-height: 1.6;
}

/* Dashboard */
body.page-dashboard * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body.page-dashboard body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial;
    background: #e6e6e6;
    color: #222;
}

/* ===== LAYOUT ===== */
body.page-dashboard .app {
    display: flex;
    min-height: 100vh;
}

/* ===== SIDEBAR ===== */
body.page-dashboard .sidebar {
    width: 280px;
    /* expanded size */
    background: #e0e0e0;
    padding: 18px 14px;
}

body.page-dashboard .sidebar h6 {
    font-size: 12px;
    color: #777;
    margin: 14px 12px 8px;
    font-weight: 500;
}

/* MENU ITEM */
body.page-dashboard .menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    margin-bottom: 6px;
    border-radius: 18px;
    cursor: pointer;
    font-size: 15px;
    color: #555;
    transition: .15s ease;
}

/* hover like Orders */
body.page-dashboard .menu-item:hover {
    background: #fff;
}

/* active pill */
body.page-dashboard .menu-item.active {
    background: #fff;
    color: #000;
    font-weight: 600;
}

/* LEFT */
body.page-dashboard .menu-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* ICON */
body.page-dashboard .icon {
    width: 22px;
    height: 22px;
}

body.page-dashboard .icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

/* ARROW */
body.page-dashboard .arrow svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

/* ===== MAIN CONTENT ===== */
body.page-dashboard .main {
    flex: 1;
    padding: 22px;
}

/* ===== VIEW SYSTEM ===== */
body.page-dashboard .view {
    display: none;
}

body.page-dashboard .view.active {
    display: block;
}

/* ===== DASHBOARD CARD ===== */
body.page-dashboard .dashboard {
    max-width: 1100px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    overflow: hidden;
}

/* PROFILE */
body.page-dashboard .profile {
    display: flex;
    gap: 14px;
    padding: 18px 22px;
    border-bottom: 1px solid #eee;
}

body.page-dashboard .avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.page-dashboard .profile h3 {
    font-size: 14px;
    font-weight: 600;
}

body.page-dashboard .profile a {
    font-size: 12px;
    color: #1a73e8;
    text-decoration: none;
}

/* STATS */
body.page-dashboard .stats-wrap {
    padding: 20px;
}

body.page-dashboard .stats {
    background: #fafafa;
    border-radius: 10px;
    padding: 20px 10px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
}

body.page-dashboard .stats strong {
    font-size: 28px;
    display: block;
}

body.page-dashboard .stats span {
    font-size: 11px;
    color: #666;
}

/* ORDERS EMPTY */
body.page-dashboard .orders {
    padding: 22px;
    border-top: 1px solid #eee;
}

body.page-dashboard .orders h4 {
    font-size: 14px;
    margin-bottom: 40px;
}

body.page-dashboard .empty {
    text-align: center;
    padding: 40px 0 60px;
}

body.page-dashboard .empty-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    background: #f3f3f3;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.page-dashboard .empty p {
    font-size: 13px;
    color: #666;
    margin-bottom: 14px;
}

body.page-dashboard .empty button {
    padding: 8px 22px;
    border: 1.5px solid #111;
    background: #fff;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

body.page-dashboard .empty button:hover {
    background: #111;
    color: #fff;
}

/* Dhistort */
body.page-dhistort * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body.page-dhistort body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial;
    background: #e6e6e6;
}

/* PAGE */
body.page-dhistort .page {
    padding: 24px;
}

/* CARD */
body.page-dhistort .order-box {
    max-width: 980px;
    margin: 0 auto;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    padding: 18px 20px;
}

/* TITLE */
body.page-dhistort .title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 14px;
}

/* ORDER */
body.page-dhistort .order {
    border-top: 1px solid #e2e2e2;
}

body.page-dhistort .order:first-child {
    border-top: none;
}

/* HEADER ROW */
body.page-dhistort .order-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 6px;
    cursor: pointer;
}

body.page-dhistort .order-header:hover {
    background: #f8f8f8;
}

/* IMAGE */
body.page-dhistort .order-img {
    width: 46px;
    height: 36px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

body.page-dhistort .order-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* INFO */
body.page-dhistort .order-info {
    flex: 1;
}

body.page-dhistort .order-title {
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 6px;
}

body.page-dhistort .order-meta {
    font-size: 12px;
    color: #555;
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}

body.page-dhistort .order-price {
    font-weight: 600;
}

body.page-dhistort .status span {
    font-weight: 600;
}

body.page-dhistort .order-id {
    color: #777;
}

/* DELETE */
body.page-dhistort .delete-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
}

body.page-dhistort .delete-btn svg {
    width: 18px;
    height: 18px;
    stroke: #000;
}

body.page-dhistort .delete-btn:hover svg {
    stroke: #555;
}

/* OPEN BODY */
body.page-dhistort .order-body {
    display: none;
    background: #fafafa;
    border-top: 1px solid #e2e2e2;
    padding: 14px 58px 18px;
}

body.page-dhistort .order.open .order-body {
    display: block;
}

/* DETAILS */
body.page-dhistort .details {
    font-size: 12px;
    color: #444;
    line-height: 1.6;
}

/* Dquotes */
body.page-dquotes * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body.page-dquotes body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial;
    background: #e6e6e6;
}

/* PAGE */
body.page-dquotes .page {
    padding: 24px;
}

/* MAIN CARD */
body.page-dquotes .quotes-box {
    max-width: 980px;
    margin: 0 auto;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    padding: 18px 20px;
}

/* TITLE */
body.page-dquotes .title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 14px;
}

/* QUOTE WRAPPER */
body.page-dquotes .quote {
    border: 1px solid #e2e2e2;
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
}

/* HEADER */
body.page-dquotes .quote-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    position: relative;
    cursor: pointer;
}

body.page-dquotes .quote-header:hover {
    background: #f8f8f8;
}

/* AVATAR */
body.page-dquotes .avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #e0e0e0;
}

/* HEADER CONTENT */
body.page-dquotes .header-main {
    flex: 1;
}

body.page-dquotes .name-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
}

body.page-dquotes .name {
    font-size: 14px;
    font-weight: 600;
}

body.page-dquotes .badge {
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 12px;
    background: #fff3cd;
    border: 1px solid #ffe69c;
    font-weight: 600;
}

body.page-dquotes .location {
    font-size: 12px;
    color: #666;
    margin-bottom: 6px;
}

body.page-dquotes .price {
    font-size: 12px;
    font-weight: 600;
}

/* ACTION BUTTONS */
body.page-dquotes .actions {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

body.page-dquotes .actions button {
    font-size: 11px;
    padding: 4px 12px;
    border-radius: 14px;
    cursor: pointer;
    font-weight: 600;
    background: #fff;
    transition: .2s;
}

/* ACCEPT */
body.page-dquotes .accept {
    border: 1.5px solid #000;
}

body.page-dquotes .accept:hover {
    background: #000;
    color: #fff;
}

/* REJECT */
body.page-dquotes .reject {
    border: 1px solid #999;
}

body.page-dquotes .reject:hover {
    background: #e5e5e5;
}

/* OPEN BODY */
body.page-dquotes .quote-body {
    display: none;
    background: #f6f6f6;
    border-top: 1px solid #e2e2e2;
    padding: 14px;
}

body.page-dquotes .quote.open .quote-body {
    display: flex;
    gap: 14px;
}

/* PRODUCT IMAGE */
body.page-dquotes .product-img {
    width: 120px;
    height: 90px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.page-dquotes .product-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* PRODUCT INFO */
body.page-dquotes .product-info h4 {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 10px;
}

body.page-dquotes .details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 20px;
    font-size: 12px;
}

body.page-dquotes .label {
    font-weight: 600;
}

/* CLOSED ROW */
body.page-dquotes .closed {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid #e2e2e2;
    cursor: pointer;
}

body.page-dquotes .closed:hover {
    background: #fafafa;
}

body.page-dquotes .closed .avatar {
    width: 32px;
    height: 32px;
}

body.page-dquotes .closed-text {
    font-size: 12px;
    flex: 1;
}

body.page-dquotes .closed-price {
    font-size: 12px;
    font-weight: 600;
}

/* Dsidebar */
body.page-dsidebar * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body.page-dsidebar body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial;
    background: #f2f2f2;
}

/* SIDEBAR */
body.page-dsidebar .sidebar {
    width: 260px;
    height: 100vh;
    background: #e6e6e6;
    padding: 18px 12px;
    display: block;
    gap: 0;
    border: none;
    border-radius: 0;
}

/* SECTION TITLE */
body.page-dsidebar .sidebar-title {
    font-size: 12px;
    color: #777;
    margin: 16px 12px 8px;
}

/* MENU ITEM */
body.page-dsidebar .menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    /* bigger height */
    border-radius: 14px;
    font-size: 15px;
    color: #555;
    cursor: pointer;
    transition: background .15s ease;
}

/* HOVER (same as Orders) */
body.page-dsidebar .menu-item:hover {
    background: #fff;
}

/* ACTIVE (NO LINE / NO BORDER) */
body.page-dsidebar .menu-item.active {
    background: #fff;
    color: #000;
    font-weight: 600;
}

/* LEFT SIDE */
body.page-dsidebar .menu-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* ICON */
body.page-dsidebar .menu-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.page-dsidebar .menu-icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

/* ARROW */
body.page-dsidebar .arrow svg {
    width: 16px;
    height: 16px;
    stroke: #777;
}

/* Dmessage */
body.page-dmessage * {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body.page-dmessage body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial;
    background: #e6e6e6;
    color: #111;
}

/* ===== APP LAYOUT ===== */
body.page-dmessage .app {
    display: flex;
    min-height: 100vh
}

/* =====================================================
     SIDEBAR (EXACT STYLE YOU GAVE)
  ===================================================== */
body.page-dmessage .sidebar {
    width: 260px;
    height: 100vh;
    background: #e6e6e6;
    padding: 18px 12px;
    border-right: 1px solid #d2d2d2;
}

body.page-dmessage .sidebar-title {
    font-size: 12px;
    color: #777;
    margin: 16px 12px 8px;
}

body.page-dmessage .menu-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-radius: 14px;
    font-size: 15px;
    color: #555;
    cursor: pointer;
    transition: background .15s ease;
    user-select: none;
}

body.page-dmessage .menu-item:hover {
    background: #fff
}

body.page-dmessage .menu-item.active {
    background: #fff;
    color: #000;
    font-weight: 600;
}

body.page-dmessage .menu-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

body.page-dmessage .menu-icon {
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.page-dmessage .menu-icon svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

body.page-dmessage .arrow svg {
    width: 16px;
    height: 16px;
    stroke: #777
}

/* ===== MAIN ===== */
body.page-dmessage .main {
    flex: 1;
    padding: 18px
}

/* 2 columns: center + right (always visible) */
body.page-dmessage .shell {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 18px;
    align-items: start;
}

/* ===== RIGHT COLUMN (ALWAYS ON ALL PAGES) ===== */
body.page-dmessage .rightCol {
    display: flex;
    flex-direction: column;
    gap: 16px
}

body.page-dmessage .panel {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    overflow: hidden;
}

body.page-dmessage .panelHd {
    padding: 14px 14px 10px;
    font-size: 13px;
    font-weight: 800;
    color: #111;
}

/* Cart */
body.page-dmessage .cartWrap {
    padding: 0 14px 14px
}

body.page-dmessage .cartItem {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 0 12px;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 10px;
}

body.page-dmessage .cartImg {
    width: 58px;
    height: 46px;
    border: 1px solid #ddd;
    border-radius: 6px;
    overflow: hidden;
    background: #fafafa;
    flex-shrink: 0;
}

body.page-dmessage .cartImg img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

body.page-dmessage .cartMeta {
    min-width: 0;
    flex: 1
}

body.page-dmessage .cartTitle {
    font-size: 10px;
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 6px;
}

body.page-dmessage .qtyRow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

body.page-dmessage .qtyBox {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f1f1f1;
    border-radius: 6px;
    padding: 4px 6px;
    border: 1px solid #e7e7e7;
}

body.page-dmessage .qBtn {
    width: 18px;
    height: 18px;
    border: none;
    background: #fff;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 900;
    font-size: 12px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.page-dmessage .qVal {
    min-width: 14px;
    text-align: center;
    font-size: 10px;
    font-weight: 900
}

body.page-dmessage .cartPrice {
    font-size: 10px;
    font-weight: 900;
}

body.page-dmessage .cartBar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 12px 0 0;
}

body.page-dmessage .checkoutBtn {
    background: #111;
    color: #fff;
    border: none;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 900;
    cursor: pointer;
}

body.page-dmessage .cartTotal {
    font-size: 11px;
    font-weight: 900
}

/* Promotions */
body.page-dmessage .promoBox {
    height: 340px
}

body.page-dmessage .promoInner {
    height: calc(340px - 44px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 14px;
    padding: 20px;
}

body.page-dmessage .promoIcon {
    width: 64px;
    height: 64px;
    opacity: .55
}

body.page-dmessage .promoText {
    font-size: 14px;
    font-weight: 900
}

/* ===== CENTER VIEW WRAPPER ===== */
body.page-dmessage .view {
    display: none
}

body.page-dmessage .view.active {
    display: block
}

/* =====================================================
     DASHBOARD VIEW (CENTER)
  ===================================================== */
body.page-dmessage .dashCard {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    overflow: hidden;
    min-height: 650px;
}

body.page-dmessage .dashTop {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    border-bottom: 1px solid #eee;
    background: #fff;
}

body.page-dmessage .dashAvatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 2px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: #fafafa;
}

body.page-dmessage .dashInfo h3 {
    font-size: 14px;
    font-weight: 800
}

body.page-dmessage .dashInfo a {
    display: inline-block;
    margin-top: 2px;
    font-size: 12px;
    color: #1a73e8;
    text-decoration: none;
}

body.page-dmessage .dashStatsWrap {
    padding: 18px 22px
}

body.page-dmessage .dashStats {
    background: #f6f6f6;
    border-radius: 10px;
    padding: 22px 10px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
}

body.page-dmessage .sNum {
    font-size: 28px;
    font-weight: 900;
    display: block
}

body.page-dmessage .sLab {
    font-size: 11px;
    color: #666
}

body.page-dmessage .dashSectionTitle {
    padding: 18px 22px;
    border-top: 1px solid #eee;
    font-size: 14px;
    font-weight: 800;
}

body.page-dmessage .dashDivider {
    height: 1px;
    background: #eee
}

body.page-dmessage .dashEmpty {
    text-align: center;
    padding: 70px 0 90px;
}

body.page-dmessage .emptyIcon {
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    border-radius: 10px;
    background: #f3f3f3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #bbb;
}

body.page-dmessage .dashEmpty p {
    font-size: 13px;
    color: #666;
    margin-bottom: 14px
}

body.page-dmessage .dashEmpty button {
    padding: 9px 22px;
    border: 1.5px solid #111;
    background: #fff;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

body.page-dmessage .dashEmpty button:hover {
    background: #111;
    color: #fff
}

/* =====================================================
     MESSAGES VIEW (CENTER) - YOUR DESIGN
  ===================================================== */
body.page-dmessage .msgShell {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .08);
    overflow: hidden;
    min-height: 650px;
    display: grid;
    grid-template-columns: 290px 1fr;
}

body.page-dmessage .chatList {
    border-right: 1px solid #ededed;
    background: #fff
}

body.page-dmessage .chatListTop {
    padding: 14px 14px 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

body.page-dmessage .smallMsgIco {
    width: 18px;
    height: 18px;
    opacity: .75
}

body.page-dmessage .searchWrap {
    flex: 1;
    background: #f1f1f1;
    border-radius: 14px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

body.page-dmessage .searchWrap svg {
    width: 14px;
    height: 14px;
    opacity: .65
}

body.page-dmessage .searchWrap input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    font-size: 12px;
    color: #333;
}

body.page-dmessage .chatItems {
    height: calc(650px - 58px);
    overflow: auto;
    padding: 6px 0;
}

body.page-dmessage .chatItems::-webkit-scrollbar {
    width: 0;
    height: 0
}

body.page-dmessage .chatItems {
    scrollbar-width: none
}

body.page-dmessage .cItem {
    padding: 10px 14px;
    display: flex;
    gap: 10px;
    cursor: pointer;
    transition: .1s ease;
}

body.page-dmessage .cItem:hover {
    background: #f6f6f6
}

body.page-dmessage .cItem.active {
    background: #efefef
}

body.page-dmessage .uAvatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 2px solid #d9d9d9;
    background: #f4f4f4;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

body.page-dmessage .uAvatar svg {
    width: 18px;
    height: 18px;
    opacity: .65
}

body.page-dmessage .cMeta {
    min-width: 0
}

body.page-dmessage .cName {
    font-size: 12px;
    font-weight: 900;
    color: #111;
    line-height: 1.1
}

body.page-dmessage .cSub {
    font-size: 10px;
    color: #8b8b8b;
    margin-top: 2px
}

body.page-dmessage .cPrev {
    font-size: 10px;
    color: #555;
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 210px;
}

body.page-dmessage .chatArea {
    display: flex;
    flex-direction: column;
    height: 650px;
    background: #fff
}

body.page-dmessage .chatHeader {
    padding: 14px 18px;
    border-bottom: 1px solid #ededed;
}

body.page-dmessage .chatHeaderTitle {
    font-size: 14px;
    font-weight: 900
}

body.page-dmessage .chatHeaderTime {
    font-size: 10px;
    color: #8b8b8b;
    margin-top: 2px
}

body.page-dmessage .chatBody {
    flex: 1;
    padding: 18px;
    background: #fff;
    overflow: auto;
}

body.page-dmessage .chatBody::-webkit-scrollbar {
    width: 0;
    height: 0
}

body.page-dmessage .chatBody {
    scrollbar-width: none
}

body.page-dmessage .msgRow {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    align-items: flex-start
}

body.page-dmessage .bubble {
    max-width: 62%;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 11px;
    line-height: 1.45;
    box-shadow: 0 1px 0 rgba(0, 0, 0, .05);
}

body.page-dmessage .bubble.recv {
    background: #fff;
    border: 1px solid #ededed
}

body.page-dmessage .bubble.send {
    margin-left: auto;
    background: #e2e2e2;
    border: 1px solid #dedede
}

body.page-dmessage .chatFooter {
    border-top: 1px solid #ededed;
    padding: 12px 16px 16px;
    background: #fff;
}

body.page-dmessage .footerIcons {
    display: flex;
    gap: 10px;
    padding: 6px 0 10px;
}

body.page-dmessage .footerIcons button {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    opacity: .85;
}

body.page-dmessage .footerIcons svg {
    width: 16px;
    height: 16px
}

body.page-dmessage .inputRow {
    background: #efefef;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #e2e2e2;
}

body.page-dmessage .inputRow input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 12px;
    color: #111;
}

body.page-dmessage .sendBtn {
    background: #000;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 900;
    cursor: pointer;
}

/* =====================================================
     DUSTBIN ICON (YOUR NEW ONE)
  ===================================================== */
body.page-dmessage .iconBtn {
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
}

body.page-dmessage .iconBtn:hover {
    background: #f3f3f3
}

body.page-dmessage .trashSvg {
    width: 16px;
    height: 16px;
    stroke: #111;
    fill: none;
    stroke-width: 2;
}

/* =====================================================
     SAVED VIEW (CENTER) - OPEN/CLOSE + NEW TRASH
  ===================================================== */
body.page-dmessage .boxCard {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    padding: 18px 20px;
    min-height: 650px;
}

body.page-dmessage .boxTitle {
    font-size: 14px;
    font-weight: 800;
    margin-bottom: 14px;
}

body.page-dmessage .saved-item {
    border-top: 1px solid #e2e2e2
}

body.page-dmessage .saved-item:first-child {
    border-top: none
}

body.page-dmessage .saved-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 6px;
    cursor: pointer;
}

body.page-dmessage .saved-header:hover {
    background: #f8f8f8
}

body.page-dmessage .saved-img {
    width: 46px;
    height: 36px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

body.page-dmessage .saved-img img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

body.page-dmessage .saved-info {
    flex: 1;
    min-width: 0
}

body.page-dmessage .saved-title {
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.page-dmessage .saved-price {
    font-size: 12px;
    font-weight: 800
}

body.page-dmessage .saved-actions {
    display: flex;
    align-items: center;
    gap: 10px
}

body.page-dmessage .buy-btn {
    font-size: 11px;
    padding: 4px 12px;
    border-radius: 14px;
    border: 1.5px solid #000;
    background: #fff;
    cursor: pointer;
    font-weight: 900;
}

body.page-dmessage .buy-btn:hover {
    background: #000;
    color: #fff
}

body.page-dmessage .saved-body {
    display: none;
    padding: 14px 58px 16px;
    background: #fafafa;
    border-top: 1px solid #e2e2e2;
}

body.page-dmessage .saved-item.open .saved-body {
    display: block
}

body.page-dmessage .details {
    font-size: 12px;
    color: #444;
    line-height: 1.6
}

/* =====================================================
     ORDERS VIEW (CENTER) - OPEN/CLOSE + NEW TRASH
  ===================================================== */
body.page-dmessage .orderRow {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 6px;
    border-top: 1px solid #e2e2e2;
    cursor: pointer;
}

body.page-dmessage .orderRow:first-of-type {
    border-top: none
}

body.page-dmessage .orderRow:hover {
    background: #f8f8f8
}

body.page-dmessage .orderImg {
    width: 46px;
    height: 36px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background: #fff;
    overflow: hidden;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.page-dmessage .orderImg img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

body.page-dmessage .orderMeta {
    flex: 1;
    min-width: 0
}

body.page-dmessage .orderTitle {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 6px;
}

body.page-dmessage .orderLine {
    display: flex;
    gap: 22px;
    font-size: 12px;
    color: #444;
    flex-wrap: wrap;
}

body.page-dmessage .orderPrice {
    font-weight: 900;
    color: #111
}

body.page-dmessage .orderStatus i {
    font-style: italic;
    font-weight: 700
}

body.page-dmessage .orderTdx {
    color: #555;
    text-decoration: underline
}

body.page-dmessage .orderBody {
    display: none;
    padding: 14px 58px 16px;
    background: #fafafa;
    border-top: 1px solid #e2e2e2;
}

body.page-dmessage .orderItem.open .orderBody {
    display: block
}

/* =====================================================
     QUOTES VIEW (CENTER) - EXACT LOGIC:
     - Click header area opens/closes
     - Accept/Reject do NOT toggle (separate)
  ===================================================== */
body.page-dmessage .quoteWrap {
    border-top: 1px solid #e2e2e2
}

body.page-dmessage .quoteWrap:first-of-type {
    border-top: none
}

body.page-dmessage .qHeader {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 12px;
    position: relative;
    cursor: pointer;
}

body.page-dmessage .qHeader:hover {
    background: #f8f8f8
}

body.page-dmessage .qAvatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #e0e0e0;
    flex-shrink: 0;
}

body.page-dmessage .qMain {
    flex: 1;
    min-width: 0
}

body.page-dmessage .qNameRow {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

body.page-dmessage .qName {
    font-size: 14px;
    font-weight: 900
}

body.page-dmessage .qShield {
    font-size: 14px
}

body.page-dmessage .qBadge {
    font-size: 11px;
    padding: 2px 10px;
    border-radius: 12px;
    background: #fff3cd;
    border: 1px solid #ffe69c;
    font-weight: 900;
}

body.page-dmessage .qLoc {
    font-size: 12px;
    color: #666;
    margin-bottom: 6px
}

body.page-dmessage .qOffer {
    font-size: 12px;
    font-weight: 900
}

body.page-dmessage .qActions {
    position: absolute;
    top: 14px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

body.page-dmessage .qBtn {
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 14px;
    cursor: pointer;
    font-weight: 900;
    background: #fff;
    border: 1.5px solid #000;
}

body.page-dmessage .qBtn.reject {
    border: 1px solid #999;
}

body.page-dmessage .qBtn:hover {
    background: #000;
    color: #fff
}

body.page-dmessage .qBtn.reject:hover {
    background: #444;
    color: #fff;
    border-color: #444
}

body.page-dmessage .qBody {
    display: none;
    background: #f6f6f6;
    border-top: 1px solid #e2e2e2;
    padding: 14px;
    gap: 14px;
}

body.page-dmessage .quoteItem.open .qBody {
    display: flex
}

body.page-dmessage .qProdImg {
    width: 120px;
    height: 90px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

body.page-dmessage .qProdImg img {
    width: 100%;
    height: 100%;
    object-fit: contain
}

body.page-dmessage .qProdInfo h4 {
    font-size: 13px;
    font-weight: 900;
    margin-bottom: 10px;
}

body.page-dmessage .qDetails {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 4px 20px;
    font-size: 12px;
}

body.page-dmessage .qLabel {
    font-weight: 900
}

/* closed row inside quote item */
body.page-dmessage .qClosed {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 12px;
    border-top: 1px solid #e2e2e2;
    cursor: pointer;
}

body.page-dmessage .qClosed:hover {
    background: #f8f8f8
}

body.page-dmessage .qClosed .qAvatar {
    width: 32px;
    height: 32px
}

body.page-dmessage .qClosedText {
    font-size: 12px;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.page-dmessage .qClosedPrice {
    font-size: 12px;
    font-weight: 900
}

/* when open: hide closed row; when closed: show closed row */
body.page-dmessage .quoteItem.open .qClosed {
    display: none
}

body.page-dmessage .quoteItem:not(.open) .qHeader {
    display: none
}

/* =====================================================
     RESPONSIVE
  ===================================================== */
@media(max-width:1100px) {
    body.page-dmessage .shell {
        grid-template-columns: 1fr
    }

    body.page-dmessage .rightCol {
        display: grid;
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:860px) {
    body.page-dmessage .sidebar {
        display: none
    }

    body.page-dmessage .main {
        padding: 12px
    }

    body.page-dmessage .rightCol {
        display: flex
    }

    body.page-dmessage .msgShell {
        grid-template-columns: 1fr
    }

    body.page-dmessage .chatItems {
        height: auto;
        max-height: 220px
    }
}

body.page-dmessage .smallMsgIco-dim {
    opacity: 0.65;
}

body.page-dmessage .msgRow.msgRow-end {
    justify-content: flex-end;
}

/* Easy Sourcing */
body.page-easy-sourcing * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

body.page-easy-sourcing body {
    background: #e5e5e5;
}

body.page-easy-sourcing .container {
    width: 1200px;
    margin: auto;
}

/* ================= HERO ================= */
body.page-easy-sourcing .hero-wrapper {
    background: #fff;
    padding: 12px 0;
}

body.page-easy-sourcing .hero-layout {
    display: grid;
    grid-template-columns: 240px 1fr 266px;
    gap: 12px;
    min-height: 360px;
}

body.page-easy-sourcing .hero-categories {
    border: 1px solid #e5e5e5;
    background: #fff;
    font-size: 13px;
}

body.page-easy-sourcing .hero-categories h4 {
    padding: 9px 10px;
    background: #fafafa;
    border-bottom: 1px solid #eee;
}

body.page-easy-sourcing .hero-categories ul {
    list-style: none;
    padding: 6px 8px;
}

body.page-easy-sourcing .hero-categories li {
    padding: 6px;
}

body.page-easy-sourcing .hero-categories .more {
    color: #2563eb;
    font-weight: bold;
}

body.page-easy-sourcing .hero-slider {
    border: 1px solid #e5e5e5;
    position: relative;
    overflow: hidden;
}

body.page-easy-sourcing .slides {
    position: relative;
    height: 100%;
}

body.page-easy-sourcing .slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0;
    transition: .6s;
}

body.page-easy-sourcing .slide.active {
    opacity: 1;
}

body.page-easy-sourcing .hero-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

body.page-easy-sourcing .right-box {
    border: 1px solid #e5e5e5;
    flex: 1;
}

body.page-easy-sourcing .right-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ================= TRENDING ================= */
body.page-easy-sourcing .trending-wrapper {
    background: #fff;
    margin-top: 24px;
}

body.page-easy-sourcing .trending-wrapper .container {
    padding: 40px 16px;
}

body.page-easy-sourcing .section-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
}

body.page-easy-sourcing .product-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 24px;
}

body.page-easy-sourcing .product-card {
    cursor: pointer;
}

body.page-easy-sourcing .product-img-wrapper {
    position: relative;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.page-easy-sourcing .product-img-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* ================= GRID SECTIONS ================= */
body.page-easy-sourcing .grid-section {
    padding: 30px 0;
}

body.page-easy-sourcing .section-container {
    width: 1200px;
    margin: auto;
    background: #fff;
    display: grid;
    grid-template-columns: 300px 1fr;
    border: 1px solid #e5e5e5;
}

body.page-easy-sourcing .left-big img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.page-easy-sourcing .right-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

body.page-easy-sourcing .grid-item {
    border: 1px solid #eef1f6;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

body.page-easy-sourcing .grid-item img {
    height: 120px;
    object-fit: contain;
}

/* ================= BRANDS ================= */
body.page-easy-sourcing .brands-wrapper {
    padding: 40px 20px 60px;
}

body.page-easy-sourcing .brands-container {
    width: 1200px;
    margin: auto;
}

body.page-easy-sourcing .brands-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
}

body.page-easy-sourcing .brands-grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 26px;
}

body.page-easy-sourcing .brand-logo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.page-easy-sourcing .brand-logo img {
    width: 90%;
    height: 90%;
    object-fit: contain;
}

/* =====================================================
   ================= EASY SOURCING (FIXED) ==============
===================================================== */
body.page-easy-sourcing .easy-sourcing-wrapper {
    padding: 40px 0;
    background: #e5e5e5;
}

body.page-easy-sourcing .easy-sourcing-container {
    width: 1200px;
    margin: auto;
    height: 340px;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    background: url("assets/Container (3).png") center/cover no-repeat;
    position: relative;
    overflow: hidden;
}

/* LEFT TEXT */
body.page-easy-sourcing .easy-left {
    padding: 40px;
    max-width: 520px;
    position: relative;
    z-index: 2;
}

/* WHITE GRADIENT OVERLAY (KEY FIX) */
body.page-easy-sourcing .easy-left::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0.95),
            rgba(255, 255, 255, 0.75),
            rgba(255, 255, 255, 0));
    z-index: -1;
}

body.page-easy-sourcing .easy-left h2 {
    font-size: 32px;
    margin-bottom: 10px;
}

body.page-easy-sourcing .easy-left p {
    font-size: 14px;
    color: #555;
    margin-bottom: 18px;
}

body.page-easy-sourcing .easy-left ul {
    list-style: none;
    margin-bottom: 18px;
}

body.page-easy-sourcing .easy-left li {
    font-size: 14px;
    color: #444;
    margin-bottom: 6px;
}

body.page-easy-sourcing .easy-left a {
    font-weight: bold;
    color: #111;
    text-decoration: none;
}

/* RIGHT FORM */
body.page-easy-sourcing .easy-right {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

body.page-easy-sourcing .form-card {
    background: #fff;
    padding: 26px;
    width: 100%;
    max-width: 520px;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

body.page-easy-sourcing .form-card h3 {
    margin-bottom: 14px;
}

body.page-easy-sourcing .form-card input,
body.page-easy-sourcing .form-card textarea,
body.page-easy-sourcing .form-card select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    margin-bottom: 12px;
}

body.page-easy-sourcing .form-row {
    display: grid;
    grid-template-columns: 1fr 150px;
    gap: 10px;
}

body.page-easy-sourcing .form-card button {
    background: #f44336;
    color: #fff;
    border: none;
    padding: 12px;
    cursor: pointer;
}

/* ================= RESPONSIVE ================= */
@media(max-width:992px) {

    body.page-easy-sourcing .container,
    body.page-easy-sourcing .brands-container,
    body.page-easy-sourcing .easy-sourcing-container {
        width: 100%;
        margin: 0 auto;
        padding-left: 12px;
        padding-right: 12px;
    }

    body.page-easy-sourcing .hero-layout,
    body.page-easy-sourcing .section-container,
    body.page-easy-sourcing .easy-sourcing-container {
        grid-template-columns: 1fr;
        height: auto;
    }

    body.page-easy-sourcing .easy-sourcing-container {
        background: none;
        background: #f5f5f5;
    }

    body.page-easy-sourcing .easy-left::before {
        background: #fff;
    }

    body.page-easy-sourcing .form-row {
        grid-template-columns: 1fr;
    }

    body.page-easy-sourcing .brands-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Filter Machinery Complete */
body.page-filter-machinery-complete * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body.page-filter-machinery-complete body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial,
        sans-serif;
    background-color: #f5f5f5;
    padding: 20px;
}

body.page-filter-machinery-complete .container {
    max-width: 1400px;
    height: calc(100vh - 60px);
    margin: 0 auto;
    display: flex;
    gap: 20px;
    overflow: hidden;
}

body.page-filter-machinery-complete .header-info {
    background: #fff;
    padding: 15px;
    margin-bottom: 20px;
    text-align: center;
    font-size: 14px;
    color: #666;
    position: relative;
}

/* ================= DESKTOP FILTER BUTTON (HIDDEN BY DEFAULT) ================= */
body.page-filter-machinery-complete .mobile-filter-trigger {
    display: none;
}

/* Sidebar Filters */
body.page-filter-machinery-complete .sidebar {
    width: 280px;
    flex-shrink: 0;
    overflow-y: auto;
    height: 100%;
    position: sticky;
    top: 0;
    background: white;
    border-right: 1px solid #e5e5e5;
    padding-right: 10px;
}

body.page-filter-machinery-complete .filter-section {
    background: white;
    border: 1px solid #e5e5e5;
    margin-bottom: 0;
    border-bottom: none;
}

body.page-filter-machinery-complete .filter-section:last-child {
    border-bottom: 1px solid #e5e5e5;
}

body.page-filter-machinery-complete .filter-header {
    padding: 16px 20px;
    background: white;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 500;
    font-size: 15px;
    color: #1a1a1a;
    user-select: none;
}

body.page-filter-machinery-complete .filter-header:hover {
    background: #fafafa;
}

body.page-filter-machinery-complete .filter-arrow {
    font-size: 16px;
    transition: transform 0.2s ease;
    color: #666;
}

body.page-filter-machinery-complete .filter-arrow.collapsed {
    transform: rotate(180deg);
}

body.page-filter-machinery-complete .filter-content {
    padding: 16px 20px;
    max-height: 500px;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

body.page-filter-machinery-complete .filter-content.hidden {
    max-height: 0;
    padding: 0 20px;
}

body.page-filter-machinery-complete .filter-option {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-size: 14px;
    cursor: pointer;
}

body.page-filter-machinery-complete .filter-option:last-child {
    margin-bottom: 0;
}

body.page-filter-machinery-complete .filter-option input[type="checkbox"] {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #d1d1d1;
    border-radius: 3px;
    margin-right: 10px;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}

body.page-filter-machinery-complete .filter-option input[type="checkbox"]:checked {
    background-color: #ff6b35;
    border-color: #ff6b35;
}

body.page-filter-machinery-complete .filter-option input[type="checkbox"]:checked::after {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
}

body.page-filter-machinery-complete .filter-option label {
    cursor: pointer;
    color: #333;
    flex: 1;
}

body.page-filter-machinery-complete .price-range-inputs {
    display: flex;
    gap: 10px;
    align-items: center;
}

body.page-filter-machinery-complete .price-range-inputs input {
    width: 70px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 12px;
}

body.page-filter-machinery-complete .price-range-inputs button {
    background: #ff6600;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
}

body.page-filter-machinery-complete .products-section {
    flex: 1;
    overflow-y: auto;
    height: 100%;
    padding-right: 10px;
}

body.page-filter-machinery-complete .products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

body.page-filter-machinery-complete .product-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.3s, transform 0.3s;
    border: 1px solid #e5e5e5;
}

body.page-filter-machinery-complete .product-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-4px);
}

body.page-filter-machinery-complete .product-image {
    position: relative;
    height: 280px;
    background: #f8f9fa;
    overflow: hidden;
}

body.page-filter-machinery-complete .product-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

body.page-filter-machinery-complete .product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: opacity 0.4s ease;
}

body.page-filter-machinery-complete .product-image .main-image {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    z-index: 1;
}

body.page-filter-machinery-complete .product-image .hover-image {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 2;
    transform: translateX(100%);
    transition: transform 0.5s ease, opacity 0.5s ease;
}

body.page-filter-machinery-complete .product-card:hover .main-image {
    opacity: 0;
}

body.page-filter-machinery-complete .product-card:hover .hover-image {
    opacity: 1;
    transform: translateX(0);
}

body.page-filter-machinery-complete .product-info {
    padding: 20px;
    border-top: 1px solid #f0f0f0;
}

body.page-filter-machinery-complete .product-title {
    font-size: 15px;
    color: #1a1a1a;
    margin-bottom: 12px;
    height: 44px;
    overflow: hidden;
    line-height: 1.5;
    font-weight: 400;
}

body.page-filter-machinery-complete .product-title a {
    color: #1a1a1a;
    text-decoration: none;
}

body.page-filter-machinery-complete .product-title a:hover {
    color: #ff6600;
}

body.page-filter-machinery-complete .product-sku {
    font-size: 13px;
    color: #666;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

body.page-filter-machinery-complete .status-badge {
    display: inline-block;
    padding: 3px 8px;
    background: #4a90e2;
    color: white;
    font-size: 11px;
    border-radius: 3px;
    font-weight: 500;
}

body.page-filter-machinery-complete .product-price {
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 8px;
}

body.page-filter-machinery-complete .product-moq {
    font-size: 13px;
    color: #666;
    margin-bottom: 15px;
}

body.page-filter-machinery-complete .supplier-name {
    font-size: 14px;
    color: #1a1a1a;
    margin-bottom: 8px;
    text-decoration: underline;
    display: block;
}

body.page-filter-machinery-complete .supplier-name:hover {
    color: #ff6600;
}

body.page-filter-machinery-complete .supplier-info {
    font-size: 12px;
    color: #666;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

body.page-filter-machinery-complete .supplier-info .flag {
    width: 20px;
    height: auto;
}

body.page-filter-machinery-complete .rating {
    color: #ffa500;
    margin: 0 4px;
}

body.page-filter-machinery-complete .verified-badge {
    color: #4a90e2;
    font-weight: 500;
}

body.page-filter-machinery-complete .product-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

body.page-filter-machinery-complete .btn {
    flex: 1;
    padding: 11px 20px;
    border: 1.5px solid #1a1a1a;
    border-radius: 24px;
    cursor: pointer;
    font-size: 13px;
    text-align: center;
    background: white;
    transition: all 0.3s;
    font-weight: 500;
    white-space: nowrap;
}

body.page-filter-machinery-complete .btn:hover {
    background: #1a1a1a;
    color: white;
}

body.page-filter-machinery-complete .btn-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    border: 1.5px solid #1a1a1a;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s;
    flex-shrink: 0;
}

body.page-filter-machinery-complete .btn-icon:hover {
    background: #1a1a1a;
    color: white;
}

body.page-filter-machinery-complete .btn-icon i {
    font-size: 18px;
}

/* Recommendation Section */
body.page-filter-machinery-complete .recommendation-section {
    background-color: #fff;
    padding: 30px 20px;
    margin: 20px auto;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    max-width: 1400px;
}

body.page-filter-machinery-complete .recommendation-section h2 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #1a1a1a;
}

body.page-filter-machinery-complete .carousel-wrapper {
    position: relative;
}

body.page-filter-machinery-complete .carousel {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 16px;
    padding: 10px 0;
}

body.page-filter-machinery-complete .carousel::-webkit-scrollbar {
    height: 6px;
}

body.page-filter-machinery-complete .carousel::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 3px;
}

body.page-filter-machinery-complete .carousel .product-card {
    flex: 0 0 calc(25% - 12px);
    min-width: 280px;
}

body.page-filter-machinery-complete .carousel .product-image {
    height: 200px;
}

body.page-filter-machinery-complete .carousel-arrow {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    background: #fff;
    color: #000;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    border: 1px solid #e5e5e5;
    cursor: pointer;
    z-index: 10;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

body.page-filter-machinery-complete .carousel-arrow:hover {
    background: #1a1a1a;
    color: white;
    border-color: #1a1a1a;
}

body.page-filter-machinery-complete .arrow-left {
    left: -15px;
}

body.page-filter-machinery-complete .arrow-right {
    right: -15px;
}

@media (max-width: 1200px) {
    body.page-filter-machinery-complete .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    body.page-filter-machinery-complete .carousel .product-card {
        flex: 0 0 calc(50% - 12px);
    }
}

@media (max-width: 768px) {

    /* Keep recommended responsive as you said it's good */
    body.page-filter-machinery-complete .container {
        flex-direction: column;
        height: auto;
        overflow: visible;
    }

    body.page-filter-machinery-complete body {
        padding: 10px;
    }

    body.page-filter-machinery-complete .products-section {
        height: auto;
        overflow: visible;
        padding-right: 0;
    }

    /* ====== TOP PRODUCTS LIKE YOUR SCREENSHOT (HORIZONTAL SWIPE) ====== */
    body.page-filter-machinery-complete .products-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        padding: 10px 6px 14px;
    }

    body.page-filter-machinery-complete .products-grid::-webkit-scrollbar {
        display: none;
    }

    body.page-filter-machinery-complete .product-image {
        height: 180px;
        width: 100%;
    }

    body.page-filter-machinery-complete .product-info {
        padding: 10px;
        width: 100%;
    }

    body.page-filter-machinery-complete .product-title {
        font-size: 12px;
        height: auto;
        margin-bottom: 8px;
    }

    body.page-filter-machinery-complete .product-price {
        font-size: 14px;
    }

    body.page-filter-machinery-complete .btn {
        padding: 8px 9px;
        font-size: 11px;
    }

    body.page-filter-machinery-complete .btn-icon {
        width: 32px;
        height: 32px;
        min-width: 32px;
    }

    body.page-filter-machinery-complete .product-actions {
        display: grid;
        grid-template-columns: 1fr auto;
        grid-template-areas:
            "contact contact"
            "chat cart";
        gap: 8px;
        align-items: center;
    }

    body.page-filter-machinery-complete .product-actions .btn:first-child {
        grid-area: contact;
        width: 100%;
    }

    body.page-filter-machinery-complete .product-actions .btn:nth-child(2) {
        grid-area: chat;
        width: 100%;
    }

    body.page-filter-machinery-complete .product-actions .btn-icon {
        grid-area: cart;
        justify-self: end;
    }

    body.page-filter-machinery-complete .product-sku,
    body.page-filter-machinery-complete .product-moq,
    body.page-filter-machinery-complete .supplier-name,
    body.page-filter-machinery-complete .supplier-info {
        font-size: 11px;
    }

    body.page-filter-machinery-complete .status-badge {
        font-size: 10px;
        padding: 3px 8px;
    }

    body.page-filter-machinery-complete .rating,
    body.page-filter-machinery-complete .verified-badge {
        font-size: 11px;
    }

    /* ====== FILTER TRIGGER (ONLY MOBILE) ====== */
    body.page-filter-machinery-complete .mobile-filter-trigger {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 12px;
        border: 1px solid #ddd;
        background: #fff;
        border-radius: 6px;
        cursor: pointer;
        font-size: 13px;
        color: #111;
        margin-bottom: 10px;
    }

    body.page-filter-machinery-complete .mobile-filter-row {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 10px;
        padding: 10px 6px 0;
    }

    /* ====== FILTER DRAWER ====== */
    body.page-filter-machinery-complete .sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        width: 85%;
        max-width: 420px;
        height: 100%;
        z-index: 1000;
        background: #fff;
        transition: left 0.3s ease;
        padding-right: 0;
        overflow-y: auto;
    }

    body.page-filter-machinery-complete .sidebar.active {
        left: 0;
    }

    /* Drawer header like your screenshot */
    body.page-filter-machinery-complete .filter-drawer-header {
        position: sticky;
        top: 0;
        z-index: 1001;
        background: #fff;
        padding: 18px 18px;
        border-bottom: 1px solid #e5e5e5;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    body.page-filter-machinery-complete .filter-drawer-title {
        font-size: 28px;
        font-weight: 700;
        color: #111;
    }

    body.page-filter-machinery-complete .filter-drawer-close {
        background: none;
        border: none;
        font-size: 26px;
        cursor: pointer;
        line-height: 1;
        color: #111;
    }

    body.page-filter-machinery-complete .filter-drawer-divider {
        height: 1px;
        background: #e5e5e5;
        margin: 0 18px 8px;
    }

    /* Overlay */
    body.page-filter-machinery-complete .filter-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 999;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.2s ease;
    }

    body.page-filter-machinery-complete .filter-overlay.active {
        opacity: 1;
        pointer-events: auto;
    }
}

body.page-filter-machinery-complete .products-section::-webkit-scrollbar,
body.page-filter-machinery-complete .sidebar::-webkit-scrollbar {
    width: 6px;
}

body.page-filter-machinery-complete .products-section::-webkit-scrollbar-thumb,
body.page-filter-machinery-complete .sidebar::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 3px;
}

/* Hide drawer header on desktop ALWAYS */
body.page-filter-machinery-complete .filter-drawer-header,
body.page-filter-machinery-complete .filter-drawer-divider {
    display: none;
}

@media (max-width: 768px) {

    body.page-filter-machinery-complete .filter-drawer-header,
    body.page-filter-machinery-complete .filter-drawer-divider {
        display: flex;
    }

    body.page-filter-machinery-complete .filter-drawer-divider {
        display: block;
    }
}

/* Hart-nd-crafts */
body.page-hart-nd-crafts * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

body.page-hart-nd-crafts body {
    background: #e5e5e5;
}

/* ===== WRAPPER ===== */
body.page-hart-nd-crafts .section-wrapper {
    background: #e5e5e5;
    padding: 30px 0;
}

body.page-hart-nd-crafts .section-container {
    width: 1200px;
    margin: auto;
    background: #fff;
    display: grid;
    grid-template-columns: 300px 1fr;
    border: 1px solid #e5e5e5;
}

/* ===== LEFT BIG IMAGE ===== */
body.page-hart-nd-crafts .left-big {
    background: #f3e8f3;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

body.page-hart-nd-crafts .left-big img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== RIGHT GRID ===== */
body.page-hart-nd-crafts .right-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    border-left: 1px solid #e5e5e5;
}

body.page-hart-nd-crafts .grid-item {
    border-left: 1px solid #eef1f6;
    border-bottom: 1px solid #eef1f6;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;

    /* Hover support */
    position: relative;
    cursor: pointer;
}

body.page-hart-nd-crafts .grid-item img {
    width: 100%;
    height: 120px;
    object-fit: contain;
    z-index: 1;
}

/* Remove double borders */
body.page-hart-nd-crafts .grid-item:nth-child(4n + 1) {
    border-left: none;
}

body.page-hart-nd-crafts .grid-item:nth-last-child(-n + 4) {
    border-bottom: none;
}

/* ===== HOVER BARS (copied from trending) ===== */
body.page-hart-nd-crafts .grid-item .bar-left,
body.page-hart-nd-crafts .grid-item .bar-right,
body.page-hart-nd-crafts .grid-item .bar-bottom {
    position: absolute;
    background: #d9d9d9;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 2;
}

body.page-hart-nd-crafts .grid-item .bar-left {
    left: 12px;
    top: 12px;
    bottom: 12px;
    width: 8px;
}

body.page-hart-nd-crafts .grid-item .bar-right {
    right: 12px;
    top: 12px;
    bottom: 12px;
    width: 8px;
}

body.page-hart-nd-crafts .grid-item .bar-bottom {
    left: 12px;
    right: 12px;
    bottom: 12px;
    height: 8px;
}

body.page-hart-nd-crafts .grid-item:hover .bar-left,
body.page-hart-nd-crafts .grid-item:hover .bar-right,
body.page-hart-nd-crafts .grid-item:hover .bar-bottom {
    opacity: 1;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1250px) {
    body.page-hart-nd-crafts .section-container {
        width: 100%;
        margin: 0 12px;
    }
}

@media (max-width: 992px) {
    body.page-hart-nd-crafts .section-container {
        grid-template-columns: 1fr;
    }

    body.page-hart-nd-crafts .right-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }

    body.page-hart-nd-crafts .grid-item img {
        height: 100px;
    }
}

/* Footer */
body.page-footer * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

body.page-footer body {
    background: #e5e5e5;
}

/* ================= SECURED BAR ================= */
body.page-footer .secured-bar {
    background: #ef3b36;
    height: 100px;
    display: flex;
    align-items: center;
    margin-bottom: 40px;
}

body.page-footer .secured-bar-inner {
    width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
}

body.page-footer .secured-left img {
    height: 60px;
}

body.page-footer .secured-center {
    text-align: center;
    color: #fff;
    font-size: 42px;
    font-weight: 800;
}

body.page-footer .secured-right a {
    background: #fff;
    color: #ef3b36;
    font-size: 16px;
    font-weight: 600;
    padding: 10px 24px;
    border-radius: 18px;
    text-decoration: none;
}

/* ================= FOOTER ================= */
body.page-footer .footer {
    background: #d0d3d4;
    padding: 40px 0 20px;
}

body.page-footer .footer-inner {
    width: 1200px;
    margin: auto;
}

body.page-footer .footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

/* ================= COLUMNS ================= */
body.page-footer .footer h4 {
    font-size: 14px;
    margin-bottom: 10px;
}

body.page-footer .footer ul {
    list-style: none;
}

body.page-footer .footer li {
    font-size: 12px;
    color: #333;
    margin-bottom: 6px;
    cursor: pointer;
}

body.page-footer .footer li:hover {
    text-decoration: underline;
}

/* ================= PAYMENT CARDS ================= */
body.page-footer .cards {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
}

body.page-footer .cards img {
    width: 100%;
    height: 24px;
    object-fit: contain;
}

/* ================= TRUSTPILOT ================= */
body.page-footer .trustpilot {
    margin-top: 14px;
}

body.page-footer .trustpilot-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

body.page-footer .trustpilot-header img {
    height: 20px;
}

body.page-footer .trustpilot-header h4 {
    margin: 0;
}

body.page-footer .trustpilot-stars img {
    height: 20px;
    margin-bottom: 6px;
}

body.page-footer .trustpilot p {
    font-size: 11px;
    margin-top: 6px;
}

/* ================= NEWSLETTER - FIXED VERSION ================= */
body.page-footer .newsletter {
    display: flex;
    max-width: 420px;
    height: 40px;
    overflow: hidden;
    border-radius: 6px;
    margin-bottom: 16px;
    background: #fff;
}

body.page-footer .newsletter input[type="email"] {
    flex: 1;
    border: none;
    padding: 0 14px;
    font-size: 14px;
    outline: none;
    background: #fff;
    color: #333;
    height: 100%;
}

body.page-footer .newsletter button {
    background-color: #333;
    color: #f1cbb0;
    border: none;
    padding: 0 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    height: 100%;
    transition: background 0.2s ease;
}

body.page-footer .newsletter button:hover {
    background-color: #000;
}

/* ================= OUR MOBILE APPS ================= */
body.page-footer .footer-apps {
    margin-top: 16px;
}

body.page-footer .apps-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 12px;
}

body.page-footer .apps-buttons {
    display: flex;
    gap: 14px;
}

body.page-footer .app-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid #bfc3c5;
    border-radius: 8px;
    text-decoration: none;
    min-width: 190px;
    transition: all 0.3s ease;
    cursor: pointer;
}

body.page-footer .app-btn:hover {
    background-color: #fff;
    border-color: #999;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

body.page-footer .app-btn img {
    height: 26px;
}

body.page-footer .app-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

body.page-footer .app-text span {
    font-size: 11px;
    color: #333;
}

body.page-footer .app-text strong {
    font-size: 15px;
    font-weight: 700;
    color: #000;
}

/* ================= SOCIAL ================= */
body.page-footer .socials {
    margin-top: 14px;
    display: flex;
    gap: 14px;
}

body.page-footer .socials a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    transition: all 0.3s ease;
    cursor: pointer;
}

body.page-footer .socials a:hover {
    background-color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

body.page-footer .socials img {
    height: 18px;
    opacity: 0.85;
}

body.page-footer .socials a:hover img {
    opacity: 1;
}

/* ================= BOTTOM ================= */
body.page-footer .footer-bottom {
    margin-top: 30px;
    border-top: 1px solid #999;
    padding-top: 12px;
    text-align: center;
    font-size: 11px;
    color: #333;
}

/* ================= MOBILE RESPONSIVE ================= */
@media (max-width: 1240px) {

    body.page-footer .secured-bar-inner,
    body.page-footer .footer-inner {
        width: 95%;
        padding: 0 20px;
    }
}

@media (max-width: 992px) {
    body.page-footer .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    body.page-footer .secured-center {
        font-size: 32px;
    }

    body.page-footer .apps-buttons {
        flex-direction: column;
    }

    body.page-footer .app-btn {
        min-width: 100%;
    }
}

@media (max-width: 768px) {
    body.page-footer .secured-bar {
        height: auto;
        padding: 20px 0;
    }

    body.page-footer .secured-bar-inner {
        grid-template-columns: 1fr;
        gap: 15px;
        text-align: center;
    }

    body.page-footer .secured-center {
        font-size: 28px;
    }

    body.page-footer .secured-left {
        display: flex;
        justify-content: center;
    }

    body.page-footer .secured-right {
        display: flex;
        justify-content: center;
    }

    body.page-footer .footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    body.page-footer .newsletter {
        max-width: 100%;
    }

    body.page-footer .cards {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 480px) {
    body.page-footer .secured-center {
        font-size: 22px;
    }

    body.page-footer .secured-left img {
        height: 45px;
    }

    body.page-footer .secured-right a {
        font-size: 14px;
        padding: 8px 18px;
    }

    body.page-footer .footer {
        padding: 30px 0 15px;
    }

    body.page-footer .cards {
        grid-template-columns: repeat(3, 1fr);
    }

    body.page-footer .socials {
        flex-wrap: wrap;
    }

    body.page-footer .newsletter {
        flex-direction: column;
        height: auto;
    }

    body.page-footer .newsletter input[type="email"] {
        padding: 12px 14px;
    }

    body.page-footer .newsletter button {
        padding: 12px 18px;
    }
}

body.page-footer .footer-accept-title {
    margin-top: 14px;
}

body.page-footer .footer-community-title {
    margin-top: 16px;
}

/* Forgot */
body.page-forgot * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body.page-forgot html,
body.page-forgot body {
    font-family: Arial, sans-serif;
    background-color: #fff;
}

body.page-forgot body {
    display: flex;
    flex-direction: column;
}

body.page-forgot .auth-container {
    position: relative;
    width: 100%;
    background: url('login/Frame 309.png') no-repeat center center;
    background-size: contain;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 60px 0;
}

body.page-forgot .auth-form {
    width: 350px;
    background-color: rgba(255, 255, 255, 0.97);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
    z-index: 2;
    margin-right: 108px;
}

body.page-forgot .auth-form h3 {
    font-size: 22px;
    margin-bottom: 15px;
}

body.page-forgot .auth-form input[type="text"],
body.page-forgot .auth-form input[type="email"],
body.page-forgot .auth-form input[type="password"] {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
}

body.page-forgot .input-send {
    display: flex;
    margin-top: 10px;
    border-bottom: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
    height: 40px;
    place-items: center;
}

body.page-forgot .input-send input {
    flex: 1;
    border: none;
    padding: 0 10px;
    font-size: 14px;
    outline: none;
    height: 100%;
}

body.page-forgot .input-send button {
    width: 10%;
    min-width: 44px;
    border: none;
    background: #000;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: grid;
    place-items: center;
    height: 100%;
}

body.page-forgot .flex {
    display: flex;
}

body.page-forgot .space-between {
    justify-content: space-between;
    align-items: center;
}

body.page-forgot .italic-text {
    font-style: italic;
}

body.page-forgot .muted {
    color: #777;
    font-size: 13px;
}

body.page-forgot .btn {
    padding: 10px;
    width: 100%;
    margin-top: 10px;
    cursor: pointer;
    border-radius: 5px;
    border: none;
    font-size: 15px;
}

body.page-forgot .btn.primary {
    background-color: #000;
    color: #eee;
}

body.page-forgot .btn.secondary {
    background-color: #eee;
    color: #000;
}

body.page-forgot .btn.small {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 18px;
    font-weight: bold;
    border: none;
    background-color: #f0f0f0;
    color: #000;
}

body.page-forgot .social-icons {
    margin-top: 12px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

@media (max-width: 768px) {
    body.page-forgot .auth-container {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 20px;
        background-position: top;
        background-size: cover;
    }

    body.page-forgot .auth-form {
        width: 90%;
        margin: 20px 0 0 0;
    }
}

body.page-forgot .secured-bar {
    background: #ef3b36;
    height: 70px;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

body.page-forgot .secured-bar-inner {
    width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
}

body.page-forgot .secured-left img {
    height: 40px;
}

body.page-forgot .secured-center {
    text-align: center;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}

body.page-forgot .secured-right a {
    background: #fff;
    color: #ef3b36;
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 14px;
    text-decoration: none;
}

body.page-forgot .footer {
    background: #d0d3d4;
    padding: 40px 0 20px;
}

body.page-forgot .footer-inner {
    width: 1200px;
    margin: auto;
}

body.page-forgot .footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

body.page-forgot .footer h4 {
    font-size: 14px;
    margin-bottom: 10px;
}

body.page-forgot .footer ul {
    list-style: none;
}

body.page-forgot .footer li {
    font-size: 12px;
    color: #333;
    margin-bottom: 6px;
    cursor: pointer;
}

body.page-forgot .footer li:hover {
    text-decoration: underline;
}

body.page-forgot .cards {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
}

body.page-forgot .cards img {
    width: 100%;
    height: 24px;
    object-fit: contain;
}

body.page-forgot .trustpilot {
    margin-top: 14px;
}

body.page-forgot .trustpilot img {
    height: 20px;
}

body.page-forgot .trustpilot p {
    font-size: 11px;
    margin-top: 6px;
}

body.page-forgot .newsletter {
    display: flex;
    max-width: 420px;
    height: 40px;
    overflow: hidden;
    border-radius: 6px;
    margin-bottom: 16px;
    background: #fff;
}

body.page-forgot .newsletter input[type="email"] {
    flex: 1;
    border: none;
    padding: 0 14px;
    font-size: 14px;
    outline: none;
    background: #fff;
    color: #333;
    height: 100%;
}

body.page-forgot .newsletter button {
    background-color: #333;
    color: #f1cbb0;
    border: none;
    padding: 0 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    height: 100%;
    transition: background 0.2s ease;
}

body.page-forgot .newsletter button:hover {
    background-color: #000;
}

body.page-forgot .footer-apps {
    margin-top: 16px;
}

body.page-forgot .apps-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 12px;
}

body.page-forgot .apps-buttons {
    display: flex;
    gap: 14px;
}

body.page-forgot .app-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid #bfc3c5;
    border-radius: 8px;
    text-decoration: none;
    min-width: 190px;
}

body.page-forgot .app-btn img {
    height: 26px;
}

body.page-forgot .app-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

body.page-forgot .app-text span {
    font-size: 11px;
    color: #333;
}

body.page-forgot .app-text strong {
    font-size: 15px;
    font-weight: 700;
    color: #000;
}

body.page-forgot .socials {
    margin-top: 14px;
    display: flex;
    gap: 14px;
}

body.page-forgot .socials img {
    height: 18px;
    opacity: 0.85;
}

body.page-forgot .footer-bottom {
    margin-top: 30px;
    border-top: 1px solid #999;
    padding-top: 12px;
    text-align: center;
    font-size: 11px;
    color: #333;
}

body.page-forgot .auth-help-row {
    margin: 10px 0;
    font-style: italic;
}

body.page-forgot .auth-muted-center {
    text-align: center;
    color: #999;
    font-size: 12px;
    margin: 10px 0;
}

/* Hhero */
/* ================= RESET ================= */
body.page-hhero * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

body.page-hhero body {
    background: #f2f2f2;
}

/* ================= CONTAINER ================= */
body.page-hhero .container {
    width: 1200px;
    margin: auto;
}

/* ================= HERO WRAPPER ================= */
body.page-hhero .hero-wrapper {
    background: #fff;
    padding: 12px 0;
}

/* ================= HERO GRID ================= */
body.page-hhero .hero-layout {
    display: grid;
    grid-template-columns: 240px 1fr 266px;
    gap: 12px;
    height: 360px;
    align-items: stretch;
}

/* ================= LEFT CATEGORIES ================= */
body.page-hhero .hero-categories {
    border: 1px solid #e5e5e5;
    background: #fff;
    display: flex;
    flex-direction: column;
    font-size: 13px;
}

body.page-hhero .hero-categories h4 {
    padding: 9px 10px;
    border-bottom: 1px solid #eee;
    background: #fafafa;
    font-size: 14px;
    font-weight: bold;
}

body.page-hhero .hero-categories ul {
    list-style: none;
    padding: 6px 8px;
    flex: 1;
    overflow-y: auto;
}

body.page-hhero .hero-categories li {
    padding: 6px;
    cursor: pointer;
    color: #111;
}

body.page-hhero .hero-categories li:hover {
    background: #f5f5f5;
}

body.page-hhero .hero-categories .more {
    color: #2563eb;
    font-weight: bold;
}

/* ================= CENTER SLIDER ================= */
body.page-hhero .hero-slider {
    position: relative;
    border: 1px solid #e5e5e5;
    overflow: hidden;
    background: #fff;
}

body.page-hhero .slides {
    position: relative;
    width: 100%;
    height: 100%;
}

body.page-hhero .slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* 🔑 FIX: NO TEXT CUT */
    background: #fff;
    opacity: 0;
    transition: opacity 0.6s ease;
}

body.page-hhero .slide.active {
    opacity: 1;
}

/* ================= RIGHT PANEL ================= */
body.page-hhero .hero-right {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: 100%;
}

body.page-hhero .right-box {
    border: 1px solid #e5e5e5;
    background: #fff;
    flex: 1;
}

body.page-hhero .right-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 1250px) {
    body.page-hhero .container {
        width: 100%;
        padding: 0 12px;
    }
}

@media (max-width: 992px) {
    body.page-hhero .hero-layout {
        grid-template-columns: 1fr;
        height: auto;
    }

    body.page-hhero .hero-right {
        flex-direction: row;
    }

    body.page-hhero .right-box {
        height: 160px;
    }
}

/* Hmanufacturing and Machinery */
body.page-hmanufacturing-and-machinery * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

body.page-hmanufacturing-and-machinery body {
    background: #e5e5e5;
}

/* ===== WRAPPER ===== */
body.page-hmanufacturing-and-machinery .section-wrapper {
    background: #e5e5e5;
    padding: 30px 0;
}

body.page-hmanufacturing-and-machinery .section-container {
    width: 1200px;
    margin: auto;
    background: #fff;
    display: grid;
    grid-template-columns: 300px 1fr;
    border: 1px solid #e5e5e5;
}

/* ===== LEFT BIG IMAGE ===== */
body.page-hmanufacturing-and-machinery .left-big {
    background: #f3e8f3;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

body.page-hmanufacturing-and-machinery .left-big img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== RIGHT GRID ===== */
body.page-hmanufacturing-and-machinery .right-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    border-left: 1px solid #e5e5e5;
}

body.page-hmanufacturing-and-machinery .grid-item {
    border-left: 1px solid #eef1f6;
    border-bottom: 1px solid #eef1f6;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;

    /* hover support */
    position: relative;
    cursor: pointer;
}

body.page-hmanufacturing-and-machinery .grid-item img {
    width: 100%;
    height: 120px;
    object-fit: contain;
    z-index: 1;
}

/* Remove double borders */
body.page-hmanufacturing-and-machinery .grid-item:nth-child(4n + 1) {
    border-left: none;
}

body.page-hmanufacturing-and-machinery .grid-item:nth-last-child(-n + 4) {
    border-bottom: none;
}

/* ===== HOVER BARS (SAME AS TRENDING) ===== */
body.page-hmanufacturing-and-machinery .grid-item .bar-left,
body.page-hmanufacturing-and-machinery .grid-item .bar-right,
body.page-hmanufacturing-and-machinery .grid-item .bar-bottom {
    position: absolute;
    background: #d9d9d9;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 2;
}

body.page-hmanufacturing-and-machinery .grid-item .bar-left {
    left: 12px;
    top: 12px;
    bottom: 12px;
    width: 8px;
}

body.page-hmanufacturing-and-machinery .grid-item .bar-right {
    right: 12px;
    top: 12px;
    bottom: 12px;
    width: 8px;
}

body.page-hmanufacturing-and-machinery .grid-item .bar-bottom {
    left: 12px;
    right: 12px;
    bottom: 12px;
    height: 8px;
}

body.page-hmanufacturing-and-machinery .grid-item:hover .bar-left,
body.page-hmanufacturing-and-machinery .grid-item:hover .bar-right,
body.page-hmanufacturing-and-machinery .grid-item:hover .bar-bottom {
    opacity: 1;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1250px) {
    body.page-hmanufacturing-and-machinery .section-container {
        width: 100%;
        margin: 0 12px;
    }
}

@media (max-width: 992px) {
    body.page-hmanufacturing-and-machinery .section-container {
        grid-template-columns: 1fr;
    }

    body.page-hmanufacturing-and-machinery .right-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: auto;
    }

    body.page-hmanufacturing-and-machinery .grid-item img {
        height: 100px;
    }
}

/* Htop Brands */
body.page-htop-brands * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

body.page-htop-brands body {
    background: #e5e5e5;
}

/* ===== SECTION ===== */
body.page-htop-brands .brands-wrapper {
    background: #e5e5e5;
    padding: 40px 20px 60px;
}

body.page-htop-brands .brands-container {
    width: 1200px;
    margin: auto;
}

/* ===== HEADER ===== */
body.page-htop-brands .brands-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

body.page-htop-brands .brands-title {
    font-size: 22px;
    font-weight: bold;
    color: #222;
}

body.page-htop-brands .view-all-link {
    color: #2f7cf6;
    font-size: 14px;
    text-decoration: none;
}

body.page-htop-brands .view-all-link:hover {
    text-decoration: underline;
}

/* ===== GRID ===== */
body.page-htop-brands .brands-grid {
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    gap: 26px;
    margin-bottom: 26px;
}

/* ===== ITEM ===== */
body.page-htop-brands .brand-item {
    display: flex;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.25s ease;
}

body.page-htop-brands .brand-item:hover {
    transform: translateY(-6px);
}

/* ===== CIRCLE ===== */
body.page-htop-brands .brand-logo {
    width: 120px;
    /* ⬆ BIGGER */
    height: 120px;
    /* ⬆ BIGGER */
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

/* ===== LOGO IMAGE ===== */
body.page-htop-brands .brand-logo img {
    width: 90%;
    /* ⬆ BIGGER */
    height: 90%;
    /* ⬆ BIGGER */
    object-fit: contain;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1250px) {
    body.page-htop-brands .brands-container {
        width: 100%;
        padding: 0 20px;
    }
}

@media (max-width: 992px) {
    body.page-htop-brands .brands-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    body.page-htop-brands .brand-logo {
        width: 100px;
        height: 100px;
    }
}

@media (max-width: 768px) {
    body.page-htop-brands .brands-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 480px) {
    body.page-htop-brands .brands-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    body.page-htop-brands .brand-logo {
        width: 85px;
        height: 85px;
    }
}

/* Htrending */
body.page-htrending * {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}

body.page-htrending body {
    margin: 0;
    background: #fff;
    color: #111;
}

body.page-htrending .container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 16px;
}

body.page-htrending .section-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 20px;
}

/* GRID 6 × 2 */
body.page-htrending .product-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 24px;
}

/* CARD */
body.page-htrending .product-card {
    text-align: center;
    cursor: pointer;
}

/* IMAGE BOX */
body.page-htrending .product-img-wrapper {
    position: relative;
    background: #fff;
    padding: 20px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* HOVER BARS */
body.page-htrending .product-img-wrapper .bar-left,
body.page-htrending .product-img-wrapper .bar-right,
body.page-htrending .product-img-wrapper .bar-bottom {
    position: absolute;
    background: #d9d9d9;
    opacity: 0;
    transition: opacity 0.2s ease;
}

body.page-htrending .bar-left {
    left: 12px;
    top: 12px;
    bottom: 12px;
    width: 8px;
}

body.page-htrending .bar-right {
    right: 12px;
    top: 12px;
    bottom: 12px;
    width: 8px;
}

body.page-htrending .bar-bottom {
    left: 12px;
    right: 12px;
    bottom: 12px;
    height: 8px;
}

/* HOVER + ACTIVE STATE */
body.page-htrending .product-card:hover .bar-left,
body.page-htrending .product-card:hover .bar-right,
body.page-htrending .product-card:hover .bar-bottom,
body.page-htrending .product-card.active .bar-left,
body.page-htrending .product-card.active .bar-right,
body.page-htrending .product-card.active .bar-bottom {
    opacity: 1;
}

body.page-htrending .product-img-wrapper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    z-index: 2;
}

body.page-htrending .product-title {
    margin-top: 10px;
    font-size: 13px;
    color: #666;
}

/* RESPONSIVE */
@media (max-width: 1100px) {
    body.page-htrending .product-grid {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: auto;
    }
}

@media (max-width: 768px) {
    body.page-htrending .product-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    body.page-htrending .product-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Modeling Machine Listing */
body.page-modeling-machine-listing * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body.page-modeling-machine-listing body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial,
        sans-serif;
    background-color: #f5f5f5;
    padding: 20px;
}

body.page-modeling-machine-listing .container {
    max-width: 1400px;
    height: calc(100vh - 60px);
    /* adjust 60px based on your header */
    margin: 0 auto;
    display: flex;
    gap: 20px;
    overflow: hidden;
    /* prevent page scroll */
}

body.page-modeling-machine-listing .header-info {
    background: #fff;
    padding: 15px;
    margin-bottom: 20px;
    text-align: center;
    font-size: 14px;
    color: #666;
}

/* Sidebar Filters */
body.page-modeling-machine-listing .sidebar {
    width: 280px;
    flex-shrink: 0;
    overflow-y: auto;
    height: 100%;
    position: sticky;
    top: 0;
    background: white;
    border-right: 1px solid #e5e5e5;
    padding-right: 10px;
}

body.page-modeling-machine-listing .filter-section {
    background: white;
    border: 1px solid #e5e5e5;
    margin-bottom: 0;
    border-bottom: none;
}

body.page-modeling-machine-listing .filter-section:last-child {
    border-bottom: 1px solid #e5e5e5;
}

body.page-modeling-machine-listing .filter-header {
    padding: 16px 20px;
    background: white;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    font-weight: 500;
    font-size: 15px;
    color: #1a1a1a;
    user-select: none;
}

body.page-modeling-machine-listing .filter-header:hover {
    background: #fafafa;
}

body.page-modeling-machine-listing .filter-arrow {
    font-size: 16px;
    transition: transform 0.2s ease;
    color: #666;
}

body.page-modeling-machine-listing .filter-arrow.collapsed {
    transform: rotate(180deg);
}

body.page-modeling-machine-listing .filter-content {
    padding: 16px 20px;
    max-height: 500px;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

body.page-modeling-machine-listing .filter-content.hidden {
    max-height: 0;
    padding: 0 20px;
}

body.page-modeling-machine-listing .filter-option {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-size: 14px;
    cursor: pointer;
}

body.page-modeling-machine-listing .filter-option:last-child {
    margin-bottom: 0;
}

body.page-modeling-machine-listing .filter-option input[type="checkbox"] {
    appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #d1d1d1;
    border-radius: 3px;
    margin-right: 10px;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
}

body.page-modeling-machine-listing .filter-option input[type="checkbox"]:checked {
    background-color: #ff6b35;
    border-color: #ff6b35;
}

body.page-modeling-machine-listing .filter-option input[type="checkbox"]:checked::after {
    content: "✓";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
}

body.page-modeling-machine-listing .filter-option label {
    cursor: pointer;
    color: #333;
    flex: 1;
}

body.page-modeling-machine-listing .price-range-inputs {
    display: flex;
    gap: 10px;
    align-items: center;
}

body.page-modeling-machine-listing .price-range-inputs input {
    width: 70px;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 12px;
}

body.page-modeling-machine-listing .price-range-inputs button {
    background: #ff6600;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 3px;
    cursor: pointer;
    font-size: 12px;
}

body.page-modeling-machine-listing .products-section {
    flex: 1;
    overflow-y: auto;
    height: 100%;
    padding-right: 10px;
}

body.page-modeling-machine-listing .products-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

body.page-modeling-machine-listing .product-card {
    background: white;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 0.3s;
    border: 1px solid #e5e5e5;
}

body.page-modeling-machine-listing .product-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

body.page-modeling-machine-listing .product-image {
    position: relative;
    height: 220px;
    /* fixed block height */
    background: #f8f9fa;
    overflow: hidden;
    /* prevents overflow */
}

body.page-modeling-machine-listing .product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 🔥 fills the block */
    display: block;
}

body.page-modeling-machine-listing .product-info {
    padding: 20px;
    border-top: 1px solid #f0f0f0;
}

body.page-modeling-machine-listing .product-title {
    font-size: 15px;
    color: #1a1a1a;
    margin-bottom: 12px;
    height: 44px;
    overflow: hidden;
    line-height: 1.5;
    font-weight: 400;
}

body.page-modeling-machine-listing .product-title a {
    color: #1a1a1a;
    text-decoration: none;
}

body.page-modeling-machine-listing .product-title a:hover {
    color: #ff6600;
}

body.page-modeling-machine-listing .product-sku {
    font-size: 13px;
    color: #666;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

body.page-modeling-machine-listing .status-badge {
    display: inline-block;
    padding: 3px 8px;
    background: #4a90e2;
    color: white;
    font-size: 11px;
    border-radius: 3px;
    font-weight: 500;
}

body.page-modeling-machine-listing .product-price {
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
    margin-bottom: 8px;
}

body.page-modeling-machine-listing .product-moq {
    font-size: 13px;
    color: #666;
    margin-bottom: 15px;
}

body.page-modeling-machine-listing .supplier-name {
    font-size: 14px;
    color: #1a1a1a;
    margin-bottom: 8px;
    text-decoration: underline;
    display: block;
}

body.page-modeling-machine-listing .supplier-name:hover {
    color: #ff6600;
}

body.page-modeling-machine-listing .supplier-info {
    font-size: 12px;
    color: #666;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

body.page-modeling-machine-listing .supplier-info .flag {
    width: 18px;
    height: 12px;
    background: #00aa00;
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: white;
}

body.page-modeling-machine-listing .rating {
    color: #ffa500;
    margin: 0 4px;
}

body.page-modeling-machine-listing .verified-badge {
    color: #4a90e2;
    font-weight: 500;
}

body.page-modeling-machine-listing .product-actions {
    display: flex;
    gap: 10px;
}

body.page-modeling-machine-listing .btn {
    flex: 1;
    padding: 10px 16px;
    border: 1.5px solid #1a1a1a;
    border-radius: 24px;
    cursor: pointer;
    font-size: 13px;
    text-align: center;
    background: white;
    transition: all 0.3s;
    font-weight: 500;
}

body.page-modeling-machine-listing .btn:hover {
    background: #f5f5f5;
}

body.page-modeling-machine-listing .btn-icon {
    width: 48px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.page-modeling-machine-listing .btn-icon img {
    width: 24px;
    height: 24px;
}

@media (max-width: 1200px) {
    body.page-modeling-machine-listing .products-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    body.page-modeling-machine-listing .container {
        flex-direction: column;
    }

    body.page-modeling-machine-listing .sidebar {
        width: 100%;
    }

    body.page-modeling-machine-listing .products-grid {
        grid-template-columns: 1fr;
    }
}

body.page-modeling-machine-listing .products-section::-webkit-scrollbar,
body.page-modeling-machine-listing .sidebar::-webkit-scrollbar {
    width: 6px;
}

body.page-modeling-machine-listing .products-section::-webkit-scrollbar-thumb,
body.page-modeling-machine-listing .sidebar::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 3px;
}

/* Login */
body.page-login * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body.page-login html,
body.page-login body {
    font-family: Arial, sans-serif;
    background-color: #fff;
}

body.page-login body {
    display: flex;
    flex-direction: column;
}

body.page-login .auth-container {
    position: relative;
    width: 100%;
    background: url('login/Frame 309.png') no-repeat center center;
    background-size: contain;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 60px 0;
}

body.page-login .auth-form {
    width: 350px;
    background-color: rgba(255, 255, 255, 0.97);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
    z-index: 2;
    margin-right: 108px;
    position: relative;
}

body.page-login .auth-form h3 {
    font-size: 22px;
    margin-bottom: 15px;
}

body.page-login .auth-form input[type="text"],
body.page-login .auth-form input[type="email"],
body.page-login .auth-form input[type="password"] {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
}

body.page-login .flex {
    display: flex;
}

body.page-login .space-between {
    justify-content: space-between;
    align-items: center;
}

body.page-login .italic-text {
    font-style: italic;
}

body.page-login .muted {
    color: #777;
    font-size: 13px;
}

body.page-login .btn {
    padding: 10px;
    width: 100%;
    margin-top: 10px;
    cursor: pointer;
    border-radius: 5px;
    border: none;
    font-size: 15px;
}

body.page-login .btn.primary {
    background-color: #000;
    color: #eee;
}

body.page-login .btn.secondary {
    background-color: #eee;
    color: #000;
}

body.page-login .btn.small {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 18px;
    font-weight: bold;
    border: none;
    background-color: #f0f0f0;
    color: #000;
}

body.page-login .social-icons {
    margin-top: 12px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

body.page-login .qr-toggle {
    position: absolute;
    top: 10px;
    right: 10px;
    border: none;
    cursor: pointer;
    background: transparent;
    padding: 0;
}

body.page-login .qr-toggle img {
    width: 28px;
    height: 28px;
    display: block;
}

body.page-login .login-view {
    display: block;
}

body.page-login .qr-view {
    display: none;
    text-align: center;
}

body.page-login .auth-form.qr-mode .login-view {
    display: none;
}

body.page-login .auth-form.qr-mode .qr-view {
    display: block;
}

body.page-login .qr-box {
    margin: 10px auto 12px;
    width: 170px;
    height: 170px;
    border: 2px solid #ddd;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: #fff;
}

body.page-login .qr-box img {
    width: 130px;
    height: 130px;
    display: block;
}

body.page-login .qr-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 13px;
    color: #555;
    text-decoration: none;
}

body.page-login .qr-link span {
    color: #000;
    font-weight: 600;
}

@media (max-width: 768px) {
    body.page-login .auth-container {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 20px;
        background-position: top;
        background-size: cover;
    }

    body.page-login .auth-form {
        width: 90%;
        margin: 20px 0 0 0;
    }
}

body.page-login .secured-bar {
    background: #ef3b36;
    height: 70px;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

body.page-login .secured-bar-inner {
    width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
}

body.page-login .secured-left img {
    height: 40px;
}

body.page-login .secured-center {
    text-align: center;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}

body.page-login .secured-right a {
    background: #fff;
    color: #ef3b36;
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 14px;
    text-decoration: none;
}

body.page-login .footer {
    background: #d0d3d4;
    padding: 40px 0 20px;
}

body.page-login .footer-inner {
    width: 1200px;
    margin: auto;
}

body.page-login .footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

body.page-login .footer h4 {
    font-size: 14px;
    margin-bottom: 10px;
}

body.page-login .footer ul {
    list-style: none;
}

body.page-login .footer li {
    font-size: 12px;
    color: #333;
    margin-bottom: 6px;
    cursor: pointer;
}

body.page-login .footer li:hover {
    text-decoration: underline;
}

body.page-login .cards {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
}

body.page-login .cards img {
    width: 100%;
    height: 24px;
    object-fit: contain;
}

body.page-login .trustpilot {
    margin-top: 14px;
}

body.page-login .trustpilot img {
    height: 20px;
}

body.page-login .trustpilot p {
    font-size: 11px;
    margin-top: 6px;
}

body.page-login .newsletter {
    display: flex;
    max-width: 420px;
    height: 40px;
    overflow: hidden;
    border-radius: 6px;
    margin-bottom: 16px;
    background: #fff;
}

body.page-login .newsletter input[type="email"] {
    flex: 1;
    border: none;
    padding: 0 14px;
    font-size: 14px;
    outline: none;
    background: #fff;
    color: #333;
    height: 100%;
}

body.page-login .newsletter button {
    background-color: #333;
    color: #f1cbb0;
    border: none;
    padding: 0 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    height: 100%;
    transition: background 0.2s ease;
}

body.page-login .newsletter button:hover {
    background-color: #000;
}

body.page-login .footer-apps {
    margin-top: 16px;
}

body.page-login .apps-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 12px;
}

body.page-login .apps-buttons {
    display: flex;
    gap: 14px;
}

body.page-login .app-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid #bfc3c5;
    border-radius: 8px;
    text-decoration: none;
    min-width: 190px;
}

body.page-login .app-btn img {
    height: 26px;
}

body.page-login .app-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

body.page-login .app-text span {
    font-size: 11px;
    color: #333;
}

body.page-login .app-text strong {
    font-size: 15px;
    font-weight: 700;
    color: #000;
}

body.page-login .socials {
    margin-top: 14px;
    display: flex;
    gap: 14px;
}

body.page-login .socials img {
    height: 18px;
    opacity: 0.85;
}

body.page-login .footer-bottom {
    margin-top: 30px;
    border-top: 1px solid #999;
    padding-top: 12px;
    text-align: center;
    font-size: 11px;
    color: #333;
}

body.page-login .auth-help-row {
    margin: 10px 0;
    font-style: italic;
}

body.page-login .auth-muted-center {
    text-align: center;
    color: #999;
    font-size: 12px;
    margin: 10px 0;
}

/* Mpower Jet */
body.page-mpower-jet * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body.page-mpower-jet body {
    font-family: 'Segoe UI', Arial, sans-serif;
    background-color: #f5f5f5;
    padding: 20px;
}

body.page-mpower-jet .product-container {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* LEFT IMAGE SECTION */
body.page-mpower-jet .image-section {
    padding: 30px;
    background: white;
}

body.page-mpower-jet .main-image-container {
    position: relative;
    border: 2px solid #00a8e8;
    border-radius: 4px;
    padding: 30px;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

body.page-mpower-jet .main-image {
    max-width: 100%;
    max-height: 450px;
    object-fit: contain;
}

body.page-mpower-jet .nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    border: 2px solid #000;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
    font-weight: bold;
    z-index: 2;
}

body.page-mpower-jet .nav-arrow.left {
    left: 10px;
}

body.page-mpower-jet .nav-arrow.right {
    right: 10px;
}

body.page-mpower-jet .thumbnail-container {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    justify-content: center;
}

body.page-mpower-jet .thumbnail {
    width: 70px;
    height: 70px;
    border: 2px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
}

body.page-mpower-jet .thumbnail.active,
body.page-mpower-jet .thumbnail:hover {
    border-color: #007bff;
}

body.page-mpower-jet .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* RIGHT DETAILS SECTION */
body.page-mpower-jet .details-section {
    padding: 30px;
}

body.page-mpower-jet .product-title {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 8px;
}

body.page-mpower-jet .product-meta {
    font-size: 13px;
    color: #555;
    margin-bottom: 12px;
}

body.page-mpower-jet .certified-badge {
    background: #007bff;
    color: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    margin-left: 6px;
}

body.page-mpower-jet .price {
    font-size: 24px;
    font-weight: bold;
    margin-top: 10px;
}

body.page-mpower-jet .location-info {
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
}

body.page-mpower-jet .divider {
    height: 1px;
    background: #e0e0e0;
    margin: 20px 0;
}

body.page-mpower-jet .section-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
}

body.page-mpower-jet .details-grid {
    display: grid;
    grid-template-columns: 160px 1fr;
    row-gap: 12px;
    font-size: 14px;
}

body.page-mpower-jet .detail-label {
    font-weight: 600;
    color: #000;
}

body.page-mpower-jet .detail-value {
    color: #333;
}

body.page-mpower-jet .action-buttons {
    display: flex;
    gap: 12px;
    margin: 25px 0;
}

body.page-mpower-jet .btn {
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 14px;
    cursor: pointer;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

body.page-mpower-jet .btn-primary {
    background: #000;
    color: #fff;
    border: none;
}

body.page-mpower-jet .btn-secondary {
    background: #fff;
    border: 1px solid #ccc;
}

body.page-mpower-jet .btn-icon {
    background: #000;
    color: #fff;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Supplier Info */
body.page-mpower-jet .supplier-card {
    background: #f9f9f9;
    border-radius: 8px;
    padding: 18px;
}

body.page-mpower-jet .supplier-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

body.page-mpower-jet .supplier-logo img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

body.page-mpower-jet .supplier-name {
    font-weight: 600;
}

body.page-mpower-jet .supplier-type {
    font-size: 13px;
    color: #666;
}

body.page-mpower-jet .rating {
    margin-top: 10px;
    font-size: 14px;
}

body.page-mpower-jet .stars {
    font-size: 16px;
    letter-spacing: 2px;
}

@media (max-width: 768px) {
    body.page-mpower-jet .product-container {
        grid-template-columns: 1fr;
    }

    body.page-mpower-jet .main-image-container {
        padding: 20px;
    }

    body.page-mpower-jet .details-section {
        padding: 20px;
    }
}

/* Mservice */
body.page-mservice * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body.page-mservice body {
    font-family: Arial, Helvetica, sans-serif;
    background: #fff;
    color: #111;
}

/* ===== LAYOUT ===== */
body.page-mservice .wrapper {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 30px;
    padding: 20px;
}

body.page-mservice .left {
    flex: 2;
}

body.page-mservice .right {
    flex: 1;
}

/* ===== TABS ===== */
body.page-mservice .tabs {
    position: sticky;
    top: 0;
    background: #fff;
    display: flex;
    gap: 24px;
    border-bottom: 1px solid #ddd;
    padding: 12px 0;
    z-index: 10;
}

body.page-mservice .tab {
    position: relative;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    color: #444;
    padding-bottom: 8px;
}

body.page-mservice .tab::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 2px;
    background: #e60000;
    transform: scaleX(0);
    transition: .25s;
}

body.page-mservice .tab:hover {
    color: #e60000;
}

body.page-mservice .tab:hover::after,
body.page-mservice .tab.active::after {
    transform: scaleX(1);
}

body.page-mservice .tab.active {
    color: #e60000;
    font-weight: 600;
}

/* ===== SECTION ===== */
body.page-mservice .section {
    padding: 24px 0;
    border-bottom: 1px solid #e5e5e5;
    scroll-margin-top: 80px;
}

body.page-mservice .section h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
}

/* ===== SERVICE ===== */
body.page-mservice .service-boxes {
    display: flex;
    gap: 16px;
}

body.page-mservice .service-box {
    flex: 1;
    background: #f7f7f7;
    padding: 14px;
    border-radius: 6px;
}

body.page-mservice .service-box strong {
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
}

body.page-mservice .service-box span {
    font-size: 13px;
    color: #555;
}

/* ===== TABLE ===== */
body.page-mservice table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

body.page-mservice td {
    border: 1px solid #ccc;
    padding: 8px;
}

body.page-mservice td strong {
    font-weight: 600;
}

/* ===== REVIEWS (FIXED POSITIONS LIKE YOUR SCREENSHOT) ===== */
body.page-mservice .review {
    display: flex;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid #eee;
    align-items: flex-start;
}

body.page-mservice .avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #d9d9d9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

/* RIGHT SIDE */
body.page-mservice .review-body {
    flex: 1;
    min-width: 0;
}

/* HEADER = left (name + stars), right (date) */
body.page-mservice .review-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

/* LEFT HEADER LINE: name + stars on same line */
body.page-mservice .review-header-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

body.page-mservice .review-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

body.page-mservice .reviewer-name {
    font-size: 13px;
    font-weight: 600;
    color: #111;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 260px;
    /* adjust if needed */
}

/* stars sits just right of name */
body.page-mservice .review-stars-inline {
    display: flex;
    align-items: center;
    line-height: 1;
    flex-shrink: 0;
}

body.page-mservice .review-stars-inline img {
    height: 13px;
    display: block;
}

/* Country row under name (left side) */
body.page-mservice .review-country {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #666;
}

body.page-mservice .review-country img {
    width: 18px;
    height: 12px;
    border-radius: 2px;
    object-fit: cover;
    display: block;
}

/* DATE = top right */
body.page-mservice .review-date {
    font-size: 12px;
    color: #777;
    white-space: nowrap;
}

/* COMMENT */
body.page-mservice .review-comment {
    font-size: 13px;
    color: #111;
    margin-top: 8px;
}

/* NOTE BAR */
body.page-mservice .review-note {
    background: #e0e0e0;
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 4px;
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

body.page-mservice .review-note img {
    height: 13px;
    display: block;
}

/* MOBILE: name + stars wrap nicely */
@media(max-width:480px) {
    body.page-mservice .reviewer-name {
        max-width: 170px;
    }

    body.page-mservice .review-name-row {
        flex-wrap: wrap;
    }
}


/* ===== SUPPLIER CARD (LEFT) ===== */
body.page-mservice .supplier-card {
    background: #f7f7f7;
    padding: 20px;
    border-radius: 10px;
}

body.page-mservice .supplier-title {
    display: flex;
    gap: 12px;
    align-items: center;
}

body.page-mservice .logo {
    width: 48px;
    height: 48px;
    border: 1px solid #ccc;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

body.page-mservice .supplier-info h4 {
    font-size: 15px;
}

body.page-mservice .supplier-info p {
    font-size: 13px;
    color: #555;
}

body.page-mservice .badge {
    color: #e60000;
    font-size: 13px;
    margin: 6px 0;
}

body.page-mservice .links {
    color: #e60000;
    font-size: 13px;
    margin-top: 8px;
    cursor: pointer;
}

body.page-mservice .btn-row {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

body.page-mservice .btn {
    flex: 1;
    padding: 10px;
    border-radius: 20px;
    border: 1px solid #000;
    font-size: 13px;
    cursor: pointer;
}

body.page-mservice .btn.black {
    background: #000;
    color: #fff;
}

/* ===== RIGHT SIDEBAR ===== */
body.page-mservice .right-card {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    position: sticky;
    top: 20px;
}

body.page-mservice .right-top {
    display: flex;
    gap: 12px;
    align-items: center;
}

body.page-mservice .right-top .logo {
    border-radius: 50%;
}

body.page-mservice .right-name {
    font-size: 14px;
    font-weight: 600;
}

body.page-mservice .right-rating {
    font-size: 13px;
    margin-top: 4px;
}

body.page-mservice .manager {
    margin-top: 16px;
    background: #f7f7f7;
    padding: 14px;
    border-radius: 8px;
}

body.page-mservice .manager strong {
    display: block;
    font-size: 14px;
}

body.page-mservice .manager span {
    font-size: 12px;
    color: #555;
}

body.page-mservice .actions button {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    border-radius: 20px;
    border: 1px solid #000;
    cursor: pointer;
}

body.page-mservice .actions .primary {
    background: #000;
    color: #fff;
}

body.page-mservice .actions .outline {
    background: #fff;
}

body.page-mservice .actions .chat {
    border-color: #ccc;
}

/* ===== MOBILE ===== */
@media(max-width:992px) {
    body.page-mservice .wrapper {
        flex-direction: column;
    }

    body.page-mservice .right-card {
        position: static;
    }
}


/* ===== SUPPLIER CARD – EXACT STYLE ===== */
body.page-mservice .supplier-card {
    background: #f7f7f7;
    padding: 22px;
    border-radius: 12px;
}

body.page-mservice .supplier-title {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 10px;
}

body.page-mservice .supplier-title .logo {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    border: 1px solid #ccc;
    object-fit: contain;
}

body.page-mservice .supplier-info h4 {
    font-size: 16px;
    font-weight: 600;
}

body.page-mservice .supplier-info p {
    font-size: 13px;
    color: #555;
    margin-top: 2px;
}

body.page-mservice .supplier-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    margin: 10px 0;
}

body.page-mservice .supplier-rating span {
    color: #555;
}

body.page-mservice .supplier-badge {
    font-size: 14px;
    margin-bottom: 10px;
}

body.page-mservice .supplier-badge strong {
    font-weight: 600;
}

body.page-mservice .supplier-badge em {
    color: #e60000;
    font-style: normal;
    margin-left: 6px;
}

body.page-mservice .supplier-features {
    font-size: 13px;
    color: #555;
    line-height: 1.8;
}

body.page-mservice .supplier-features img {
    height: 14px;
    vertical-align: middle;
    margin-right: 6px;
}

body.page-mservice .supplier-link {
    color: #e60000;
    font-size: 13px;
    margin-top: 10px;
    cursor: pointer;
}

body.page-mservice .supplier-buttons {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

body.page-mservice .supplier-buttons button {
    flex: 1;
    padding: 7px 12px;
    /* reduced height */
    border-radius: 18px;
    /* tighter pill */
    font-size: 12px;
    /* smaller text */
    line-height: 1.2;
    cursor: pointer;
}


body.page-mservice .supplier-buttons .black {
    background: #000;
    color: #fff;
    border: none;
}

body.page-mservice .supplier-buttons .outline {
    background: #fff;
    border: 1px solid #000;
}

/* ===== REVIEW COUNTRY LINE ===== */
body.page-mservice .review-user {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

body.page-mservice .review-country {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #666;
}

body.page-mservice .review-country img {
    width: 18px;
    height: 12px;
    object-fit: cover;
    border-radius: 2px;
}

body.page-mservice .review-badge-sm {
    height: 13px;
}

body.page-mservice .review-badge-lg {
    height: 14px;
}

/* Order Request */
body.page-order-request .order-page {
    background: #dcdcdc;
}

body.page-order-request .order-shell {
    max-width: 980px;
    margin: 0 auto;
    display: grid;
    gap: 14px;
}

body.page-order-request .order-hero {
    background: #fff;
    border-radius: 6px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #e6e6e6;
}

body.page-order-request .order-hero img {
    width: 52px;
    height: 52px;
    object-fit: contain;
}

body.page-order-request .order-hero h2 {
    margin: 0;
    font-size: 18px;
}

body.page-order-request .order-section {
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    padding: 16px;
}

body.page-order-request .order-section h3 {
    margin: 0 0 12px;
    font-size: 16px;
}

body.page-order-request .order-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 18px;
}

body.page-order-request .order-field label {
    display: block;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 6px;
}

body.page-order-request .order-field input,
body.page-order-request .order-field textarea {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    font-size: 13px;
}

body.page-order-request .order-field textarea {
    resize: vertical;
    min-height: 90px;
}

body.page-order-request .link-inline {
    color: #2d78f6;
    font-size: 12px;
    font-weight: 600;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

body.page-order-request .product-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 6px;
}

body.page-order-request .product-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

body.page-order-request .product-table th,
body.page-order-request .product-table td {
    border: 1px solid #e2e2e2;
    padding: 8px;
    text-align: left;
    vertical-align: middle;
}

body.page-order-request .product-cell {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 8px;
    align-items: center;
}

body.page-order-request .product-thumb {
    width: 44px;
    height: 36px;
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    background: #fafafa;
    display: grid;
    place-items: center;
    font-size: 10px;
    color: var(--muted);
}

body.page-order-request .qty-box {
    display: inline-flex;
    align-items: center;
    border: 1px solid #d2d2d2;
    border-radius: 4px;
    overflow: hidden;
    font-size: 12px;
}

body.page-order-request .qty-box button {
    border: none;
    background: #f2f2f2;
    padding: 4px 8px;
    cursor: pointer;
    font-weight: 700;
}

body.page-order-request .qty-box span {
    display: inline-block;
    padding: 4px 10px;
    min-width: 26px;
    text-align: center;
}

body.page-order-request .attachments-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    font-size: 12px;
}

body.page-order-request .upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px dashed #d2d2d2;
    padding: 6px 10px;
    border-radius: 4px;
    background: #fafafa;
    cursor: pointer;
    font-size: 12px;
    color: #2d78f6;
    font-weight: 600;
}

body.page-order-request .summary-card {
    display: grid;
    gap: 10px;
}

body.page-order-request .summary-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 10px 16px;
    align-items: start;
}

body.page-order-request .summary-note {
    font-size: 12px;
    color: var(--muted);
}

body.page-order-request .summary-total {
    text-align: right;
}

body.page-order-request .summary-total .amount {
    font-size: 18px;
    font-weight: 700;
    color: #000;
}

body.page-order-request .amount-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 6px;
    border: 1px solid #dcdcdc;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    color: #666;
    margin-left: 8px;
    background: #f6f6f6;
}

body.page-order-request .checkbox-line {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--muted);
}

body.page-order-request .summary-action {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

body.page-order-request .submit-btn {
    background: #111;
    color: #fff;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 12px;
    letter-spacing: 0.2px;
    cursor: pointer;
}

@media (max-width: 820px) {
    body.page-order-request .order-grid {
        grid-template-columns: 1fr;
    }

    body.page-order-request .summary-grid {
        grid-template-columns: 1fr;
    }

    body.page-order-request .summary-total,
    body.page-order-request .summary-action {
        text-align: left;
    }
}

body.page-order-request .order-grid-pad {
    padding-top: 10px;
}

body.page-order-request .space-between.align-start {
    align-items: flex-start;
}

body.page-order-request .col-w-36 {
    width: 36px;
}

body.page-order-request .col-w-110 {
    width: 110px;
}

body.page-order-request .col-w-120 {
    width: 120px;
}

body.page-order-request .total-price-cell {
    text-align: right;
    font-weight: 700;
}

/* Platic Machinery 3 */
body.page-plastic-machinery-3 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

body.page-plastic-machinery-3 body {
    font-family: Arial, Helvetica, sans-serif;
    background: #e6e6e6;
    color: #111;
}

/* ===== CONTAINER ===== */
body.page-plastic-machinery-3 .container {
    max-width: 1200px;
    margin: 30px auto;
    background: #e6e6e6;
    padding-bottom: 30px;
}

/* ===== SUPPLIER TOP BAR ===== */
body.page-plastic-machinery-3 .supplier-top {
    background: #fff;
    border-radius: 10px;
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

body.page-plastic-machinery-3 .supplier-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

body.page-plastic-machinery-3 .supplier-logo {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    border: 1px solid #ddd;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.page-plastic-machinery-3 .supplier-logo img {
    max-width: 100%;
    max-height: 100%;
}

body.page-plastic-machinery-3 .supplier-name {
    font-size: 14px;
    font-weight: 600;
}

body.page-plastic-machinery-3 .supplier-type {
    font-size: 12px;
    color: #666;
}

body.page-plastic-machinery-3 .supplier-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

body.page-plastic-machinery-3 .rating {
    font-size: 13px;
    color: #333;
    white-space: nowrap;
}

body.page-plastic-machinery-3 .rating span {
    font-weight: 600;
}

body.page-plastic-machinery-3 .btn-pill {
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid #000;
    background: #fff;
}

body.page-plastic-machinery-3 .btn-pill.black {
    background: #000;
    color: #fff;
    border: none;
}

/* ===== HERO ===== */
body.page-plastic-machinery-3 .hero {
    margin-top: 14px;
    height: 220px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

body.page-plastic-machinery-3 .hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

body.page-plastic-machinery-3 .hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-align: center;
}

body.page-plastic-machinery-3 .hero-overlay h1 {
    font-size: 26px;
    letter-spacing: 2px;
}

body.page-plastic-machinery-3 .hero-overlay span {
    background: #fff;
    color: #333;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    margin-top: 10px;
}

/* ===== LANGUAGES ===== */
body.page-plastic-machinery-3 .languages {
    background: #fff;
    border-radius: 10px;
    margin-top: 14px;
    padding: 14px;
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

body.page-plastic-machinery-3 .lang {
    text-align: center;
    font-size: 11px;
    color: #555;
}

body.page-plastic-machinery-3 .lang img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: block;
    margin: 0 auto 4px;
}

/* ===== FEATURED PRODUCTS ===== */
body.page-plastic-machinery-3 .section {
    margin-top: 18px;
}

body.page-plastic-machinery-3 .section h3 {
    text-align: center;
    font-size: 16px;
    margin-bottom: 14px;
}

body.page-plastic-machinery-3 .products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

body.page-plastic-machinery-3 .product-card {
    background: #fff;
    border-radius: 10px;
    padding: 10px;
}

body.page-plastic-machinery-3 .product-card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
}

body.page-plastic-machinery-3 .product-title {
    font-size: 13px;
    font-weight: 600;
    margin: 8px 0;
}

body.page-plastic-machinery-3 .product-price {
    font-size: 14px;
    font-weight: 700;
}

body.page-plastic-machinery-3 .product-moq {
    font-size: 11px;
    color: #666;
}

body.page-plastic-machinery-3 .product-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

body.page-plastic-machinery-3 .product-actions button {
    flex: 1;
    padding: 6px;
    border-radius: 16px;
    font-size: 12px;
    border: 1px solid #000;
    background: #fff;
    cursor: pointer;
}

/* ===== COMPANY PROFILE (EXACT MATCH STYLE) ===== */

body.page-plastic-machinery-3 .company-profile-wrap {
    max-width: 1200px;
    margin: 20px auto;
    background: #fff;
    border-radius: 12px;
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    overflow: hidden;
}

/* LEFT IMAGE */
body.page-plastic-machinery-3 .company-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* RIGHT CONTENT */
body.page-plastic-machinery-3 .company-content {
    padding: 30px 34px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

body.page-plastic-machinery-3 .company-content h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 6px;
}

body.page-plastic-machinery-3 .company-subtitle {
    font-size: 13px;
    color: #666;
    line-height: 1.4;
}

body.page-plastic-machinery-3 .divider-line {
    width: 60px;
    height: 2px;
    background: #d9d9d9;
    margin: 14px 0 18px;
}

body.page-plastic-machinery-3 .company-text {
    font-size: 13px;
    color: #555;
    line-height: 1.7;
}

/* ===== RESPONSIVE ===== */
@media(max-width:992px) {
    body.page-plastic-machinery-3 .company-profile-wrap {
        grid-template-columns: 1fr;
    }

    body.page-plastic-machinery-3 .company-image img {
        height: 220px;
    }

    body.page-plastic-machinery-3 .company-content {
        padding: 22px;
    }
}

/* ===== FEATURED PRODUCTS CUSTOM LAYOUT ===== */

body.page-plastic-machinery-3 .featured-layout {
    display: grid;
    grid-template-columns: 1.2fr 2fr;
    gap: 16px;
}

/* BIG CARD */
body.page-plastic-machinery-3 .featured-big {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

body.page-plastic-machinery-3 .featured-big img {
    width: 100%;
    height: 260px;
    object-fit: cover;
}

body.page-plastic-machinery-3 .featured-body {
    padding: 12px;
}

body.page-plastic-machinery-3 .featured-body h4 {
    font-size: 14px;
    line-height: 1.4;
    margin-bottom: 6px;
}

body.page-plastic-machinery-3 .featured-body .meta {
    font-size: 11px;
    color: #666;
}

body.page-plastic-machinery-3 .featured-body .meta span {
    background: #eaf1ff;
    color: #0066ff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
    margin-left: 4px;
}

body.page-plastic-machinery-3 .featured-body .price {
    font-size: 15px;
    font-weight: 700;
    margin-top: 6px;
}

body.page-plastic-machinery-3 .featured-body .moq {
    font-size: 11px;
    color: #666;
    margin-bottom: 8px;
}

body.page-plastic-machinery-3 .featured-body .actions {
    display: flex;
    gap: 8px;
}

body.page-plastic-machinery-3 .featured-body .outline {
    flex: 1;
    padding: 6px;
    border-radius: 16px;
    border: 1px solid #000;
    background: #fff;
    font-size: 12px;
}

body.page-plastic-machinery-3 .featured-body .icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}

body.page-plastic-machinery-3 .featured-body .icon img {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

/* RIGHT GRID */
body.page-plastic-machinery-3 .featured-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

/* SMALL CARDS */
body.page-plastic-machinery-3 .small-card {
    background: #fff;
    border-radius: 10px;
    padding: 8px;
    position: relative;
}

body.page-plastic-machinery-3 .small-card img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    border-radius: 8px;
}

body.page-plastic-machinery-3 .small-card p {
    font-size: 12px;
    margin: 6px 0 4px;
}

body.page-plastic-machinery-3 .small-card strong {
    font-size: 13px;
    display: block;
}

body.page-plastic-machinery-3 .small-card span {
    font-size: 11px;
    color: #666;
}

body.page-plastic-machinery-3 .small-card .icon {
    position: absolute;
    bottom: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

body.page-plastic-machinery-3 .small-card .icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
}

/* SECOND ROW ALIGNMENT */
body.page-plastic-machinery-3 .featured-grid .small-card:nth-last-child(2),
body.page-plastic-machinery-3 .featured-grid .small-card:nth-last-child(1) {
    grid-column: span 1;
}

/* RESPONSIVE */
@media(max-width:992px) {
    body.page-plastic-machinery-3 .featured-layout {
        grid-template-columns: 1fr;
    }

    body.page-plastic-machinery-3 .featured-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ===== FINAL SHOWCASE ===== */
body.page-plastic-machinery-3 .final-showcase {
    margin-top: 20px;
    border-radius: 10px;
    overflow: hidden;
}

body.page-plastic-machinery-3 .final-showcase img {
    width: 100%;
    height: auto;
    display: block;
}

/* ===== COMPANY & TRADE INFO ===== */
body.page-plastic-machinery-3 .info-section {
    background: #e8e8e8;
    border-radius: 10px;
    margin-top: 20px;
    padding: 24px 30px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

body.page-plastic-machinery-3 .info-column h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 18px;
}

body.page-plastic-machinery-3 .info-row {
    display: flex;
    margin-bottom: 12px;
    font-size: 13px;
}

body.page-plastic-machinery-3 .info-label {
    font-weight: 600;
    min-width: 180px;
    color: #333;
}

body.page-plastic-machinery-3 .info-value {
    color: #666;
    flex: 1;
}

/* ===== MESSAGE FORM ===== */
body.page-plastic-machinery-3 .message-section {
    background: #fff;
    border-radius: 10px;
    margin-top: 20px;
    padding: 30px;
}

body.page-plastic-machinery-3 .message-section h3 {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 20px;
}

body.page-plastic-machinery-3 .form-row {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    font-size: 13px;
}

body.page-plastic-machinery-3 .form-label {
    min-width: 100px;
    font-weight: 600;
}

body.page-plastic-machinery-3 .form-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
}

body.page-plastic-machinery-3 .recipient {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: #f5f5f5;
    border-radius: 4px;
}

body.page-plastic-machinery-3 .recipient img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
}

body.page-plastic-machinery-3 .form-textarea {
    width: 100%;
    min-height: 100px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 13px;
    font-family: Arial, Helvetica, sans-serif;
    resize: vertical;
}

body.page-plastic-machinery-3 .char-limit {
    font-size: 11px;
    color: #666;
    margin-top: 4px;
}

body.page-plastic-machinery-3 .btn-send {
    background: #000;
    color: #fff;
    padding: 15px 30px;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    cursor: pointer;
    margin-top: 12px;
}

@media(max-width:992px) {
    body.page-plastic-machinery-3 .info-section {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

body.page-plastic-machinery-3 .form-row.align-start {
    align-items: flex-start;
}

body.page-plastic-machinery-3 .flex-grow {
    flex: 1;
}

/* Post Ad */

:root {
    --primary: #f64b3f;
    --primary-dark: #d63b32;
    --dark: #000;
    --text: #222;
    --muted: #777;
    --line: #e6e6e6;
    --bg: #f7f7f7;
    --tag: #f1f1f1;
    --success: #3ba05d;
    --warning: #f4a11c;
    --info: #2d78f6;
}

body.page-post-ad * {
    box-sizing: border-box;
}

body.page-post-ad body {
    margin: 0;
    font-family: "Inter", "Open Sans", Arial, sans-serif;
    color: var(--text);
    background: #fff;
}

body.page-post-ad h1,
body.page-post-ad h2,
body.page-post-ad h3,
body.page-post-ad h4,
body.page-post-ad h5,
body.page-post-ad h6,
body.page-post-ad label {
    font-family: "Lato", "Inter", "Open Sans", Arial, sans-serif;
}

body.page-post-ad a {
    color: inherit;
    text-decoration: none;
}

body.page-post-ad .container {
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 20px;
}

body.page-post-ad .space-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

body.page-post-ad .btn {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--text);
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

body.page-post-ad .btn.primary {
    background: var(--dark);
    color: #fff;
    border-color: var(--dark);
    box-shadow: 0 3px 0 var(--text);
}

body.page-post-ad .btn.outline {
    background: transparent;
    color: var(--text);
}

/* Top Nav */
.navigation {
    --primary: #f64b3f;
    --primary-dark: #d63b32;
    --dark: #000;
    --text: #222;
    --muted: #777;
    --line: #e6e6e6;
    --bg: #f7f7f7;
    --tag: #f1f1f1;
    --success: #3ba05d;
    --warning: #f4a11c;
    --info: #2d78f6;
}

.navigation * {
    box-sizing: border-box;
}

.navigation {
    font-family: "Inter", "Open Sans", Arial, sans-serif;
    color: var(--text);
}

.navigation h1,
.navigation h2,
.navigation h3,
.navigation h4,
.navigation h5,
.navigation h6,
.navigation label {
    font-family: "Lato", "Inter", "Open Sans", Arial, sans-serif;
}

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

.navigation .container {
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 20px;
}

.navigation .space-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.navigation .btn {
    border: 1px solid var(--line);
    background: #fff;
    color: var(--text);
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.navigation .btn.primary {
    background: var(--dark);
    color: #fff;
    border-color: var(--dark);
    box-shadow: 0 3px 0 var(--text);
}

.navigation .btn.outline {
    background: transparent;
    color: var(--text);
}

body.page-post-ad .badge {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    border-radius: 12px;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 600;
}

body.page-post-ad .card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

body.page-post-ad .muted {
    color: var(--muted);
}

body.page-post-ad header {
    border-bottom: 1px solid var(--line);
    background: #fff;
}

body.page-post-ad .topbar {
    padding: 10px 0;
}

body.page-post-ad .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 16px;
}

body.page-post-ad .brand-square {
    width: 30px;
    height: 30px;
    background: var(--primary);
    border-radius: 4px;
    position: relative;
}

body.page-post-ad .brand-square::after {
    content: "D";
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 800;
    font-size: 18px;
}

body.page-post-ad .search {
    flex: 1;
    margin: 0 16px;
    display: grid;
    grid-template-columns: 1fr 44px;
    border: 1px solid var(--line);
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
}

body.page-post-ad .search input {
    border: none;
    padding: 10px 12px;
    font-size: 14px;
}

body.page-post-ad .search button {
    border: none;
    background: var(--primary);
    color: #fff;
    font-size: 18px;
}

body.page-post-ad .top-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 13px;
}

body.page-post-ad .top-actions .btn.primary {
    font-weight: 700;
    padding: 9px 12px;
    min-width: 90px;
    text-align: center;
}

body.page-post-ad .subnav {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: #fdfdfd;
    font-size: 13px;
}

body.page-post-ad .subnav .container {
    padding: 10px 20px;
}

body.page-post-ad .subnav .links {
    display: flex;
    gap: 16px;
    color: var(--muted);
}

.navigation .top-nav {
    background: #fff;
    color: #222;
    border-bottom: 1px solid #e6e6e6;
}

.navigation .top-nav .nav-link,
.navigation .top-nav .nav-trigger {
    color: #222;
}

.navigation .nav-row {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 10px 20px;
    flex-wrap: wrap;
}

.navigation .nav-split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    width: 100%;
}

.navigation .nav-left,
.navigation .nav-right {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: nowrap;
}

.navigation .nav-right .nav-right-item {
    display: inline-flex;
}

.navigation .nav-more-trigger,
.navigation .nav-more-panel {
    display: none;
}

.navigation .nav-divider {
    height: 1px;
    background: #e6e6e6;
}

.navigation .nav-link {
    color: #f5f5f5;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
    padding: 6px 4px;
    text-transform: uppercase;
}

.navigation .nav-link:hover,
.navigation .nav-link:focus {
    color: #f64b3f;
}

.navigation .nav-dropdown {
    position: relative;
}

.navigation .nav-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px 4px;
}

.navigation .nav-more-trigger {
    display: none;
}

.navigation .menu-icon {
    font-size: 18px;
    line-height: 1;
}

.navigation .dropdown-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 250px;
    background: #fff;
    color: #222;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    padding: 10px 0;
    display: none;
    z-index: 10;
    overflow: visible;
}

.navigation .dropdown-panel a {
    display: block;
    padding: 8px 14px;
    font-size: 13px;
    color: #222;
}

.navigation .dropdown-panel a:hover {
    background: #f5f5f5;
    color: #f64b3f;
}

.navigation .dropdown-panel .more {
    color: #3a50e0;
    font-weight: 600;
}

.navigation .dropdown-panel.mega-menu {
    padding: 0;
    min-width: 260px;
}

.navigation .mega-list {
    position: relative;
    min-width: 260px;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    padding: 6px 0;
}

.navigation .mega-item {
    position: static;
}

.navigation .dropdown-panel.mega-menu .mega-link {
    display: block;
    padding: 10px 14px;
    font-size: 13px;
    color: #222;
}

.navigation .dropdown-panel.mega-menu .mega-item:hover>.mega-link {
    background: #f5f5f5;
    color: #f64b3f;
}

.navigation .mega-submenu {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    width: auto;
    min-width: 0;
    height: auto;
    background: #fff;
    border-radius: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    padding: 14px 16px;
    display: none;
    gap: 12px 24px;
}

.navigation .mega-submenu.cols-1 {
    display: none;
    grid-template-columns: 1fr;
}

.navigation .mega-submenu.cols-2 {
    display: none;
    grid-template-columns: 1fr 1fr;
}

.navigation .mega-submenu.cols-3 {
    display: none;
    grid-template-columns: repeat(3, 1fr);
}

.navigation .mega-item:hover .mega-submenu {
    display: grid;
}

.navigation .dropdown-panel.mega-menu .mega-col {
    min-width: 230px;
}

.navigation .dropdown-panel.mega-menu .mega-col a {
    display: block;
    padding: 6px 0;
    font-size: 13px;
    color: #222;
    white-space: nowrap;
}

.navigation .dropdown-panel.mega-menu .mega-col a:hover {
    color: #f64b3f;
}

.navigation .nav-dropdown:hover .dropdown-panel,
.navigation .nav-dropdown:focus-within .dropdown-panel {
    display: block;
}

body.page-post-ad .page {
    padding: 16px 0 40px;
    background: #f3f3f3;
}

body.page-post-ad .post-page {
    background: linear-gradient(180deg, #f7f7f7, #f1f1f1);
}

body.page-post-ad .post-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

body.page-post-ad .eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 4px;
}

body.page-post-ad .post-layout {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
    gap: 16px;
    align-items: start;
}

body.page-post-ad .post-card {
    padding: 16px;
}

body.page-post-ad .field {
    display: grid;
    gap: 8px;
}

body.page-post-ad .field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

body.page-post-ad .small-text {
    font-size: 12px;
}

body.page-post-ad .post-grid {
    display: grid;
    gap: 12px;
}

body.page-post-ad .post-grid label {
    display: block;
    font-size: 16px;
    color: var(--text);
    font-weight: 700;
    margin-bottom: 6px;
    text-decoration-thickness: inherit;

}

body.page-post-ad .post-heading {
    text-align: center;
}

body.page-post-ad .post-heading h3 {
    margin: 0;
    font-size: 30px;
}

body.page-post-ad .post-heading p {
    margin: 6px 0 0;
}

body.page-post-ad .post-grid input,
body.page-post-ad .post-grid textarea,
body.page-post-ad .post-grid select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 4px;
    font-size: 14px;
}

body.page-post-ad .post-grid input::placeholder,
body.page-post-ad .post-grid textarea::placeholder {
    color: var(--muted);
}

body.page-post-ad .two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

body.page-post-ad .price-row-inputs {
    display: grid;
    grid-template-columns: 1fr 9fr;
    gap: 10px;
    align-items: center;
}

body.page-post-ad .upload-panel {
    border: 1px solid var(--line);
    border-radius: 6px;
    background: #fdfdfd;
    padding: 12px;
    display: grid;
    gap: 10px;
}

body.page-post-ad .upload-drop {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px dashed #cfd2d4;
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

body.page-post-ad .upload-drop:hover {
    border-color: var(--primary);
    background: #fff;
}

body.page-post-ad .upload-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #ffe5e1;
    color: var(--primary);
    display: grid;
    place-items: center;
    font-size: 18px;
    font-weight: 700;
}

body.page-post-ad .upload-thumbs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 10px;
}

body.page-post-ad .thumb {
    height: 90px;
    border: 1px dashed #cfd2d4;
    border-radius: 6px;
    display: grid;
    place-items: center;
    font-size: 13px;
    color: var(--muted);
    background: #fff;
}

body.page-post-ad .thumb.placeholder {
    background: #f9f9f9;
}

body.page-post-ad .actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 4px;
}

body.page-post-ad .actions .btn {
    width: 30%;
    min-width: 180px;
}

body.page-post-ad .support-card {
    padding: 16px;
    position: sticky;
    top: 20px;
    background: #fffef6;
}

body.page-post-ad .support-header h4 {
    margin: 10px 0 6px;
    font-size: 16px;
}

body.page-post-ad .support-header p {
    margin: 0;
}

body.page-post-ad .support-list {
    list-style: disc;
    padding-left: 20px;
    margin: 12px 0 0;
    display: grid;
    gap: 8px;
    font-size: 14px;
}

body.page-post-ad .support-list a {
    color: var(--primary);
    font-weight: 600;
}

body.page-post-ad .strip {
    background: var(--primary);
    color: #fff;
    padding: 16px 0;
    text-align: center;
    font-weight: 700;
    letter-spacing: 0.3px;
}

body.page-post-ad footer {
    background: #e8e8e8;
    border-top: 1px solid #dcdcdc;
    padding: 30px 0 24px;
    color: #555;
    font-size: 13px;
}

body.page-post-ad .foot-bottom {
    text-align: center;
    color: #777;
    font-size: 12px;
    margin-top: 18px;
    line-height: 1.5;
}

@media (max-width: 1100px) {
    body.page-post-ad .two-col {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    body.page-post-ad .post-layout {
        grid-template-columns: 1fr;
    }

    body.page-post-ad .post-top {
        flex-direction: column;
        align-items: flex-start;
    }

    body.page-post-ad .support-card {
        position: relative;
        top: auto;
    }

    .navigation .nav-row {
        gap: 12px;
    }

    .navigation .nav-link {
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .navigation .nav-drawer-overlay {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.45);
        z-index: 40;
    }

    .navigation .nav-row {
        padding: 8px 12px;
        gap: 8px;
        flex-wrap: nowrap;
        overflow-x: auto;
        white-space: nowrap;
    }

    .navigation .top-nav>.nav-row:not(.nav-split) {
        background: #f6f6f6;
    }

    .navigation .top-nav>.nav-row:not(.nav-split) .nav-link {
        color: #666;
    }

    .navigation .nav-split {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        flex-wrap: nowrap;
    }

    .navigation .nav-left {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .navigation .nav-left .nav-left-item {
        display: none;
    }

    .navigation .nav-right {
        margin-left: auto;
        position: relative;
    }

    .navigation .nav-right .nav-right-item {
        display: none;
    }

    .navigation .nav-more-trigger {
        display: inline-flex;
    }

    .navigation .nav-left .nav-link,
    .navigation .nav-right .nav-link,
    .navigation .nav-trigger {
        font-size: 11px;
        padding: 6px 4px;
        letter-spacing: 0;
    }

    .navigation .menu-icon {
        font-size: 16px;
    }

    .navigation .nav-dropdown {
        position: static;
    }

    .navigation .dropdown-panel.mega-menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 84vw;
        max-width: 320px;
        height: 100vh;
        border-radius: 0;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
        display: block;
        z-index: 50;
        overflow-y: auto;
    }

    .navigation .nav-dropdown.drawer-open .dropdown-panel.mega-menu {
        transform: translateX(0);
    }

    body.page-post-ad.drawer-open .nav-drawer-overlay {
        display: block;
    }

    .navigation .mega-list {
        box-shadow: none;
    }

    .navigation .mega-item:hover .mega-submenu {
        display: none;
    }

    .navigation .mega-submenu {
        position: static;
        display: block;
        height: auto;
        padding: 0 14px 10px;
        box-shadow: none;
        border-radius: 0;
    }

    .navigation .dropdown-panel.mega-menu .mega-col {
        min-width: 0;
    }

    .navigation .nav-more {
        position: relative;
    }

    .navigation .nav-more-trigger,
    .navigation .nav-more-panel {
        display: none;
    }

    .navigation .nav-more-panel {
        position: fixed;
        top: 56px;
        right: 0;
        left: auto;
        min-width: 180px;
        z-index: 600;
    }

    .navigation .nav-more:hover .nav-more-panel,
    .navigation .nav-more:focus-within .nav-more-panel {
        display: block;
    }
}

body.page-post-ad .option-muted {
    color: var(--muted);
}

/* Recommended */
body.page-recommended body {
    font-family: Arial, sans-serif;
    background: #f4f4f4;
    margin: 0;
    padding: 0;
}

body.page-recommended .recommendation-section {
    background-color: #fff;
    padding: 20px;
    margin: 20px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

body.page-recommended .recommendation-section h2 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}

body.page-recommended .carousel-wrapper {
    position: relative;
}

body.page-recommended .carousel {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 16px;
    padding: 10px 0;
}

body.page-recommended .carousel::-webkit-scrollbar {
    display: none;
}

body.page-recommended .product-card {
    flex: 0 0 calc(25% - 16px);
    /* 4 per view with 16px gap */
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 1px solid #ddd;
    transition: transform 0.3s ease;
}

body.page-recommended .product-card:hover {
    transform: translateY(-3px);
}

body.page-recommended .product-card img {
    width: 100%;
    height: 160px;
    object-fit: cover;
}

body.page-recommended .card-body {
    padding: 12px;
}

body.page-recommended .card-title {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 6px;
    height: 40px;
    overflow: hidden;
}

body.page-recommended .card-info {
    font-size: 11px;
    color: #666;
    margin-bottom: 6px;
}

body.page-recommended .certified {
    color: #007bff;
    font-size: 11px;
    background: #e5f0ff;
    padding: 2px 5px;
    border-radius: 4px;
    margin-left: 4px;
}

body.page-recommended .card-footer {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 10px;
}

body.page-recommended .moq {
    font-size: 11px;
    color: #555;
    font-weight: normal;
}

body.page-recommended .card-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

body.page-recommended .view-btn {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #000;
    border-radius: 20px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
}

body.page-recommended .cart-icon {
    font-size: 20px;
    padding-left: 12px;
    cursor: pointer;
}

body.page-recommended .carousel-arrow {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    background: #fff;
    color: #000;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    border: none;
    cursor: pointer;
    z-index: 10;
}

body.page-recommended .arrow-left {
    left: -10px;
}

body.page-recommended .arrow-right {
    right: -10px;
}

@media (max-width: 992px) {
    body.page-recommended .product-card {
        flex: 0 0 calc(50% - 12px);
    }
}

@media (max-width: 576px) {
    body.page-recommended .product-card {
        flex: 0 0 100%;
    }
}

/* Registration */
body.page-registration * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body.page-registration html,
body.page-registration body {
    font-family: Arial, sans-serif;
    background-color: #fff;
}

body.page-registration body {
    display: flex;
    flex-direction: column;
}

body.page-registration .auth-container {
    position: relative;
    width: 100%;
    background: url('login/Frame 309.png') no-repeat center center;
    background-size: contain;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 60px 0;
}

body.page-registration .auth-form {
    width: 350px;
    background-color: rgba(255, 255, 255, 0.97);
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
    z-index: 2;
    margin-right: 108px;
}

body.page-registration .auth-form h3 {
    font-size: 22px;
    margin-bottom: 15px;
}

body.page-registration .auth-form input[type="text"],
body.page-registration .auth-form input[type="email"],
body.page-registration .auth-form input[type="password"] {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 14px;
}

body.page-registration .flex {
    display: flex;
}

body.page-registration .space-between {
    justify-content: space-between;
    align-items: center;
}

body.page-registration .italic-text {
    font-style: italic;
}

body.page-registration .muted {
    color: #777;
    font-size: 13px;
}

body.page-registration .btn {
    padding: 10px;
    width: 100%;
    margin-top: 10px;
    cursor: pointer;
    border-radius: 5px;
    border: none;
    font-size: 15px;
}

body.page-registration .btn.primary {
    background-color: #000;
    color: #eee;
}

body.page-registration .btn.secondary {
    background-color: #eee;
    color: #000;
}

body.page-registration .btn.small {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 18px;
    font-weight: bold;
    border: none;
    background-color: #f0f0f0;
    color: #000;
}

body.page-registration .social-icons {
    margin-top: 12px;
    display: flex;
    justify-content: center;
    gap: 10px;
}

@media (max-width: 768px) {
    body.page-registration .auth-container {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 20px;
        background-position: top;
        background-size: cover;
    }

    body.page-registration .auth-form {
        width: 90%;
        margin: 20px 0 0 0;
    }
}

body.page-registration .secured-bar {
    background: #ef3b36;
    height: 70px;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

body.page-registration .secured-bar-inner {
    width: 1200px;
    margin: auto;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
}

body.page-registration .secured-left img {
    height: 40px;
}

body.page-registration .secured-center {
    text-align: center;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
}

body.page-registration .secured-right a {
    background: #fff;
    color: #ef3b36;
    font-size: 12px;
    padding: 6px 14px;
    border-radius: 14px;
    text-decoration: none;
}

body.page-registration .footer {
    background: #d0d3d4;
    padding: 40px 0 20px;
}

body.page-registration .footer-inner {
    width: 1200px;
    margin: auto;
}

body.page-registration .footer-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
}

body.page-registration .footer h4 {
    font-size: 14px;
    margin-bottom: 10px;
}

body.page-registration .footer ul {
    list-style: none;
}

body.page-registration .footer li {
    font-size: 12px;
    color: #333;
    margin-bottom: 6px;
    cursor: pointer;
}

body.page-registration .footer li:hover {
    text-decoration: underline;
}

body.page-registration .cards {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
}

body.page-registration .cards img {
    width: 100%;
    height: 24px;
    object-fit: contain;
}

body.page-registration .trustpilot {
    margin-top: 14px;
}

body.page-registration .trustpilot img {
    height: 20px;
}

body.page-registration .trustpilot p {
    font-size: 11px;
    margin-top: 6px;
}

body.page-registration .newsletter {
    display: flex;
    max-width: 420px;
    height: 40px;
    overflow: hidden;
    border-radius: 6px;
    margin-bottom: 16px;
    background: #fff;
}

body.page-registration .newsletter input[type="email"] {
    flex: 1;
    border: none;
    padding: 0 14px;
    font-size: 14px;
    outline: none;
    background: #fff;
    color: #333;
    height: 100%;
}

body.page-registration .newsletter button {
    background-color: #333;
    color: #f1cbb0;
    border: none;
    padding: 0 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    height: 100%;
    transition: background 0.2s ease;
}

body.page-registration .newsletter button:hover {
    background-color: #000;
}

body.page-registration .footer-apps {
    margin-top: 16px;
}

body.page-registration .apps-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 12px;
}

body.page-registration .apps-buttons {
    display: flex;
    gap: 14px;
}

body.page-registration .app-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid #bfc3c5;
    border-radius: 8px;
    text-decoration: none;
    min-width: 190px;
}

body.page-registration .app-btn img {
    height: 26px;
}

body.page-registration .app-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

body.page-registration .app-text span {
    font-size: 11px;
    color: #333;
}

body.page-registration .app-text strong {
    font-size: 15px;
    font-weight: 700;
    color: #000;
}

body.page-registration .socials {
    margin-top: 14px;
    display: flex;
    gap: 14px;
}

body.page-registration .socials img {
    height: 18px;
    opacity: 0.85;
}

body.page-registration .footer-bottom {
    margin-top: 30px;
    border-top: 1px solid #999;
    padding-top: 12px;
    text-align: center;
    font-size: 11px;
    color: #333;
}

body.page-registration .auth-help-row {
    margin: 10px 0;
    font-style: italic;
}

body.page-registration .auth-muted-center {
    text-align: center;
    color: #999;
    font-size: 12px;
    margin: 10px 0;
}

/* Used Machines Complete */
/* Shared Styles */
body.page-used-machines-complete * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body.page-used-machines-complete body {
    font-family: "Segoe UI", Arial, sans-serif;
    background-color: #f5f5f5;
    padding: 20px;
}

/* Product Section */
body.page-used-machines-complete .product-container {
    max-width: 1200px;
    margin: 0 auto 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    background: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

body.page-used-machines-complete .image-section {
    padding: 30px;
    background: white;
}

body.page-used-machines-complete .main-image-container {
    position: relative;
    border: 2px solid #00a8e8;
    border-radius: 4px;
    padding: 30px;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

body.page-used-machines-complete .main-image {
    max-width: 100%;
    max-height: 450px;
    object-fit: contain;
}

body.page-used-machines-complete .nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    border: 2px solid #000;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    cursor: pointer;
    font-weight: bold;
    z-index: 2;
}

body.page-used-machines-complete .nav-arrow.left {
    left: 10px;
}

body.page-used-machines-complete .nav-arrow.right {
    right: 10px;
}

body.page-used-machines-complete .thumbnail-container {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    justify-content: center;
}

body.page-used-machines-complete .thumbnail {
    width: 70px;
    height: 70px;
    border: 2px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
}

body.page-used-machines-complete .thumbnail.active,
body.page-used-machines-complete .thumbnail:hover {
    border-color: #007bff;
}

body.page-used-machines-complete .thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

body.page-used-machines-complete .details-section {
    padding: 30px;
}

body.page-used-machines-complete .product-title {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 8px;
}

body.page-used-machines-complete .product-meta {
    font-size: 13px;
    color: #555;
    margin-bottom: 12px;
}

body.page-used-machines-complete .certified-badge {
    background: #007bff;
    color: #fff;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    margin-left: 6px;
}

body.page-used-machines-complete .price {
    font-size: 24px;
    font-weight: bold;
    margin-top: 10px;
}

body.page-used-machines-complete .location-info {
    font-size: 14px;
    color: #666;
    margin-bottom: 15px;
}

body.page-used-machines-complete .divider {
    height: 1px;
    background: #e0e0e0;
    margin: 20px 0;
}

body.page-used-machines-complete .section-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 12px;
}

body.page-used-machines-complete .details-grid {
    display: grid;
    grid-template-columns: 160px 1fr;
    row-gap: 12px;
    font-size: 14px;
}

body.page-used-machines-complete .detail-label {
    font-weight: 600;
    color: #000;
}

body.page-used-machines-complete .detail-value {
    color: #333;
}

body.page-used-machines-complete .action-buttons {
    display: flex;
    gap: 12px;
    margin: 25px 0;
    align-items: center;
}

body.page-used-machines-complete .btn {
    padding: 12px 24px;
    border-radius: 25px;
    font-size: 14px;
    cursor: pointer;
    font-weight: 500;
    border: none;
    white-space: nowrap;
}

body.page-used-machines-complete .btn-primary {
    background: #000;
    color: #fff;
    border: none;
}

body.page-used-machines-complete .btn-secondary {
    background: #fff;
    border: 2px solid #000;
    color: #000;
}

body.page-used-machines-complete .btn-icon {
    background: #000;
    color: #fff;
    width: 50px;
    height: 50px;
    min-width: 50px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    padding: 0;
    flex-shrink: 0;
}

body.page-used-machines-complete .supplier-card {
    background: #f9f9f9;
    border-radius: 8px;
    padding: 18px;
}

body.page-used-machines-complete .supplier-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

body.page-used-machines-complete .supplier-logo img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

body.page-used-machines-complete .supplier-name {
    font-weight: 600;
}

body.page-used-machines-complete .supplier-type {
    font-size: 13px;
    color: #666;
}

body.page-used-machines-complete .rating {
    margin-top: 10px;
    font-size: 14px;
}

body.page-used-machines-complete .stars {
    font-size: 16px;
    letter-spacing: 2px;
}

/* Recommendation Carousel - NO SCROLLBAR */
body.page-used-machines-complete .recommendation-section {
    background-color: #fff;
    padding: 30px 20px;
    margin: 20px auto;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    max-width: 1200px;
}

body.page-used-machines-complete .recommendation-section h2 {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 20px;
    color: #1a1a1a;
}

body.page-used-machines-complete .carousel-wrapper {
    position: relative;
}

body.page-used-machines-complete .carousel {
    display: flex;
    overflow-x: auto;
    scroll-behavior: smooth;
    gap: 16px;
    padding: 10px 0;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body.page-used-machines-complete .carousel::-webkit-scrollbar {
    display: none;
}

body.page-used-machines-complete .product-card {
    flex: 0 0 calc(25% - 12px);
    min-width: 280px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    border: 1px solid #ddd;
    transition: transform 0.3s ease;
    scroll-snap-align: start;
}

body.page-used-machines-complete .product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

body.page-used-machines-complete .product-card-image {
    position: relative;
    height: 200px;
    background: #f8f9fa;
    overflow: hidden;
}

body.page-used-machines-complete .product-card-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

body.page-used-machines-complete .product-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    transition: opacity 0.4s ease;
}

body.page-used-machines-complete .product-card-image .main-img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    z-index: 1;
}

body.page-used-machines-complete .product-card-image .hover-img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 2;
    transform: translateX(100%);
    transition: transform 0.5s ease, opacity 0.5s ease;
}

body.page-used-machines-complete .product-card:hover .main-img {
    opacity: 0;
}

body.page-used-machines-complete .product-card:hover .hover-img {
    opacity: 1;
    transform: translateX(0);
}

body.page-used-machines-complete .card-body {
    padding: 20px;
    border-top: 1px solid #f0f0f0;
}

body.page-used-machines-complete .card-title {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.5;
    margin-bottom: 12px;
    height: 44px;
    overflow: hidden;
    color: #1a1a1a;
}

body.page-used-machines-complete .card-info {
    font-size: 13px;
    color: #666;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

body.page-used-machines-complete .certified {
    display: inline-block;
    padding: 3px 8px;
    background: #4a90e2;
    color: white;
    font-size: 11px;
    border-radius: 3px;
    font-weight: 500;
}

body.page-used-machines-complete .card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

body.page-used-machines-complete .card-price {
    font-size: 20px;
    font-weight: 600;
    color: #1a1a1a;
}

body.page-used-machines-complete .moq {
    font-size: 13px;
    color: #666;
}

body.page-used-machines-complete .card-actions {
    display: flex;
    gap: 10px;
    align-items: center;
}

body.page-used-machines-complete .view-btn {
    flex: 1;
    padding: 11px 20px;
    border: 1.5px solid #1a1a1a;
    border-radius: 24px;
    background: #fff;
    cursor: pointer;
    font-size: 13px;
    text-align: center;
    font-weight: 500;
    transition: all 0.3s;
}

body.page-used-machines-complete .view-btn:hover {
    background: #1a1a1a;
    color: white;
}

body.page-used-machines-complete .cart-icon {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    border: 1.5px solid #1a1a1a;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 18px;
    transition: all 0.3s;
    flex-shrink: 0;
}

body.page-used-machines-complete .cart-icon:hover {
    background: #1a1a1a;
    color: white;
}

body.page-used-machines-complete .carousel-arrow {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    background: #fff;
    color: #000;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    border: 1px solid #e5e5e5;
    cursor: pointer;
    z-index: 10;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

body.page-used-machines-complete .carousel-arrow:hover {
    background: #1a1a1a;
    color: white;
    border-color: #1a1a1a;
}

body.page-used-machines-complete .arrow-left {
    left: -15px;
}

body.page-used-machines-complete .arrow-right {
    right: -15px;
}

/* Detail Section Styles */
body.page-used-machines-complete .wrapper {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    gap: 30px;
    padding: 20px;
    background: white;
    border-radius: 8px;
}

body.page-used-machines-complete .left {
    flex: 2;
}

body.page-used-machines-complete .right {
    flex: 1;
}

body.page-used-machines-complete .tabs {
    position: sticky;
    top: 0;
    background: #fff;
    display: flex;
    gap: 24px;
    border-bottom: 1px solid #ddd;
    padding: 12px 0;
    z-index: 10;
}

body.page-used-machines-complete .tab {
    position: relative;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    color: #444;
    padding-bottom: 8px;
}

body.page-used-machines-complete .tab::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 2px;
    background: #e60000;
    transform: scaleX(0);
    transition: 0.25s;
}

body.page-used-machines-complete .tab:hover {
    color: #e60000;
}

body.page-used-machines-complete .tab:hover::after,
body.page-used-machines-complete .tab.active::after {
    transform: scaleX(1);
}

body.page-used-machines-complete .tab.active {
    color: #e60000;
    font-weight: 600;
}

body.page-used-machines-complete .section {
    padding: 24px 0;
    border-bottom: 1px solid #e5e5e5;
    scroll-margin-top: 80px;
}

body.page-used-machines-complete .section h3 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
}

body.page-used-machines-complete .service-boxes {
    display: flex;
    gap: 16px;
}

body.page-used-machines-complete .service-box {
    flex: 1;
    background: #f7f7f7;
    padding: 14px;
    border-radius: 6px;
}

body.page-used-machines-complete .service-box strong {
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
}

body.page-used-machines-complete .service-box span {
    font-size: 13px;
    color: #555;
}

body.page-used-machines-complete table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

body.page-used-machines-complete td {
    border: 1px solid #ccc;
    padding: 8px;
}

body.page-used-machines-complete td strong {
    font-weight: 600;
}

body.page-used-machines-complete .review {
    display: flex;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid #eee;
    align-items: flex-start;
}

body.page-used-machines-complete .avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #d9d9d9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    flex-shrink: 0;
}

body.page-used-machines-complete .review-body {
    flex: 1;
    min-width: 0;
}

body.page-used-machines-complete .review-header {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

body.page-used-machines-complete .review-user {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

body.page-used-machines-complete .review-user strong {
    font-size: 13px;
    font-weight: 600;
    color: #111;
}

body.page-used-machines-complete .review-country {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #666;
}

body.page-used-machines-complete .review-country img {
    width: 18px;
    height: 12px;
    object-fit: cover;
    border-radius: 2px;
}

body.page-used-machines-complete .review-date {
    font-size: 12px;
    color: #777;
    white-space: nowrap;
}

body.page-used-machines-complete .review-stars {
    margin: 8px 0;
}

body.page-used-machines-complete .review-stars img {
    height: 13px;
    display: block;
}

body.page-used-machines-complete .review-body p {
    font-size: 13px;
    color: #111;
    margin-top: 8px;
}

body.page-used-machines-complete .review-note {
    background: #e0e0e0;
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 4px;
    margin-top: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

body.page-used-machines-complete .review-note img {
    height: 13px;
    display: block;
}

body.page-used-machines-complete .supplier-title {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 10px;
}

/* body.page-used-machines-complete .logo {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    border: 1px solid #ccc;
    object-fit: contain;
} */

body.page-used-machines-complete .supplier-info h4 {
    font-size: 16px;
    font-weight: 600;
}

body.page-used-machines-complete .supplier-info p {
    font-size: 13px;
    color: #555;
    margin-top: 2px;
}

body.page-used-machines-complete .supplier-rating {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    margin: 10px 0;
}

body.page-used-machines-complete .supplier-rating span {
    color: #555;
}

body.page-used-machines-complete .supplier-badge {
    font-size: 14px;
    margin-bottom: 10px;
}

body.page-used-machines-complete .supplier-badge strong {
    font-weight: 600;
}

body.page-used-machines-complete .supplier-badge em {
    color: #e60000;
    font-style: normal;
    margin-left: 6px;
}

body.page-used-machines-complete .supplier-features {
    font-size: 13px;
    color: #555;
    line-height: 1.8;
}

body.page-used-machines-complete .supplier-link {
    color: #e60000;
    font-size: 13px;
    margin-top: 10px;
    cursor: pointer;
}

body.page-used-machines-complete .supplier-buttons {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

body.page-used-machines-complete .supplier-buttons button {
    flex: 1;
    padding: 7px 12px;
    border-radius: 18px;
    font-size: 12px;
    line-height: 1.2;
    cursor: pointer;
}

body.page-used-machines-complete .supplier-buttons .black {
    background: #000;
    color: #fff;
    border: none;
}

body.page-used-machines-complete .supplier-buttons .outline {
    background: #fff;
    border: 1px solid #000;
}

body.page-used-machines-complete .right-card {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 20px;
    position: sticky;
    top: 20px;
}

body.page-used-machines-complete .right-top {
    display: flex;
    gap: 12px;
    align-items: center;
}

body.page-used-machines-complete .right-top .logo {
    border-radius: 50%;
    width: 48px;
    height: 48px;
}

body.page-used-machines-complete .right-name {
    font-size: 14px;
    font-weight: 600;
}

body.page-used-machines-complete .right-rating {
    font-size: 13px;
    margin-top: 4px;
}

body.page-used-machines-complete .manager {
    margin-top: 16px;
    background: #f7f7f7;
    padding: 14px;
    border-radius: 8px;
}

body.page-used-machines-complete .manager strong {
    display: block;
    font-size: 14px;
}

body.page-used-machines-complete .manager span {
    font-size: 12px;
    color: #555;
}

body.page-used-machines-complete .actions button {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    border-radius: 20px;
    border: 1px solid #000;
    cursor: pointer;
}

body.page-used-machines-complete .actions .primary {
    background: #000;
    color: #fff;
}

body.page-used-machines-complete .actions .outline {
    background: #fff;
}

body.page-used-machines-complete .actions .chat {
    border-color: #ccc;
}

body.page-used-machines-complete #description img {
    width: 100%;
    max-width: 800px;
    height: auto;
    margin: 16px 0;
    border-radius: 8px;
}

body.page-used-machines-complete #description p {
    margin-bottom: 16px;
    line-height: 1.6;
    color: #333;
}

@media (max-width: 992px) {
    body.page-used-machines-complete .product-container {
        grid-template-columns: 1fr;
    }

    body.page-used-machines-complete .wrapper {
        flex-direction: column;
    }

    body.page-used-machines-complete .right-card {
        position: static;
    }

    body.page-used-machines-complete .carousel .product-card {
        flex: 0 0 calc(50% - 12px);
    }

    body.page-used-machines-complete .service-boxes {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    body.page-used-machines-complete body {
        padding: 10px;
    }

    body.page-used-machines-complete .carousel {
        scroll-snap-type: x mandatory;
    }

    body.page-used-machines-complete .carousel .product-card {
        flex: 0 0 72%;
        max-width: 72%;
        scroll-snap-align: start;
    }

    body.page-used-machines-complete .product-card-image {
        height: 180px;
    }

    body.page-used-machines-complete .card-body {
        padding: 12px;
    }

    body.page-used-machines-complete .card-title {
        font-size: 14px;
        height: auto;
    }

    body.page-used-machines-complete .card-price {
        font-size: 16px;
    }

    body.page-used-machines-complete .view-btn {
        padding: 9px 10px;
        font-size: 12px;
    }

    body.page-used-machines-complete .cart-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }
}

body.page-used-machines-complete .review-badge-sm {
    height: 13px;
}

body.page-used-machines-complete .review-badge-lg {
    height: 14px;
}

/* iziToast  */
.iziToast{
    padding: 8px 45px 9px 0 !important;
}

.iziToast-wrapper {
    padding: 10px 15px !important;
}

/* Cart badge styling */
.cart-container .icon-btn {
    position: relative;
}

.cart-container .badge {
    position: absolute;
    top: -8px;
    right: -8px;
    font-size: 10px;
    padding: 2px 6px;
    min-width: 18px;
    height: 18px;
    line-height: 14px;
    text-align: center;
    border-radius: 9px;
    z-index: 1;
}

/* ================= SELECTIZE.JS CUSTOM THEME ================= */
/* Override default Selectize styling to match website design */

.selectize-control {
    position: relative;
}

.selectize-control .selectize-input {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #e1e5e9;
    border-radius: 4px;
    background: #fff;
    font-family: "Inter", "Open Sans", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #333;
    box-shadow: none;
    transition: border-color 0.2s ease;
    min-height: auto;
}

.selectize-control .selectize-input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.selectize-control .selectize-input::after {
    content: '';
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 4px solid #666;
    pointer-events: none;
}

.selectize-control .selectize-input.dropdown-active::after {
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 4px solid #666;
}

.selectize-control .selectize-input input {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    width: auto !important;
    max-width: 100%;
    box-shadow: none;
}

.selectize-control .selectize-input input::placeholder {
    color: #999;
    opacity: 1;
}

.selectize-control .selectize-input .item {
    display: inline-block;
    padding: 2px 6px;
    margin: 2px 4px 2px 0;
    background: #f1f1f1;
    color: #333;
    border-radius: 2px;
    font-size: 12px;
}

.selectize-control .selectize-input .item .remove {
    color: #999;
    cursor: pointer;
    margin-left: 4px;
}

.selectize-control .selectize-input .item .remove:hover {
    color: #666;
}

.selectize-dropdown {
    position: absolute;
    z-index: 1000;
    border: 1px solid #e1e5e9;
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    margin-top: 2px;
    max-height: 200px;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}

.selectize-dropdown .selectize-dropdown-content {
    overflow: visible;
}

.selectize-dropdown .option {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.selectize-dropdown .option {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    border-bottom: 1px solid #f5f5f5;
}

.selectize-dropdown .option:last-child {
    border-bottom: none;
}

.selectize-dropdown .option:hover {
    background: #f8f9fa;
    color: #007bff;
}

.selectize-dropdown .option.active {
    background: #007bff;
    color: #fff;
}

.selectize-dropdown .option.disabled {
    color: #999;
    cursor: not-allowed;
}

.selectize-dropdown .option.disabled:hover {
    background: transparent;
    color: #999;
}

.selectize-control.single .selectize-input .item {
    background: transparent;
    padding: 0;
    margin: 0;
    border: none;
}

.selectize-control.single .selectize-input .item .remove {
    display: none;
}

/* Loading state */
.selectize-control .selectize-input.loading::after {
    border-top-color: #007bff;
    animation: selectize-loader 1s infinite;
}

@keyframes selectize-loader {
    0% { transform: translateY(-50%) rotate(0deg); }
    100% { transform: translateY(-50%) rotate(360deg); }
}

/* Disabled state */
.selectize-control.disabled .selectize-input {
    background: #f8f9fa;
    color: #999;
    cursor: not-allowed;
}

.selectize-control.disabled .selectize-input input {
    cursor: not-allowed;
}