/* ============================================
   MercadoChiapas - Sistema de Clasificados
   Diseño moderno, mobile-first, profesional
   ============================================ */

:root {
    /* Colores principales - paleta inspirada en Chiapas */
    --mc-primary: #0B6E4F;
    --mc-primary-dark: #084C37;
    --mc-primary-light: #E8F5F0;
    --mc-accent: #E8871E;
    --mc-accent-dark: #C06E0F;
    --mc-accent-light: #FEF3E2;
    
    /* WhatsApp */
    --mc-whatsapp: #25D366;
    --mc-whatsapp-dark: #1DA851;
    
    /* Neutros */
    --mc-white: #FFFFFF;
    --mc-gray-50: #F8FAFB;
    --mc-gray-100: #F1F4F6;
    --mc-gray-200: #E2E8ED;
    --mc-gray-300: #CBD4DC;
    --mc-gray-400: #9BABB8;
    --mc-gray-500: #6B7D8A;
    --mc-gray-600: #4A5E6B;
    --mc-gray-700: #2D3E4A;
    --mc-gray-800: #1A2A35;
    --mc-gray-900: #0D1B24;
    
    /* Status */
    --mc-success: #10B981;
    --mc-warning: #F59E0B;
    --mc-danger: #EF4444;
    --mc-info: #3B82F6;
    
    /* Sombras */
    --mc-shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --mc-shadow: 0 2px 8px rgba(0,0,0,0.1);
    --mc-shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
    --mc-shadow-xl: 0 20px 60px rgba(0,0,0,0.15);
    
    /* Border radius */
    --mc-radius-sm: 6px;
    --mc-radius: 10px;
    --mc-radius-lg: 16px;
    --mc-radius-xl: 24px;
    
    /* Fonts */
    --mc-font: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --mc-font-display: 'Plus Jakarta Sans', 'DM Sans', sans-serif;
    
    /* Sizing */
    --mc-header-h: 64px;
    --mc-max-w: 1240px;
}

/* ---- Reset & Base ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--mc-font);
    font-size: 15px;
    line-height: 1.6;
    color: var(--mc-gray-800);
    background: var(--mc-gray-50);
    -webkit-font-smoothing: antialiased;
}
a { color: var(--mc-primary); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--mc-primary-dark); }
img { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
h1, h2, h3, h4 { font-family: var(--mc-font-display); font-weight: 700; line-height: 1.2; color: var(--mc-gray-900); }

/* ---- Container ---- */
.mc-container { max-width: var(--mc-max-w); margin: 0 auto; padding: 0 16px; }
.mc-container--narrow { max-width: 560px; }

/* ============ HEADER ============ */
.mc-header {
    background: var(--mc-white);
    border-bottom: 1px solid var(--mc-gray-200);
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--mc-header-h);
}
.mc-header__inner {
    display: flex;
    align-items: center;
    gap: 16px;
    height: 100%;
}
.mc-header__logo {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    color: var(--mc-gray-900);
}
.mc-header__logo:hover { color: var(--mc-gray-900); }
.mc-header__logo-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--mc-primary);
    color: white;
    font-family: var(--mc-font-display);
    font-weight: 800;
    font-size: 14px;
    border-radius: 8px;
}
.mc-header__logo-text {
    font-size: 17px;
    font-family: var(--mc-font-display);
}
.mc-header__logo-text strong { color: var(--mc-primary); }
.mc-header__logo-img {
    display: block;
    max-width: 200px;
    object-fit: contain;
}
.mc-footer__logo-img {
    display: block;
    height: 32px;
    max-width: 180px;
    object-fit: contain;
    margin-bottom: 8px;
}

/* Search bar */
.mc-search-bar {
    flex: 1;
    display: flex;
    max-width: 480px;
    border: 2px solid var(--mc-gray-200);
    border-radius: 100px;
    overflow: hidden;
    transition: border-color 0.2s;
}
.mc-search-bar:focus-within { border-color: var(--mc-primary); }
.mc-search-bar__input {
    flex: 1;
    border: none;
    padding: 8px 16px;
    outline: none;
    background: transparent;
    min-width: 0;
}
.mc-search-bar__btn {
    border: none;
    background: var(--mc-primary);
    color: white;
    padding: 8px 16px;
    cursor: pointer;
    transition: background 0.2s;
}
.mc-search-bar__btn:hover { background: var(--mc-primary-dark); }

/* Nav */
.mc-header__nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.mc-header__nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    color: var(--mc-gray-600);
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s;
}
.mc-header__nav-link:hover { background: var(--mc-gray-100); color: var(--mc-gray-800); }
.mc-header__toggle { display: none; border: none; background: none; font-size: 20px; cursor: pointer; padding: 8px; color: var(--mc-gray-700); }

/* ============ BUTTONS ============ */
.mc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border: 2px solid transparent;
    border-radius: var(--mc-radius);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    line-height: 1.2;
}
.mc-btn--primary { background: var(--mc-primary); color: white; }
.mc-btn--primary:hover { background: var(--mc-primary-dark); color: white; }
.mc-btn--outline { background: transparent; border-color: var(--mc-gray-300); color: var(--mc-gray-700); }
.mc-btn--outline:hover { border-color: var(--mc-primary); color: var(--mc-primary); }
.mc-btn--whatsapp { background: var(--mc-whatsapp); color: white; }
.mc-btn--whatsapp:hover { background: var(--mc-whatsapp-dark); color: white; }
.mc-btn--danger { color: var(--mc-danger); border-color: var(--mc-danger); }
.mc-btn--danger:hover { background: var(--mc-danger); color: white; }
.mc-btn--white { background: white; color: var(--mc-primary); }
.mc-btn--white:hover { background: var(--mc-gray-100); color: var(--mc-primary); }
.mc-btn--sm { padding: 6px 14px; font-size: 13px; }
.mc-btn--xs { padding: 4px 10px; font-size: 12px; border-radius: 6px; }
.mc-btn--lg { padding: 14px 28px; font-size: 16px; border-radius: 12px; }
.mc-btn--block { width: 100%; }

/* ============ HERO ============ */
.mc-hero {
    background: linear-gradient(135deg, var(--mc-primary) 0%, var(--mc-primary-dark) 50%, #042F2E 100%);
    color: white;
    padding: 3rem 0 2.5rem;
    text-align: center;
}
.mc-hero__title {
    font-size: clamp(1.8rem, 4vw, 2.8rem);
    margin-bottom: 0.5rem;
    color: white;
}
.mc-hero__title strong { color: var(--mc-accent); }
.mc-hero__subtitle {
    font-size: 1.1rem;
    opacity: 0.85;
    margin-bottom: 1.5rem;
}
.mc-hero__search {
    max-width: 700px;
    margin: 0 auto;
}
.mc-hero__search-row {
    display: flex;
    gap: 0;
    background: white;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--mc-shadow-lg);
}
.mc-hero__search-input {
    flex: 1;
    border: none;
    padding: 14px 18px;
    font-size: 16px;
    outline: none;
    color: var(--mc-gray-800);
    min-width: 0;
}
.mc-hero__search-select {
    border: none;
    border-left: 1px solid var(--mc-gray-200);
    padding: 14px 12px;
    font-size: 14px;
    outline: none;
    color: var(--mc-gray-600);
    background: white;
    max-width: 200px;
}
.mc-hero__search .mc-btn { border-radius: 0; padding: 14px 24px; }
.mc-hero__location {
    margin-top: 1rem;
    font-size: 14px;
    opacity: 0.9;
}
.mc-hero__location-change { color: var(--mc-accent); margin-left: 8px; text-decoration: underline; }

/* ============ SECTIONS ============ */
.mc-section { padding: 2.5rem 0; }
.mc-section--featured { background: var(--mc-accent-light); }
.mc-section__title {
    font-size: 1.4rem;
    margin-bottom: 1.2rem;
}
.mc-section__title i { color: var(--mc-accent); }
.mc-section__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.2rem;
}

/* ============ GRID ============ */
.mc-grid { display: grid; gap: 16px; }
.mc-grid--4 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.mc-grid--3 { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* ============ CARD (Anuncio) ============ */
.mc-card {
    background: var(--mc-white);
    border-radius: var(--mc-radius-lg);
    overflow: hidden;
    box-shadow: var(--mc-shadow-sm);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    position: relative;
}
.mc-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--mc-shadow-lg);
}
.mc-card__img-wrap {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: var(--mc-gray-100);
    display: block;
}
.mc-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
    display: block;
}
.mc-card__img--fallback {
    object-fit: contain;
    padding: 20px;
    background: var(--mc-gray-100);
}
/* Broken image: hide alt text overflow */
.mc-card__img-wrap img[alt] {
    font-size: 0;
    color: transparent;
}
.mc-card:hover .mc-card__img { transform: scale(1.04); }
/* Type badge - OUTSIDE image, between image and body */
.mc-card__type {
    display: inline-block;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: -12px 12px 0;
    position: relative;
    z-index: 2;
    border-radius: 6px;
    width: fit-content;
}
.mc-card__type--featured { background: var(--mc-accent); color: white; }
.mc-card__type--premium { background: linear-gradient(135deg, #F59E0B, #D97706); color: white; }
.mc-card__type--sold { background: var(--mc-info); color: white; }
.mc-card__body { padding: 8px 14px 14px; flex: 1; display: flex; flex-direction: column; }
.mc-card__location {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--mc-primary);
    font-weight: 600;
    margin-bottom: 6px;
}
.mc-card__location i { font-size: 10px; }
.mc-card__title {
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px;
    line-height: 1.3;
}
.mc-card__title a { color: var(--mc-gray-800); }
.mc-card__title a:hover { color: var(--mc-primary); }
.mc-card__price {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--mc-gray-900);
    font-family: var(--mc-font-display);
    margin-bottom: 8px;
}
.mc-card__price--free { color: var(--mc-success); font-size: 0.95rem; }
.mc-card__meta {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--mc-gray-400);
    margin-bottom: 10px;
    margin-top: auto;
}
.mc-card__actions { margin-top: auto; display: flex; gap: 6px; }
.mc-card__actions .mc-btn { flex: 1; text-align: center; font-size: 12px; padding: 6px 8px; white-space: nowrap; overflow: hidden; }

/* ============ CATEGORIES GRID ============ */
.mc-categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}
.mc-cat-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px 8px;
    background: var(--mc-white);
    border-radius: var(--mc-radius);
    border: 1px solid var(--mc-gray-200);
    transition: all 0.2s;
    text-align: center;
}
.mc-cat-card:hover {
    border-color: var(--mc-primary);
    background: var(--mc-primary-light);
    color: var(--mc-primary);
    transform: translateY(-2px);
    box-shadow: var(--mc-shadow);
}
.mc-cat-card__icon { font-size: 1.4rem; color: var(--mc-primary); }
.mc-cat-card__name { font-size: 13px; font-weight: 600; color: var(--mc-gray-700); }
.mc-cat-card:hover .mc-cat-card__name { color: var(--mc-primary-dark); }
.mc-cat-card__count { font-size: 11px; color: var(--mc-gray-400); }
.mc-section--cats { padding: 20px 0 10px; }
.mc-section--cats .mc-categories-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 12px; }
.mc-cat-card { cursor: pointer; text-decoration: none; color: inherit; }


/* ============ CTA ============ */
.mc-cta {
    background: linear-gradient(135deg, var(--mc-accent) 0%, var(--mc-accent-dark) 100%);
    color: white;
    text-align: center;
    padding: 3rem 1rem;
}
.mc-cta h2 { color: white; font-size: 1.8rem; margin-bottom: 0.5rem; }
.mc-cta p { opacity: 0.9; margin-bottom: 1.5rem; font-size: 1.05rem; }

/* ============ ALERTS ============ */
.mc-alert {
    padding: 12px 16px;
    border-radius: var(--mc-radius);
    margin: 12px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}
.mc-alert--success { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.mc-alert--error { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
.mc-alert--warning { background: #FFFBEB; color: #92400E; border: 1px solid #FDE68A; }
.mc-alert--info { background: #EFF6FF; color: #1E40AF; border: 1px solid #BFDBFE; }
.mc-alert__close { background: none; border: none; font-size: 18px; cursor: pointer; opacity: 0.5; padding: 0 4px; }

/* ============ FORMS ============ */
.mc-form--card {
    background: var(--mc-white);
    padding: 2rem;
    border-radius: var(--mc-radius-lg);
    box-shadow: var(--mc-shadow);
}
.mc-form__group { margin-bottom: 1.2rem; }
.mc-form__label {
    display: block;
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 6px;
    color: var(--mc-gray-700);
}
.mc-form__input {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid var(--mc-gray-200);
    border-radius: var(--mc-radius);
    font-size: 15px;
    color: var(--mc-gray-800);
    background: var(--mc-white);
    transition: border-color 0.2s;
    outline: none;
}
.mc-form__input:focus { border-color: var(--mc-primary); }
.mc-form__input:disabled { background: var(--mc-gray-100); opacity: 0.7; }
.mc-form__input--code {
    text-align: center;
    font-size: 2rem;
    letter-spacing: 0.5em;
    font-weight: 700;
    font-family: var(--mc-font-display);
}
.mc-form__hint { display: block; margin-top: 4px; font-size: 12px; color: var(--mc-gray-400); }
.mc-form__row { display: flex; gap: 10px; }
.mc-form__phone-wrap {
    display: flex;
    align-items: center;
    border: 2px solid var(--mc-gray-200);
    border-radius: var(--mc-radius);
    overflow: hidden;
}
.mc-form__phone-wrap:focus-within { border-color: var(--mc-primary); }
.mc-form__phone-prefix {
    padding: 10px 12px;
    background: var(--mc-gray-100);
    font-weight: 600;
    color: var(--mc-gray-600);
    font-size: 14px;
}
.mc-form__phone-wrap .mc-form__input { border: none; }

/* ============ AUTH BOX ============ */
.mc-auth-box {
    background: var(--mc-white);
    border-radius: var(--mc-radius-xl);
    padding: 2.5rem;
    box-shadow: var(--mc-shadow-lg);
    margin: 3rem auto;
}
.mc-auth-box__header { text-align: center; margin-bottom: 2rem; }
.mc-auth-box__header h1 { font-size: 1.5rem; margin-top: 1rem; }
.mc-auth-box__header p { color: var(--mc-gray-500); margin-top: 0.3rem; }
.mc-auth-box__footer { text-align: center; margin-top: 1.5rem; font-size: 13px; color: var(--mc-gray-400); }
.mc-auth-box__footer a { color: var(--mc-primary); }

/* ============ DETAIL PAGE ============ */
.mc-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 1rem 0;
    font-size: 13px;
    color: var(--mc-gray-400);
    flex-wrap: wrap;
}
.mc-breadcrumb a { color: var(--mc-gray-500); }
.mc-breadcrumb a:hover { color: var(--mc-primary); }

.mc-detail {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 2rem;
    padding-bottom: 2rem;
}
.mc-detail__gallery { }

/* Gallery */
.mc-gallery__main {
    border-radius: var(--mc-radius-lg);
    overflow: hidden;
    aspect-ratio: 4/3;
    background: var(--mc-gray-100);
    margin-bottom: 10px;
}
.mc-gallery__main img { width: 100%; height: 100%; object-fit: contain; background: var(--mc-gray-100); }
.mc-gallery__main--empty { display: flex; align-items: center; justify-content: center; }
.mc-gallery__thumbs { display: flex; gap: 8px; overflow-x: auto; }
.mc-gallery__thumb {
    width: 70px;
    height: 55px;
    object-fit: cover;
    border-radius: 8px;
    cursor: pointer;
    border: 2px solid transparent;
    opacity: 0.6;
    transition: all 0.2s;
    flex-shrink: 0;
}
.mc-gallery__thumb:hover, .mc-gallery__thumb.is-active { opacity: 1; border-color: var(--mc-primary); }

/* Detail info */
.mc-detail__info {
    background: var(--mc-white);
    border-radius: var(--mc-radius-lg);
    padding: 1.5rem;
    box-shadow: var(--mc-shadow);
    align-self: start;
    position: sticky;
    top: calc(var(--mc-header-h) + 16px);
}
.mc-detail__price-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.mc-detail__price {
    font-size: 1.8rem;
    font-weight: 800;
    font-family: var(--mc-font-display);
    color: var(--mc-gray-900);
}
.mc-detail__title { font-size: 1.2rem; margin-bottom: 10px; }
.mc-detail__location {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--mc-primary);
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 10px;
    padding: 8px 12px;
    background: var(--mc-primary-light);
    border-radius: 8px;
}
.mc-detail__location a { color: var(--mc-primary); }
.mc-detail__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 13px;
    color: var(--mc-gray-500);
    margin-bottom: 1.2rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--mc-gray-200);
}
.mc-detail__meta span { display: flex; align-items: center; gap: 4px; }

/* Contact */
.mc-detail__contact {
    margin-bottom: 1.2rem;
    padding-bottom: 1.2rem;
    border-bottom: 1px solid var(--mc-gray-200);
}
.mc-detail__phone {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--mc-gray-800);
}
.mc-detail__phone a { color: var(--mc-gray-800); }
.mc-detail__phone i { color: var(--mc-primary); }

.mc-detail__desc { margin-bottom: 1.2rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--mc-gray-200); }
.mc-detail__desc h3 { font-size: 1rem; margin-bottom: 8px; }
.mc-detail__desc-text { color: var(--mc-gray-600); font-size: 14px; white-space: pre-wrap; }

/* Seller */
.mc-detail__seller { margin-bottom: 1.2rem; }
.mc-detail__seller-info { display: flex; align-items: center; gap: 12px; color: var(--mc-gray-800); }
.mc-detail__seller-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; background: var(--mc-gray-200); flex-shrink: 0; }
.mc-detail__seller-rep { display: flex; align-items: center; gap: 3px; font-size: 13px; }
.mc-detail__seller small { color: var(--mc-gray-400); font-size: 12px; }

/* Stars */
.mc-star--filled { color: var(--mc-accent); }
.mc-star--empty { color: var(--mc-gray-300); }

.mc-detail__actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ============ BADGES ============ */
.mc-badge {
    display: inline-flex;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}
.mc-badge--gold { background: var(--mc-accent-light); color: var(--mc-accent-dark); }
.mc-badge--green { background: #ECFDF5; color: #065F46; }
.mc-badge--yellow { background: #FFFBEB; color: #92400E; }
.mc-badge--blue { background: #EFF6FF; color: #1E40AF; }
.mc-badge--gray { background: var(--mc-gray-100); color: var(--mc-gray-600); }

/* ============ LAYOUT SIDEBAR ============ */
.mc-layout-sidebar {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 2rem;
    padding: 1rem 0;
}
.mc-filters {
    background: var(--mc-white);
    padding: 1.2rem;
    border-radius: var(--mc-radius-lg);
    box-shadow: var(--mc-shadow-sm);
    align-self: start;
    position: sticky;
    top: calc(var(--mc-header-h) + 16px);
}

/* ============ PAGE HEADER ============ */
.mc-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 0 0.5rem;
}
.mc-page-header h1 { font-size: 1.5rem; }
.mc-page-header__count { color: var(--mc-gray-400); font-size: 14px; }
.mc-page-title { font-size: 1.5rem; padding: 1.5rem 0 1rem; }

/* ============ TAGS ============ */
.mc-tags { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 1rem; }
.mc-tag {
    padding: 6px 14px;
    background: var(--mc-white);
    border: 1px solid var(--mc-gray-200);
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    color: var(--mc-gray-600);
    transition: all 0.2s;
}
.mc-tag:hover { background: var(--mc-primary-light); border-color: var(--mc-primary); color: var(--mc-primary); }

/* ============ PAGINATION ============ */
.mc-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 2rem 0;
}
.mc-pagination__link {
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: var(--mc-gray-600);
    background: var(--mc-white);
    border: 1px solid var(--mc-gray-200);
    transition: all 0.2s;
}
.mc-pagination__link:hover { border-color: var(--mc-primary); color: var(--mc-primary); }
.mc-pagination__link--active { background: var(--mc-primary); color: white; border-color: var(--mc-primary); }

/* ============ EMPTY STATE ============ */
.mc-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--mc-gray-400);
}
.mc-empty i { font-size: 3rem; margin-bottom: 1rem; opacity: 0.4; }
.mc-empty p { margin-bottom: 1rem; }

/* ============ ACCOUNT ============ */
.mc-account { display: grid; grid-template-columns: 260px 1fr; gap: 2rem; padding: 1.5rem 0; }
.mc-account__sidebar { }
.mc-account__profile {
    background: var(--mc-white);
    border-radius: var(--mc-radius-lg);
    padding: 1.5rem;
    text-align: center;
    box-shadow: var(--mc-shadow-sm);
    margin-bottom: 1rem;
}
.mc-account__avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin: 0 auto 10px; background: var(--mc-gray-200); }
.mc-account__phone { font-size: 13px; color: var(--mc-gray-500); }
.mc-account__nav {
    background: var(--mc-white);
    border-radius: var(--mc-radius-lg);
    overflow: hidden;
    box-shadow: var(--mc-shadow-sm);
}
.mc-account__nav a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    color: var(--mc-gray-600);
    font-size: 14px;
    font-weight: 500;
    border-bottom: 1px solid var(--mc-gray-100);
    transition: all 0.2s;
}
.mc-account__nav a:hover, .mc-account__nav a.is-active { background: var(--mc-primary-light); color: var(--mc-primary); }
.mc-account__logout { color: var(--mc-danger) !important; }
.mc-account__content h1 { font-size: 1.4rem; margin-bottom: 1.5rem; }

/* Stats */
.mc-stats { display: flex; gap: 1rem; margin-bottom: 2rem; }
.mc-stats__item {
    flex: 1;
    background: var(--mc-white);
    padding: 1.2rem;
    border-radius: var(--mc-radius);
    text-align: center;
    box-shadow: var(--mc-shadow-sm);
}
.mc-stats__num { display: block; font-size: 1.8rem; font-weight: 800; font-family: var(--mc-font-display); color: var(--mc-primary); }
.mc-stats__label { font-size: 13px; color: var(--mc-gray-500); }

/* ============ TABLES ============ */
.mc-table-wrap { overflow-x: auto; }
.mc-table { width: 100%; border-collapse: collapse; background: var(--mc-white); border-radius: var(--mc-radius); overflow: hidden; box-shadow: var(--mc-shadow-sm); }
.mc-table th { text-align: left; padding: 12px 14px; font-size: 12px; text-transform: uppercase; color: var(--mc-gray-500); background: var(--mc-gray-50); border-bottom: 2px solid var(--mc-gray-200); }
.mc-table td { padding: 12px 14px; border-bottom: 1px solid var(--mc-gray-100); font-size: 14px; }
.mc-table__product { display: flex; align-items: center; gap: 10px; }
.mc-table__product img { width: 50px; height: 40px; object-fit: cover; border-radius: 6px; }
.mc-table__product small { display: block; color: var(--mc-gray-400); font-size: 12px; }
.mc-table__actions { display: flex; gap: 4px; flex-wrap: wrap; }

/* ============ PROFILE ============ */
.mc-profile { padding: 1.5rem 0; }
.mc-profile__header {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    background: var(--mc-white);
    border-radius: var(--mc-radius-lg);
    box-shadow: var(--mc-shadow-sm);
    margin-bottom: 2rem;
}
.mc-profile__avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; background: var(--mc-gray-200); flex-shrink: 0; }
.mc-profile__rep { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 14px; }
.mc-profile__rate {
    background: var(--mc-white);
    padding: 1.5rem;
    border-radius: var(--mc-radius);
    box-shadow: var(--mc-shadow-sm);
    margin-bottom: 2rem;
}
.mc-profile__rate h3 { margin-bottom: 1rem; }

/* Star input */
.mc-star-input { display: flex; flex-direction: row-reverse; gap: 4px; }
.mc-star-input input { display: none; }
.mc-star-input label { cursor: pointer; font-size: 1.5rem; color: var(--mc-gray-300); transition: color 0.15s; }
.mc-star-input input:checked ~ label,
.mc-star-input label:hover,
.mc-star-input label:hover ~ label { color: var(--mc-accent); }

/* Reviews */
.mc-reviews { display: flex; flex-direction: column; gap: 12px; }
.mc-review {
    background: var(--mc-white);
    padding: 1rem;
    border-radius: var(--mc-radius);
    box-shadow: var(--mc-shadow-sm);
}
.mc-review__author { font-size: 13px; color: var(--mc-gray-500); margin-top: 4px; }
.mc-review__text { font-size: 14px; color: var(--mc-gray-700); margin-top: 6px; }

/* ============ EDIT IMAGES ============ */
.mc-edit-images { display: flex; gap: 10px; flex-wrap: wrap; }
.mc-edit-images__item { text-align: center; }
.mc-edit-images__item img { width: 100px; height: 75px; object-fit: cover; border-radius: 8px; margin-bottom: 4px; }
.mc-edit-images__item label { font-size: 12px; color: var(--mc-danger); cursor: pointer; }

/* ============ MODAL ============ */
.mc-modal { display: none; position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; }
.mc-modal.is-open { display: flex; }
.mc-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.mc-modal__content {
    position: relative;
    background: white;
    padding: 2rem;
    border-radius: var(--mc-radius-lg);
    max-width: 480px;
    width: 90%;
    box-shadow: var(--mc-shadow-xl);
}
.mc-modal__content h3 { margin-bottom: 1rem; }

/* ============ FOOTER ============ */
.mc-footer {
    background: var(--mc-gray-900);
    color: var(--mc-gray-400);
    padding: 2.5rem 0 1rem;
    margin-top: 2rem;
}
.mc-footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }
.mc-footer__brand p { margin-top: 1rem; font-size: 13px; line-height: 1.6; }
.mc-footer__links h4 { color: var(--mc-gray-200); font-size: 14px; margin-bottom: 12px; }
.mc-footer__links a { display: block; color: var(--mc-gray-400); font-size: 13px; margin-bottom: 8px; transition: color 0.2s; }
.mc-footer__links a:hover { color: white; }
.mc-footer__bottom { border-top: 1px solid var(--mc-gray-700); padding-top: 1rem; text-align: center; font-size: 13px; }

/* ============ RESPONSIVE ============ */
@media (max-width: 768px) {
    .mc-header__nav { 
        display: none; 
        position: absolute; 
        top: var(--mc-header-h); 
        left: 0; right: 0; 
        background: white; 
        flex-direction: column; 
        padding: 1rem; 
        border-bottom: 1px solid var(--mc-gray-200); 
        box-shadow: var(--mc-shadow-lg);
    }
    .mc-header__nav.is-open { display: flex; }
    .mc-header__toggle { display: block; }
    .mc-header__nav-label { display: inline; }
    .mc-search-bar { display: none; }
    
    .mc-hero__search-row { flex-direction: column; border-radius: 12px; }
    .mc-hero__search-select { border-left: none; border-top: 1px solid var(--mc-gray-200); max-width: 100%; }
    
    .mc-detail { grid-template-columns: 1fr; }
    .mc-detail__info { position: static; }
    .mc-layout-sidebar { grid-template-columns: 1fr; }
    .mc-filters { position: static; }
    .mc-account { grid-template-columns: 1fr; }
    .mc-footer__grid { grid-template-columns: 1fr 1fr; }
    .mc-grid--4, .mc-grid--3 { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .mc-categories-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
    .mc-stats { flex-direction: row; gap: 8px; }
    .mc-stats__item { padding: 1rem 0.5rem; }
    .mc-stats__num { font-size: 1.4rem; }
    .mc-profile__header { flex-direction: column; text-align: center; }
    .mc-table { font-size: 13px; }
    .mc-table td, .mc-table th { padding: 8px 10px; }
}

@media (max-width: 480px) {
    .mc-grid--4, .mc-grid--3 { grid-template-columns: 1fr 1fr; gap: 10px; }
    .mc-card__body { padding: 10px 12px 12px; }
    .mc-card__title { font-size: 13px; }
    .mc-card__price { font-size: 1rem; }
    .mc-footer__grid { grid-template-columns: 1fr; }
    .mc-hero { padding: 2rem 0 1.5rem; }
    .mc-hero__title { font-size: 1.5rem; }
}