/**
 * vCard49 — Modern E-Commerce Marketplace Theme
 * Premium marketplace UI · Version 3.0
 * Prefix: mp- (marketplace)
 */

/* ─── CSS VARIABLES ──────────────────────────────────────────────────────── */
:root {
    --mp-primary: #2563eb;
    --mp-primary-rgb: 37, 99, 235;
    --mp-primary-light: #3b82f6;
    --mp-primary-dark: #1d4ed8;
    --mp-accent: #f97316;
    --mp-success: #10b981;
    --mp-warning: #f59e0b;
    --mp-danger: #ef4444;
    --mp-info: #06b6d4;

    --mp-bg-primary: #ffffff;
    --mp-bg-secondary: #f8fafc;
    --mp-bg-tertiary: #f1f5f9;
    --mp-text-primary: #0f172a;
    --mp-text-secondary: #475569;
    --mp-text-tertiary: #94a3b8;
    --mp-text-inverse: #ffffff;
    --mp-border: #e2e8f0;
    --mp-border-light: #f1f5f9;

    --mp-shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
    --mp-shadow-sm: 0 2px 4px rgba(0,0,0,0.06);
    --mp-shadow-md: 0 4px 12px rgba(0,0,0,0.08);
    --mp-shadow-lg: 0 8px 24px rgba(0,0,0,0.10);
    --mp-shadow-xl: 0 16px 40px rgba(0,0,0,0.12);
    --mp-shadow-2xl: 0 24px 60px rgba(0,0,0,0.15);

    --mp-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --mp-r-sm:  0.375rem;
    --mp-r-md:  0.5rem;
    --mp-r-lg:  0.75rem;
    --mp-r-xl:  1rem;
    --mp-r-2xl: 1.5rem;
    --mp-r-3xl: 2rem;
    --mp-r-full: 9999px;

    --mp-t-fast:   150ms cubic-bezier(0.4,0,0.2,1);
    --mp-t-normal: 300ms cubic-bezier(0.4,0,0.2,1);
    --mp-t-slow:   500ms cubic-bezier(0.4,0,0.2,1);
}

/* ─── RESET & BASE ───────────────────────────────────────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; font-size:16px; }
body.vcard49-body {
    font-family: var(--mp-font);
    background: var(--mp-bg-primary);
    color: var(--mp-text-primary);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img { max-width:100%; height:auto; display:block; }
a { color: inherit; text-decoration: none; }
button { font-family: var(--mp-font); }
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background: var(--mp-bg-tertiary); }
::-webkit-scrollbar-thumb { background: var(--mp-border); border-radius:3px; }
::-webkit-scrollbar-thumb:hover { background: var(--mp-text-tertiary); }

/* ─── DECORATIVE BACKGROUND ──────────────────────────────────────────────── */
.marketplace-bg-grid {
    position:fixed; inset:0;
    background-image:
        linear-gradient(rgba(37,99,235,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(37,99,235,0.03) 1px, transparent 1px);
    background-size: 60px 60px;
    z-index:-2; pointer-events:none;
}
.marketplace-gradient-bg {
    position:fixed; top:-200px; right:-200px;
    width:600px; height:600px;
    background: radial-gradient(circle, rgba(37,99,235,0.07) 0%, transparent 65%);
    z-index:-1; pointer-events:none;
    animation: mp-float 25s ease-in-out infinite;
}
@keyframes mp-float { 0%,100% { transform:translateY(0) rotate(0deg); } 50% { transform:translateY(-40px) rotate(5deg); } }

/* ─── PAGE LOADER ─────────────────────────────────────────────────────────── */
.marketplace-loader {
    position:fixed; inset:0; background:var(--mp-bg-primary);
    z-index:9999; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:1rem;
    transition: opacity 0.4s, visibility 0.4s;
}
.marketplace-loader.mp-loaded { opacity:0; visibility:hidden; pointer-events:none; }
.loader-spinner { display:flex; flex-direction:column; align-items:center; gap:1rem; }
.spinner {
    width:48px; height:48px;
    border:3px solid var(--mp-bg-tertiary);
    border-top-color: var(--mp-primary);
    border-radius:50%;
    animation: mp-spin 0.7s linear infinite;
}
.loader-text { font-size:0.875rem; color:var(--mp-text-tertiary); font-weight:500; }
@keyframes mp-spin { to { transform:rotate(360deg); } }

/* ─── CONTAINER ──────────────────────────────────────────────────────────── */
.mp-container {
    max-width: 1400px; margin:0 auto; padding:0 1.5rem;
    width: 100%;
}
.mp-container-sm { max-width:860px; margin:0 auto; padding:0 1.5rem; }

/* ─── UTILITY ────────────────────────────────────────────────────────────── */
.ml-1 { margin-left:.25rem; } .ml-2 { margin-left:.5rem; }
.mr-1 { margin-right:.25rem; } .mr-2 { margin-right:.5rem; }
.mt-1 { margin-top:.25rem; }
.hide-mobile { display:none; }
.show-mobile { display:block; }
@media(min-width:768px){ .hide-mobile{display:block;} .show-mobile{display:none;} }

/* ─── HEADER ─────────────────────────────────────────────────────────────── */
.mp-header {
    position:sticky; top:0; z-index:900;
    background:rgba(255,255,255,0.95);
    backdrop-filter: blur(20px) saturate(1.8);
    -webkit-backdrop-filter: blur(20px) saturate(1.8);
    border-bottom: 1px solid var(--mp-border);
    transition: box-shadow var(--mp-t-fast);
}
.mp-header.mp-scrolled { box-shadow: var(--mp-shadow-md); }

.mp-header-content {
    max-width:1400px; margin:0 auto; padding:.75rem 1.5rem;
    display:flex; align-items:center; gap:1.5rem;
}

.mp-logo {
    display:flex; align-items:center; gap:.5rem; flex-shrink:0;
    font-size:1.375rem; font-weight:800; color:var(--mp-primary);
}
.mp-logo-img { height:38px; width:38px; object-fit:contain; border-radius:var(--mp-r-md); flex-shrink:0; }
.mp-logo-text { line-height:1.2; font-size:1.125rem; font-weight:800; color:var(--mp-primary); }

.mp-search-container { flex:1; max-width:520px; }
.mp-search-box {
    display:flex; align-items:center;
    background:var(--mp-bg-secondary);
    border:1.5px solid var(--mp-border);
    border-radius:var(--mp-r-full);
    overflow:hidden; transition:all var(--mp-t-fast);
}
.mp-search-box:focus-within {
    border-color:var(--mp-primary);
    background:var(--mp-bg-primary);
    box-shadow:0 0 0 3px rgba(var(--mp-primary-rgb),.12);
}
.mp-search-input {
    flex:1; border:none; background:transparent;
    padding:.65rem 1.25rem; font-size:.875rem; outline:none;
    color:var(--mp-text-primary); font-family:var(--mp-font);
}
.mp-search-input::placeholder { color:var(--mp-text-tertiary); }
.mp-search-btn {
    border:none; background:var(--mp-primary); color:#fff;
    padding:.65rem 1.25rem; cursor:pointer; font-size:.875rem;
    transition:background var(--mp-t-fast);
}
.mp-search-btn:hover { background:var(--mp-primary-dark); }

.mp-header-actions { display:flex; align-items:center; gap:.5rem; margin-left:auto; }
.mp-action-btn {
    position:relative; background:none; border:none;
    width:42px; height:42px; border-radius:var(--mp-r-lg);
    display:flex; align-items:center; justify-content:center;
    font-size:1.125rem; color:var(--mp-text-secondary);
    cursor:pointer; transition:all var(--mp-t-fast);
}
.mp-action-btn:hover { color:var(--mp-primary); background:var(--mp-bg-tertiary); }
.mp-badge {
    position:absolute; top:2px; right:2px;
    background:var(--mp-danger); color:#fff;
    font-size:.6rem; font-weight:700; min-width:18px; height:18px;
    border-radius:var(--mp-r-full); display:flex;
    align-items:center; justify-content:center; padding:0 4px;
    border:2px solid #fff;
}

/* ─── SECONDARY NAV ──────────────────────────────────────────────────────── */
.mp-secondary-nav {
    background:var(--mp-bg-secondary);
    border-top:1px solid var(--mp-border);
}
.mp-nav-content {
    max-width:1400px; margin:0 auto; padding:0 1.5rem;
    display:flex; gap:0; overflow-x:auto;
    scrollbar-width:none;
}
.mp-nav-content::-webkit-scrollbar { display:none; }
.mp-nav-link {
    display:flex; align-items:center; gap:.5rem;
    padding:.75rem 1.25rem; color:var(--mp-text-secondary);
    font-size:.875rem; font-weight:500; white-space:nowrap;
    border-bottom:2px solid transparent;
    transition:all var(--mp-t-fast);
}
.mp-nav-link:hover, .mp-nav-link.mp-nav-active {
    color:var(--mp-primary); border-bottom-color:var(--mp-primary);
    background:var(--mp-bg-primary);
}
.mp-nav-link i { font-size:.875rem; }

/* ─── MOBILE MENU DRAWER ─────────────────────────────────────────────────── */
.mp-hamburger {
    display:none; background:none; border:none; cursor:pointer; width:38px; height:38px;
    flex-direction:column; align-items:center; justify-content:center; gap:5px;
    border-radius:var(--mp-r-md); transition:background var(--mp-t-fast);
}
@media(max-width:767px){.mp-hamburger{display:flex;}}
.mp-hamburger:hover { background:var(--mp-bg-tertiary); }
.mp-hamburger span { width:22px; height:2px; background:var(--mp-text-primary); border-radius:1px; transition:all var(--mp-t-fast); }

.mp-mobile-menu {
    position:fixed; left:-100%; top:0; width:min(320px, 85vw);
    height:100vh; background:var(--mp-bg-primary); z-index:1000;
    box-shadow:var(--mp-shadow-2xl); transition:left var(--mp-t-normal);
    overflow-y:auto; display:flex; flex-direction:column;
}
.mp-mobile-menu.mp-mobile-menu-open { left:0; }

.mp-mobile-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,0);
    z-index:999; pointer-events:none;
    transition:background var(--mp-t-normal);
}
.mp-mobile-overlay.mp-overlay-show { background:rgba(0,0,0,0.4); pointer-events:all; }

.mp-mobile-menu-header {
    display:flex; justify-content:space-between; align-items:center;
    padding:1.25rem 1rem; border-bottom:1px solid var(--mp-border);
}
.mp-mobile-menu-header h3 { font-weight:700; font-size:1.125rem; }
.mp-close-btn {
    background:none; border:none; font-size:1.375rem; cursor:pointer;
    color:var(--mp-text-secondary); width:36px; height:36px;
    display:flex; align-items:center; justify-content:center;
    border-radius:var(--mp-r-md); transition:all var(--mp-t-fast);
}
.mp-close-btn:hover { background:var(--mp-bg-tertiary); color:var(--mp-text-primary); }

.mp-mobile-nav { display:flex; flex-direction:column; flex:1; }
.mp-mobile-nav-link {
    display:flex; align-items:center; gap:.875rem;
    padding:1rem 1.25rem; color:var(--mp-text-secondary);
    border-bottom:1px solid var(--mp-border-light);
    font-size:.9375rem; font-weight:500;
    transition:all var(--mp-t-fast);
}
.mp-mobile-nav-link:hover { color:var(--mp-primary); background:var(--mp-bg-tertiary); padding-left:1.75rem; }
.mp-mobile-nav-link i { font-size:1rem; width:20px; text-align:center; }
.mp-contact-link { color:var(--mp-success) !important; }

/* ─── SEARCH OVERLAY ─────────────────────────────────────────────────────── */
.mp-search-modal {
    position:fixed; inset:0; z-index:1100;
    display:none; flex-direction:column;
}
.mp-search-modal.mp-search-open { display:flex; }
.mp-search-backdrop {
    position:absolute; inset:0; background:rgba(0,0,0,0.6);
    backdrop-filter:blur(4px);
}
.mp-search-panel {
    position:relative; background:var(--mp-bg-primary);
    padding:1.5rem; border-bottom:1px solid var(--mp-border);
    animation: mp-slideDown var(--mp-t-normal);
}
@keyframes mp-slideDown { from{transform:translateY(-100%);opacity:0;} to{transform:translateY(0);opacity:1;} }
.mp-search-panel-inner {
    max-width:700px; margin:0 auto;
    display:flex; align-items:center; gap:1rem;
}
.mp-search-input-lg {
    flex:1; padding:.875rem 1.25rem; border:1.5px solid var(--mp-border);
    border-radius:var(--mp-r-lg); font-size:1rem; outline:none;
    font-family:var(--mp-font); transition:border-color var(--mp-t-fast);
}
.mp-search-input-lg:focus { border-color:var(--mp-primary); }
.mp-search-results-panel {
    position:relative; max-width:700px; margin:.5rem auto 0;
    background:var(--mp-bg-primary); border-radius:0 0 var(--mp-r-xl) var(--mp-r-xl);
    border:1px solid var(--mp-border); border-top:none; max-height:400px;
    overflow-y:auto; display:none;
}
.mp-search-results-panel.mp-has-results { display:block; }
.mp-search-result-item {
    display:flex; align-items:center; gap:1rem; padding:.875rem 1.25rem;
    border-bottom:1px solid var(--mp-border-light); transition:background var(--mp-t-fast);
}
.mp-search-result-item:hover { background:var(--mp-bg-tertiary); }
.mp-search-result-img {
    width:50px; height:50px; border-radius:var(--mp-r-md);
    object-fit:contain; background:var(--mp-bg-tertiary); flex-shrink:0;
}
.mp-search-result-name { font-weight:600; font-size:.875rem; }
.mp-search-result-price { font-size:.8125rem; color:var(--mp-primary); font-weight:600; }
.mp-search-hint { padding:1.5rem; text-align:center; color:var(--mp-text-tertiary); font-size:.875rem; }
.mp-search-view-all {
    display:block; padding:.875rem 1.25rem; text-align:center;
    font-size:.875rem; font-weight:700; color:var(--mp-primary);
    border-top:1px solid var(--mp-border-light);
    transition:background var(--mp-t-fast);
}
.mp-search-view-all:hover { background:var(--mp-bg-tertiary); }

/* ─── HERO PRODUCT SLIDER ────────────────────────────────────────────────── */
.mp-hero { position:relative; overflow:hidden; background:#f8faff; }
.mp-hero-swiper { width:100%; }
.mp-hero-swiper .swiper-slide { min-height:520px; display:flex; align-items:stretch; background:linear-gradient(135deg,#f0f4ff 0%,#fafbff 55%,#fff7f0 100%); }
.mp-hero-swiper .swiper-slide:nth-child(even) { background:linear-gradient(135deg,#fff7f0 0%,#fafbff 55%,#f0f4ff 100%); }

.mp-hero-slide {
    max-width:1400px; margin:0 auto; padding:3.5rem 1.5rem;
    display:grid; grid-template-columns:1fr 1fr; gap:3rem; align-items:center;
    width:100%; position:relative;
}
.mp-hero-slide::before {
    content:""; position:absolute; top:-120px; right:-120px;
    width:500px; height:500px;
    background:radial-gradient(circle, rgba(var(--mp-primary-rgb),.08) 0%, transparent 65%);
    border-radius:50%; pointer-events:none;
}

.mp-hero-slide-content { display:flex; flex-direction:column; gap:1.25rem; position:relative; z-index:2; }
.mp-hero-slide-badges { display:flex; gap:.625rem; flex-wrap:wrap; align-items:center; }
.mp-hero-badge-sale {
    background:var(--mp-danger); color:#fff;
    padding:.35rem .875rem; border-radius:var(--mp-r-full);
    font-size:.8125rem; font-weight:700; display:inline-flex; align-items:center; gap:.25rem;
}
.mp-hero-badge-label {
    background:rgba(249,115,22,.12); color:var(--mp-accent);
    padding:.35rem .875rem; border-radius:var(--mp-r-full);
    font-size:.8125rem; font-weight:700;
}
.mp-hero-slide-category {
    font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.6px;
    color:var(--mp-primary); background:rgba(var(--mp-primary-rgb),.08);
    padding:.3rem .875rem; border-radius:var(--mp-r-full); width:fit-content;
}
.mp-hero-slide-title {
    font-size:clamp(1.75rem,3.5vw,2.875rem); font-weight:900;
    line-height:1.2; color:var(--mp-text-primary);
}
.mp-hero-slide-desc {
    font-size:.9375rem; color:var(--mp-text-secondary);
    line-height:1.75; max-width:480px;
}
.mp-hero-slide-price { display:flex; align-items:baseline; gap:.875rem; flex-wrap:wrap; }
.mp-hero-price-current { font-size:2.25rem; font-weight:900; color:var(--mp-primary); }
.mp-hero-price-original { font-size:1rem; color:var(--mp-text-tertiary); text-decoration:line-through; }
.mp-hero-slide-actions { display:flex; gap:1rem; flex-wrap:wrap; padding-top:.5rem; }

.mp-hero-slide-visual {
    display:flex; align-items:center; justify-content:center;
    position:relative; z-index:2;
}
.mp-hero-slide-img-wrap { position:relative; max-width:400px; width:100%; }
.mp-hero-slide-img-wrap img {
    width:100%; height:400px; object-fit:contain;
    filter:drop-shadow(0 28px 50px rgba(0,0,0,0.16));
    animation:mp-hero-float 4s ease-in-out infinite;
    position:relative; z-index:2;
}
@keyframes mp-hero-float { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-14px);} }
.mp-hero-slide-glow {
    position:absolute; bottom:-20px; left:50%; transform:translateX(-50%);
    width:280px; height:140px;
    background:radial-gradient(ellipse, rgba(var(--mp-primary-rgb),.18) 0%, transparent 70%);
    pointer-events:none; z-index:1;
}

.mp-hero-prev,.mp-hero-next {
    color:var(--mp-primary); background:rgba(255,255,255,.92);
    width:46px; height:46px; border-radius:50%;
    box-shadow:var(--mp-shadow-md); transition:all var(--mp-t-fast);
}
.mp-hero-prev::after,.mp-hero-next::after { font-size:.875rem; font-weight:900; }
.mp-hero-prev:hover,.mp-hero-next:hover { background:#fff; box-shadow:var(--mp-shadow-lg); }
.mp-hero-dots { bottom:1.25rem !important; }
.mp-hero-dots .swiper-pagination-bullet { width:8px; height:8px; background:var(--mp-border); opacity:1; transition:all var(--mp-t-fast); }
.mp-hero-dots .swiper-pagination-bullet-active { background:var(--mp-primary); width:24px; border-radius:4px; }

@media(max-width:1024px){
    .mp-hero-slide { grid-template-columns:1fr 1fr; gap:2rem; }
    .mp-hero-slide-img-wrap img { height:320px; }
}
@media(max-width:767px){
    .mp-hero-swiper .swiper-slide { min-height:auto; }
    .mp-hero-slide { grid-template-columns:1fr; padding:2.5rem 1rem 4rem; gap:2rem; }
    .mp-hero-slide-visual { order:-1; }
    .mp-hero-slide-img-wrap { max-width:260px; margin:0 auto; }
    .mp-hero-slide-img-wrap img { height:240px; }
    .mp-hero-price-current { font-size:1.75rem; }
    .mp-hero-slide-actions { flex-direction:column; }
    .mp-hero-slide-actions .mp-btn { width:100%; justify-content:center; }
    .mp-hero-prev,.mp-hero-next { display:none; }
}

/* ─── BUTTONS ────────────────────────────────────────────────────────────── */
.mp-btn {
    display:inline-flex; align-items:center; justify-content:center;
    gap:.5rem; padding:.75rem 1.5rem; border-radius:var(--mp-r-lg);
    font-weight:600; font-size:.875rem; font-family:var(--mp-font);
    cursor:pointer; border:none; text-decoration:none; white-space:nowrap;
    transition:all var(--mp-t-fast); line-height:1;
}
.mp-btn-primary {
    background:var(--mp-primary); color:#fff;
    box-shadow:0 4px 14px rgba(var(--mp-primary-rgb),.35);
}
.mp-btn-primary:hover { background:var(--mp-primary-dark); transform:translateY(-1px); box-shadow:0 6px 20px rgba(var(--mp-primary-rgb),.4); }
.mp-btn-secondary { background:var(--mp-bg-tertiary); color:var(--mp-primary); border:1.5px solid var(--mp-primary); }
.mp-btn-secondary:hover { background:var(--mp-primary); color:#fff; }
.mp-btn-outline { background:transparent; color:var(--mp-primary); border:1.5px solid var(--mp-primary); }
.mp-btn-outline:hover { background:var(--mp-primary); color:#fff; }
.mp-btn-ghost { background:transparent; color:var(--mp-text-secondary); }
.mp-btn-ghost:hover { background:var(--mp-bg-tertiary); color:var(--mp-text-primary); }
.mp-btn-danger { background:var(--mp-danger); color:#fff; }
.mp-btn-sm { padding:.5rem 1rem; font-size:.8125rem; border-radius:var(--mp-r-md); }
.mp-btn-lg { padding:1rem 2rem; font-size:1rem; border-radius:var(--mp-r-xl); }
.mp-btn-xl { padding:1.125rem 2.5rem; font-size:1.0625rem; border-radius:var(--mp-r-xl); }
.mp-btn-full { width:100%; }
.mp-btn-icon { width:42px; height:42px; padding:0; border-radius:var(--mp-r-lg); }

/* ─── SECTION UTILITIES ──────────────────────────────────────────────────── */
.mp-section { padding:5rem 0; }
.mp-section-alt { padding:5rem 0; background:var(--mp-bg-secondary); }

.mp-section-header {
    display:flex; justify-content:space-between; align-items:flex-end;
    margin-bottom:3rem; gap:1.5rem; flex-wrap:wrap;
}
.mp-section-eyebrow {
    display:inline-flex; align-items:center; gap:.375rem;
    background:rgba(var(--mp-primary-rgb),.08); color:var(--mp-primary);
    padding:.3rem .875rem; border-radius:var(--mp-r-full);
    font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
    margin-bottom:.75rem;
}
.mp-section-title { font-size:clamp(1.5rem,3.5vw,2.25rem); font-weight:800; margin-bottom:.375rem; line-height:1.25; }
.mp-section-subtitle { font-size:.9375rem; color:var(--mp-text-tertiary); }
.mp-view-all {
    display:inline-flex; align-items:center; gap:.375rem;
    color:var(--mp-primary); font-weight:600; font-size:.875rem;
    transition:gap var(--mp-t-fast);
}
.mp-view-all:hover { gap:.625rem; }
.mp-section-footer { text-align:center; margin-top:3rem; }
.mp-divider { height:1px; background:var(--mp-border); margin:0; }

/* ─── PRODUCT CARDS ──────────────────────────────────────────────────────── */
.mp-products-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
    gap:1.5rem;
}

.mp-product-card {
    background:var(--mp-bg-primary); border-radius:var(--mp-r-xl);
    border:1.5px solid var(--mp-border); overflow:hidden;
    display:flex; flex-direction:column; position:relative;
    transition:transform var(--mp-t-normal), box-shadow var(--mp-t-normal), border-color var(--mp-t-normal);
}
.mp-product-card:hover {
    transform:translateY(-6px); box-shadow:var(--mp-shadow-xl);
    border-color:rgba(var(--mp-primary-rgb),.3);
}

.mp-product-badges { position:absolute; top:.75rem; left:.75rem; z-index:10; display:flex; gap:.375rem; flex-wrap:wrap; }
.mp-badge-pill {
    padding:.3rem .625rem; border-radius:var(--mp-r-full);
    font-size:.6875rem; font-weight:700; line-height:1;
}
.mp-badge-sale { background:var(--mp-danger); color:#fff; }
.mp-badge-new { background:var(--mp-success); color:#fff; }
.mp-badge-hot { background:var(--mp-accent); color:#fff; }

.mp-product-wishlist {
    position:absolute; top:.75rem; right:.75rem; z-index:10;
    width:34px; height:34px; border-radius:50%;
    background:rgba(255,255,255,0.9); border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    font-size:.875rem; color:var(--mp-text-tertiary);
    transition:all var(--mp-t-fast); box-shadow:var(--mp-shadow-sm);
}
.mp-product-wishlist:hover, .mp-product-wishlist.active { color:var(--mp-danger); background:#fff; }

.mp-product-image-wrap {
    display:block; aspect-ratio:1; overflow:hidden;
    background:var(--mp-bg-tertiary); position:relative;
}
.mp-product-image {
    width:100%; height:100%; object-fit:contain;
    transition:transform var(--mp-t-slow); padding:.5rem;
}
.mp-product-card:hover .mp-product-image { transform:scale(1.06); }
.mp-product-overlay {
    position:absolute; inset:0; background:rgba(0,0,0,0);
    display:flex; align-items:center; justify-content:center;
    transition:background var(--mp-t-fast);
    pointer-events:none;
}
.mp-product-card:hover .mp-product-overlay { background:rgba(0,0,0,0.2); }
.mp-quick-view-btn {
    transform:scale(0.6) translateY(10px); opacity:0;
    width:44px; height:44px; border-radius:50%;
    background:var(--mp-primary); color:#fff; border:none; cursor:pointer;
    display:flex; align-items:center; justify-content:center; font-size:1.125rem;
    transition:all var(--mp-t-fast); pointer-events:all;
}
.mp-product-card:hover .mp-quick-view-btn { transform:scale(1) translateY(0); opacity:1; }

.mp-product-body { padding:1rem; flex:1; display:flex; flex-direction:column; gap:.5rem; }
.mp-product-category { font-size:.75rem; color:var(--mp-text-tertiary); font-weight:600; text-transform:uppercase; letter-spacing:.3px; }
.mp-product-name { font-size:.9375rem; font-weight:600; line-height:1.4; }
.mp-product-name a { color:var(--mp-text-primary); transition:color var(--mp-t-fast); }
.mp-product-name a:hover { color:var(--mp-primary); }

.mp-product-rating { display:flex; align-items:center; gap:.375rem; }
.mp-stars { display:flex; gap:1px; }
.mp-stars i { font-size:.6875rem; color:var(--mp-warning); }
.mp-rating-count { font-size:.75rem; color:var(--mp-text-tertiary); }

.mp-product-price { display:flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; }
.mp-price-current { font-size:1.125rem; font-weight:800; color:var(--mp-text-primary); }
.mp-price-original { font-size:.8125rem; color:var(--mp-text-tertiary); text-decoration:line-through; }

.mp-product-actions { display:flex; gap:.5rem; margin-top:auto; padding-top:.5rem; }
.mp-btn-add-cart {
    flex:1; background:var(--mp-bg-secondary); color:var(--mp-primary);
    border:1.5px solid var(--mp-primary); border-radius:var(--mp-r-lg);
    padding:.55rem .875rem; font-size:.8125rem; font-weight:600;
    cursor:pointer; transition:all var(--mp-t-fast);
    display:flex; align-items:center; justify-content:center; gap:.375rem;
    font-family:var(--mp-font);
}
.mp-btn-add-cart:hover { background:var(--mp-primary); color:#fff; }
.mp-btn-wishlist {
    width:38px; height:38px; border-radius:var(--mp-r-lg);
    border:1.5px solid var(--mp-border); background:var(--mp-bg-secondary);
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    font-size:.875rem; color:var(--mp-text-tertiary); transition:all var(--mp-t-fast);
}
.mp-btn-wishlist:hover, .mp-btn-wishlist.active { border-color:var(--mp-danger); color:var(--mp-danger); background:#fff1f2; }

/* ─── PROMOTIONAL BANNERS ────────────────────────────────────────────────── */
.mp-offers-banner { padding:3rem 0; }
.mp-banner-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.mp-banner-card {
    padding:2rem; border-radius:var(--mp-r-2xl); overflow:hidden;
    position:relative; color:#fff; display:flex; align-items:center;
    justify-content:space-between; gap:1.5rem;
    transition:transform var(--mp-t-fast), box-shadow var(--mp-t-fast);
}
.mp-banner-card:hover { transform:translateY(-4px); box-shadow:var(--mp-shadow-xl); }
.mp-banner-primary  { background:linear-gradient(135deg,#2563eb,#60a5fa); }
.mp-banner-secondary{ background:linear-gradient(135deg,#f97316,#fb923c); }
.mp-banner-tertiary { background:linear-gradient(135deg,#10b981,#34d399); }
.mp-banner-content { flex:1; }
.mp-banner-tag { font-size:.6875rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; opacity:.85; margin-bottom:.5rem; display:block; }
.mp-banner-title { font-size:1.375rem; font-weight:800; margin-bottom:.375rem; }
.mp-banner-desc { font-size:.875rem; opacity:.9; margin-bottom:1rem; }
.mp-banner-cta { display:inline-flex; align-items:center; gap:.375rem; color:#fff; font-weight:700; font-size:.875rem; transition:gap var(--mp-t-fast); }
.mp-banner-cta:hover { gap:.625rem; }
.mp-banner-icon { font-size:5rem; opacity:.12; flex-shrink:0; line-height:1; }

/* ─── SERVICES ───────────────────────────────────────────────────────────── */
.mp-services { padding:5rem 0; background:var(--mp-bg-secondary); }
.mp-services-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.5rem; }
.mp-service-card {
    background:var(--mp-bg-primary); padding:2rem; border-radius:var(--mp-r-xl);
    border:1.5px solid var(--mp-border); text-align:center;
    transition:all var(--mp-t-normal); display:flex; flex-direction:column; align-items:center;
}
.mp-service-card:hover { transform:translateY(-6px); box-shadow:var(--mp-shadow-xl); border-color:rgba(var(--mp-primary-rgb),.3); }
.mp-service-icon-wrap {
    width:72px; height:72px; border-radius:var(--mp-r-xl);
    background:rgba(var(--mp-primary-rgb),.08);
    display:flex; align-items:center; justify-content:center;
    margin-bottom:1.25rem; transition:all var(--mp-t-fast); flex-shrink:0;
}
.mp-service-card:hover .mp-service-icon-wrap { background:var(--mp-primary); color:#fff; }
.mp-service-icon-fa { font-size:1.75rem; color:var(--mp-primary); transition:color var(--mp-t-fast); }
.mp-service-card:hover .mp-service-icon-fa { color:#fff; }
.mp-service-icon-img { width:48px; height:48px; object-fit:contain; }
.mp-service-name { font-size:1.0625rem; font-weight:700; margin-bottom:.625rem; }
.mp-service-desc { font-size:.875rem; color:var(--mp-text-tertiary); margin-bottom:1rem; line-height:1.65; flex:1; }
.mp-service-price { font-weight:700; color:var(--mp-primary); font-size:.9375rem; margin-bottom:1.25rem; }
.mp-service-link {
    display:inline-flex; align-items:center; gap:.375rem;
    color:var(--mp-primary); font-weight:600; font-size:.875rem;
    transition:gap var(--mp-t-fast);
}
.mp-service-link:hover { gap:.625rem; }

/* ─── TRENDING CAROUSEL ─────────────────────────────────────────────────── */
.mp-trending { padding:5rem 0; }
.mp-trending-carousel { position:relative; padding-bottom:3rem; }
.mp-trending-swiper { padding:.5rem .25rem; overflow:visible; }

.mp-trending-item {
    background:var(--mp-bg-primary); border-radius:var(--mp-r-xl);
    border:1.5px solid var(--mp-border); overflow:hidden;
    transition:all var(--mp-t-normal); display:flex; flex-direction:column;
}
.mp-trending-item:hover { box-shadow:var(--mp-shadow-lg); border-color:rgba(var(--mp-primary-rgb),.25); transform:translateY(-4px); }
.mp-trending-image { display:block; aspect-ratio:1; overflow:hidden; background:var(--mp-bg-tertiary); }
.mp-trending-image img { width:100%; height:100%; object-fit:contain; padding:.5rem; transition:transform var(--mp-t-slow); }
.mp-trending-item:hover .mp-trending-image img { transform:scale(1.05); }
.mp-trending-info { padding:.875rem; flex:1; display:flex; flex-direction:column; gap:.5rem; }
.mp-trending-name { font-size:.875rem; font-weight:600; line-height:1.35; }
.mp-trending-price { display:flex; align-items:baseline; gap:.375rem; }
.mp-trending-price .mp-price { font-weight:700; color:var(--mp-text-primary); }
.mp-trending-price .mp-price-strike { font-size:.75rem; text-decoration:line-through; color:var(--mp-text-tertiary); }

.swiper-button-prev, .swiper-button-next {
    width:40px !important; height:40px !important;
    background:var(--mp-bg-primary); border:1.5px solid var(--mp-border);
    border-radius:50%; color:var(--mp-text-primary) !important;
    box-shadow:var(--mp-shadow-md); top:auto !important; bottom:0;
}
.swiper-button-prev::after, .swiper-button-next::after { font-size:.875rem !important; }
.swiper-button-prev:hover, .swiper-button-next:hover { background:var(--mp-primary); border-color:var(--mp-primary); color:#fff !important; }
.swiper-button-prev { left:calc(50% - 52px) !important; }
.swiper-button-next { right:auto; left:calc(50% + 12px) !important; }
.swiper-pagination { bottom:-2.5rem !important; }
.swiper-pagination-bullet { background:var(--mp-border) !important; opacity:1 !important; width:8px; height:8px; }
.swiper-pagination-bullet-active { background:var(--mp-primary) !important; width:24px; border-radius:4px; }

/* ─── CATEGORIES ─────────────────────────────────────────────────────────── */
.mp-categories { padding:5rem 0; background:var(--mp-bg-secondary); }
.mp-categories-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:1.25rem; }
.mp-category-card {
    background:var(--mp-bg-primary); padding:1.5rem 1rem; border-radius:var(--mp-r-xl);
    border:1.5px solid var(--mp-border); text-align:center; text-decoration:none;
    color:inherit; transition:all var(--mp-t-normal); display:flex; flex-direction:column;
    align-items:center; gap:.75rem;
}
.mp-category-card:hover { border-color:var(--mp-primary); background:rgba(var(--mp-primary-rgb),.04); transform:translateY(-4px); }
.mp-category-icon {
    width:56px; height:56px; background:rgba(var(--mp-primary-rgb),.08);
    border-radius:var(--mp-r-xl); display:flex; align-items:center;
    justify-content:center; font-size:1.5rem; color:var(--mp-primary);
    transition:all var(--mp-t-fast);
}
.mp-category-card:hover .mp-category-icon { background:var(--mp-primary); color:#fff; }
.mp-category-name { font-weight:700; font-size:.9375rem; }
.mp-category-count { font-size:.75rem; color:var(--mp-text-tertiary); }

/* ─── TESTIMONIALS ───────────────────────────────────────────────────────── */
.mp-testimonials { padding:5rem 0; }
.mp-testimonials-carousel { padding-bottom:3.5rem; }
.mp-testimonial-card {
    background:var(--mp-bg-primary); padding:2rem; border-radius:var(--mp-r-xl);
    border:1.5px solid var(--mp-border); height:100%;
    transition:all var(--mp-t-normal);
}
.mp-testimonial-card:hover { box-shadow:var(--mp-shadow-lg); border-color:rgba(var(--mp-primary-rgb),.25); }
.mp-testimonial-stars { display:flex; gap:.25rem; margin-bottom:1rem; }
.mp-testimonial-stars i { color:var(--mp-warning); font-size:.9375rem; }
.mp-testimonial-text { font-size:.9375rem; line-height:1.7; color:var(--mp-text-secondary); margin-bottom:1.5rem; font-style:italic; }
.mp-testimonial-author { display:flex; align-items:center; gap:.875rem; }
.mp-testimonial-avatar {
    width:46px; height:46px; border-radius:50%; background:rgba(var(--mp-primary-rgb),.1);
    display:flex; align-items:center; justify-content:center;
    color:var(--mp-primary); font-size:1.25rem; flex-shrink:0;
}
.mp-testimonial-name { font-weight:700; font-size:.9375rem; }
.mp-testimonial-role { font-size:.75rem; color:var(--mp-text-tertiary); }

/* ─── BLOG SECTION ───────────────────────────────────────────────────────── */
.mp-blog { padding:5rem 0; background:var(--mp-bg-secondary); }
.mp-blog-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.5rem; }
.mp-blog-card {
    background:var(--mp-bg-primary); border-radius:var(--mp-r-xl);
    border:1.5px solid var(--mp-border); overflow:hidden;
    display:flex; flex-direction:column; transition:all var(--mp-t-normal);
}
.mp-blog-card:hover { transform:translateY(-6px); box-shadow:var(--mp-shadow-xl); }
.mp-blog-image { display:block; aspect-ratio:16/9; overflow:hidden; background:var(--mp-bg-tertiary); }
.mp-blog-image img { width:100%; height:100%; object-fit:cover; transition:transform var(--mp-t-slow); }
.mp-blog-card:hover .mp-blog-image img { transform:scale(1.05); }
.mp-blog-body { padding:1.5rem; flex:1; display:flex; flex-direction:column; gap:.75rem; }
.mp-blog-meta { display:flex; align-items:center; gap:.875rem; }
.mp-blog-date { font-size:.75rem; color:var(--mp-text-tertiary); }
.mp-blog-category {
    font-size:.6875rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.3px; color:var(--mp-primary);
    background:rgba(var(--mp-primary-rgb),.08); padding:.2rem .6rem; border-radius:var(--mp-r-full);
}
.mp-blog-title { font-size:1.0625rem; font-weight:700; line-height:1.4; }
.mp-blog-title a { color:var(--mp-text-primary); transition:color var(--mp-t-fast); }
.mp-blog-title a:hover { color:var(--mp-primary); }
.mp-blog-excerpt { font-size:.875rem; color:var(--mp-text-tertiary); line-height:1.6; flex:1; }
.mp-blog-link { display:inline-flex; align-items:center; gap:.375rem; color:var(--mp-primary); font-weight:600; font-size:.875rem; transition:gap var(--mp-t-fast); margin-top:auto; }
.mp-blog-link:hover { gap:.625rem; }

/* ─── CONTACT SECTION ────────────────────────────────────────────────────── */
.mp-contact { padding:5rem 0; }
.mp-contact-grid {
    display:grid; grid-template-columns:1fr 1.25fr; gap:3rem;
    background:var(--mp-bg-primary); padding:2.5rem;
    border-radius:var(--mp-r-2xl); border:1.5px solid var(--mp-border);
}
.mp-contact-logo { height:48px; width:auto; object-fit:contain; margin-bottom:1.25rem; }
.mp-contact-business { font-size:1.5rem; font-weight:800; margin-bottom:.625rem; }
.mp-contact-desc { font-size:.9375rem; color:var(--mp-text-tertiary); line-height:1.65; margin-bottom:1.75rem; }
.mp-contact-details { display:flex; flex-direction:column; gap:.875rem; margin-bottom:1.75rem; }
.mp-contact-item {
    display:flex; align-items:center; gap:1rem; padding:.875rem 1rem;
    background:var(--mp-bg-tertiary); border-radius:var(--mp-r-lg);
    text-decoration:none; color:inherit; transition:all var(--mp-t-fast);
}
.mp-contact-item:hover { background:var(--mp-primary); color:#fff; }
.mp-contact-item i { font-size:1.125rem; color:var(--mp-primary); width:20px; flex-shrink:0; transition:color var(--mp-t-fast); }
.mp-contact-item:hover i { color:#fff; }
.mp-contact-label { font-size:.6875rem; text-transform:uppercase; font-weight:700; letter-spacing:.5px; opacity:.8; }
.mp-contact-value { font-size:.9375rem; font-weight:600; }
.mp-whatsapp-btn {
    display:inline-flex; align-items:center; gap:.625rem;
    background:#25d366; color:#fff; padding:.75rem 1.5rem;
    border-radius:var(--mp-r-lg); font-weight:700; transition:all var(--mp-t-fast);
}
.mp-whatsapp-btn:hover { background:#1eaa51; transform:translateY(-2px); }

/* ─── CONTACT FORM ───────────────────────────────────────────────────────── */
.mp-form-heading { font-size:1.25rem; font-weight:800; margin-bottom:1.5rem; }
.mp-form-group { margin-bottom:1.125rem; }
.mp-form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.mp-label { display:block; font-size:.8125rem; font-weight:600; margin-bottom:.4375rem; color:var(--mp-text-secondary); }
.mp-input, .mp-textarea {
    width:100%; padding:.75rem 1rem; border:1.5px solid var(--mp-border);
    border-radius:var(--mp-r-lg); font-size:.9375rem; outline:none;
    font-family:var(--mp-font); background:var(--mp-bg-primary);
    color:var(--mp-text-primary); transition:all var(--mp-t-fast);
}
.mp-input:focus, .mp-textarea:focus { border-color:var(--mp-primary); box-shadow:0 0 0 3px rgba(var(--mp-primary-rgb),.1); }
.mp-textarea { resize:vertical; min-height:110px; }
.mp-msg-success, .mp-msg-error {
    padding:.875rem 1rem; border-radius:var(--mp-r-lg);
    font-size:.875rem; font-weight:500; display:flex; align-items:center; gap:.625rem;
}
.mp-msg-success { background:#f0fdf4; color:#166534; border:1px solid #bbf7d0; }
.mp-msg-error   { background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }

/* ─── QUANTITY CONTROL ───────────────────────────────────────────────────── */
.mp-qty-control { display:flex; align-items:center; border:1.5px solid var(--mp-border); border-radius:var(--mp-r-lg); width:fit-content; overflow:hidden; }
.mp-qty-btn {
    width:42px; height:42px; border:none; background:var(--mp-bg-secondary);
    cursor:pointer; font-size:1.25rem; color:var(--mp-text-secondary);
    display:flex; align-items:center; justify-content:center;
    transition:all var(--mp-t-fast);
}
.mp-qty-btn:hover { background:var(--mp-primary); color:#fff; }
.mp-qty-input { width:56px; text-align:center; border:none; background:transparent; font-weight:700; font-size:1rem; font-family:var(--mp-font); }

/* ─── FOOTER ─────────────────────────────────────────────────────────────── */
.mp-footer { background:var(--mp-text-primary); color:#fff; padding:4rem 0 0; }
.mp-footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:3rem; padding-bottom:3rem; border-bottom:1px solid rgba(255,255,255,0.1); }
.mp-footer-logo { height:40px; width:auto; object-fit:contain; margin-bottom:1rem; opacity:.9; }
.mp-footer-brand-name { font-size:1.25rem; font-weight:800; margin-bottom:1rem; }
.mp-footer-desc { font-size:.875rem; color:rgba(255,255,255,0.6); line-height:1.75; margin-bottom:.875rem; }
.mp-footer-contacts { display:flex; flex-direction:column; gap:.5rem; margin-bottom:1rem; }
.mp-footer-contact-item {
    display:flex; align-items:center; gap:.625rem;
    font-size:.8125rem; color:rgba(255,255,255,.7);
    transition:color var(--mp-t-fast); line-height:1.4;
}
.mp-footer-contact-item:hover { color:#fff; }
.mp-footer-contact-item i { width:.875rem; flex-shrink:0; font-size:.75rem; }
.mp-footer-address { cursor:default; }
.mp-footer-address:hover { color:rgba(255,255,255,.7); }
.mp-social-links { display:flex; gap:.75rem; flex-wrap:wrap; }
.mp-social-link {
    width:38px; height:38px; border-radius:50%;
    background:rgba(255,255,255,0.1); color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:.875rem; transition:all var(--mp-t-fast);
}
.mp-social-link:hover { background:var(--mp-primary); transform:translateY(-3px); }
.mp-footer-col-title { font-size:.9375rem; font-weight:700; margin-bottom:1.25rem; }
.mp-footer-links { list-style:none; display:flex; flex-direction:column; gap:.75rem; }
.mp-footer-links a {
    font-size:.875rem; color:rgba(255,255,255,0.6);
    transition:all var(--mp-t-fast);
}
.mp-footer-links a:hover { color:#fff; padding-left:.375rem; }
.mp-footer-bottom {
    padding:1.5rem 0; text-align:center;
    border-top:1px solid rgba(255,255,255,0.08);
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap:wrap; gap:1rem;
}
.mp-footer-bottom p { font-size:.8125rem; color:rgba(255,255,255,0.5); margin:0; }
.mp-footer-bottom a { color:rgba(var(--mp-primary-rgb),0.8); }
.mp-footer-bottom a:hover { color:#fff; }

/* ─── CART DRAWER ────────────────────────────────────────────────────────── */
.mp-cart-overlay {
    position:fixed; inset:0; background:transparent; z-index:800;
    pointer-events:none; transition:background var(--mp-t-normal);
}
.mp-cart-overlay.mp-cart-overlay-show { background:rgba(0,0,0,0.45); pointer-events:all; }
.mp-cart-drawer {
    position:fixed; right:-100%; top:0;
    width:min(420px, 95vw); height:100vh;
    background:var(--mp-bg-primary); z-index:810;
    display:flex; flex-direction:column; box-shadow:var(--mp-shadow-2xl);
    transition:right var(--mp-t-normal);
}
.mp-cart-drawer.mp-cart-open { right:0; }
.mp-cart-header {
    padding:1.25rem 1.5rem; border-bottom:1px solid var(--mp-border);
    display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
}
.mp-cart-title { font-size:1.125rem; font-weight:800; }
.mp-cart-close { background:none; border:none; font-size:1.375rem; cursor:pointer; color:var(--mp-text-tertiary); transition:color var(--mp-t-fast); }
.mp-cart-close:hover { color:var(--mp-text-primary); }
.mp-cart-items { flex:1; overflow-y:auto; padding:1.25rem; display:flex; flex-direction:column; gap:.875rem; }
.mp-cart-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:3rem 1rem; gap:1rem; color:var(--mp-text-tertiary); height:100%; }
.mp-cart-empty i { font-size:3rem; opacity:.35; }
.mp-cart-empty p { font-size:.9375rem; }
.mp-cart-item {
    display:flex; gap:1rem; padding:1rem; border-radius:var(--mp-r-xl);
    border:1px solid var(--mp-border); background:var(--mp-bg-secondary);
}
.mp-cart-item-image { width:72px; height:72px; border-radius:var(--mp-r-lg); object-fit:contain; background:var(--mp-bg-tertiary); flex-shrink:0; }
.mp-cart-item-details { flex:1; min-width:0; }
.mp-cart-item-details h4,.mp-cart-item-name { font-size:.875rem; font-weight:600; margin-bottom:.25rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mp-cart-item-details p { font-size:.8125rem; color:var(--mp-text-tertiary); }
.mp-cart-item-price-row { display:flex; align-items:baseline; gap:.5rem; margin-bottom:.25rem; }
.mp-cart-item-price { font-size:.9375rem; font-weight:700; color:var(--mp-text-primary); }
.mp-cart-item-original { font-size:.75rem; color:var(--mp-text-tertiary); text-decoration:line-through; }
.mp-cart-item-qty-row { display:flex; align-items:center; justify-content:space-between; }
.mp-cart-item-qty { font-size:.8125rem; color:var(--mp-text-tertiary); }
.mp-cart-item-subtotal { font-size:.8125rem; font-weight:700; color:var(--mp-primary); }
.mp-summary-savings { padding:.375rem .75rem; background:rgba(16,185,129,.08); border-radius:var(--mp-r-md); }
.mp-cart-item-remove { background:none; border:none; color:var(--mp-danger); cursor:pointer; align-self:flex-start; font-size:.9375rem; padding:.25rem; transition:transform var(--mp-t-fast); }
.mp-cart-item-remove:hover { transform:scale(1.2); }
.mp-cart-footer { padding:1.25rem 1.5rem; border-top:1px solid var(--mp-border); flex-shrink:0; display:flex; flex-direction:column; gap:1rem; }
.mp-cart-summary { display:flex; flex-direction:column; gap:.5rem; }
.mp-summary-row { display:flex; justify-content:space-between; font-size:.875rem; }
.mp-summary-total { font-size:1rem; font-weight:800; padding-top:.75rem; border-top:1px solid var(--mp-border); }

/* ─── BUY NOW MODAL ──────────────────────────────────────────────────────── */
.mp-modal-overlay {
    position:fixed; inset:0; background:rgba(0,0,0,0.55); z-index:900;
    display:none; align-items:center; justify-content:center;
    padding:1rem; animation:mp-fadeIn .2s ease;
}
.mp-modal-overlay.mp-modal-active { display:flex; }
@keyframes mp-fadeIn { from{opacity:0;} to{opacity:1;} }
.mp-modal-container {
    background:var(--mp-bg-primary); border-radius:var(--mp-r-2xl);
    width:100%; max-width:520px; max-height:90vh; overflow-y:auto;
    box-shadow:var(--mp-shadow-2xl); animation:mp-slideUp .3s ease;
}
@keyframes mp-slideUp { from{transform:translateY(20px);opacity:0;} to{transform:translateY(0);opacity:1;} }
.mp-modal-header { display:flex; justify-content:space-between; align-items:center; padding:1.5rem; border-bottom:1px solid var(--mp-border); }
.mp-modal-title { font-size:1.125rem; font-weight:800; }
.mp-modal-close { background:none; border:none; font-size:1.375rem; cursor:pointer; color:var(--mp-text-tertiary); transition:color var(--mp-t-fast); }
.mp-modal-close:hover { color:var(--mp-text-primary); }
.mp-modal-body { padding:1.5rem; }
.mp-modal-product { display:flex; gap:1rem; padding:1rem; background:var(--mp-bg-secondary); border-radius:var(--mp-r-xl); margin-bottom:1.5rem; }
.mp-modal-product-img { width:90px; height:90px; object-fit:contain; background:var(--mp-bg-primary); border-radius:var(--mp-r-lg); flex-shrink:0; }
.mp-modal-product-info { flex:1; min-width:0; }
.mp-modal-product-info h4 { font-size:1rem; font-weight:700; margin-bottom:.375rem; }
.mp-modal-price { display:flex; align-items:baseline; gap:.5rem; }
.mp-price-current { font-size:1.25rem; font-weight:800; color:var(--mp-primary); }
.mp-price-original { font-size:.875rem; text-decoration:line-through; color:var(--mp-text-tertiary); }
.mp-modal-loader { text-align:center; padding:1rem; color:var(--mp-text-tertiary); }
.mp-coupon-row { display:flex; gap:.75rem; }
.mp-coupon-row .mp-input { flex:1; }
.mp-coupon-msg { font-size:.8125rem; margin-top:.375rem; }
.mp-coupon-success { color:var(--mp-success); }
.mp-coupon-error { color:var(--mp-danger); }
.mp-form-row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:.875rem; }

/* ─── BREADCRUMB ─────────────────────────────────────────────────────────── */
.mp-breadcrumb { display:flex; align-items:center; gap:.375rem; flex-wrap:wrap; font-size:.8125rem; }
.mp-breadcrumb a { color:var(--mp-text-tertiary); transition:color var(--mp-t-fast); }
.mp-breadcrumb a:hover { color:var(--mp-primary); }
.mp-breadcrumb span { color:var(--mp-text-tertiary); }
.mp-breadcrumb li:last-child { color:var(--mp-text-primary); font-weight:600; }
.mp-breadcrumb-sep { color:var(--mp-border); }

/* ─── PAGE HERO (INNER PAGES) ────────────────────────────────────────────── */
.mp-page-hero {
    background:linear-gradient(135deg, var(--mp-bg-secondary) 0%, var(--mp-bg-primary) 100%);
    padding:3rem 0; border-bottom:1px solid var(--mp-border);
    position:relative; overflow:hidden;
}
.mp-page-hero::before {
    content:""; position:absolute; right:-50px; top:-50px;
    width:300px; height:300px;
    background:radial-gradient(circle, rgba(var(--mp-primary-rgb),.06) 0%, transparent 65%);
    border-radius:50%; pointer-events:none;
}
.mp-page-hero-content { display:flex; flex-direction:column; gap:.75rem; }
.mp-page-title { font-size:clamp(1.5rem,3vw,2.25rem); font-weight:800; }
.mp-page-subtitle { font-size:.9375rem; color:var(--mp-text-tertiary); }

/* ─── PRODUCTS LISTING PAGE ──────────────────────────────────────────────── */
.mp-products-page { padding:3rem 0; }
.mp-products-layout { display:grid; grid-template-columns:240px 1fr; gap:2rem; align-items:start; }

.mp-sidebar { position:sticky; top:120px; display:flex; flex-direction:column; gap:1.25rem; }
.mp-filter-box { background:var(--mp-bg-primary); border:1.5px solid var(--mp-border); border-radius:var(--mp-r-xl); padding:1.5rem; }
.mp-filter-title { font-size:.9375rem; font-weight:800; margin-bottom:1rem; padding-bottom:.75rem; border-bottom:1px solid var(--mp-border); }
.mp-filter-list { list-style:none; display:flex; flex-direction:column; gap:.25rem; }
.mp-filter-link {
    display:flex; justify-content:space-between; align-items:center;
    padding:.5rem .75rem; border-radius:var(--mp-r-lg); font-size:.875rem;
    color:var(--mp-text-secondary); transition:all var(--mp-t-fast);
    font-weight:500;
}
.mp-filter-link:hover, .mp-filter-link.active { background:rgba(var(--mp-primary-rgb),.08); color:var(--mp-primary); }
.mp-filter-link.active { font-weight:700; }
.mp-filter-count {
    font-size:.6875rem; background:var(--mp-bg-tertiary); color:var(--mp-text-tertiary);
    padding:.125rem .5rem; border-radius:var(--mp-r-full); font-weight:600;
}
.mp-filter-link.active .mp-filter-count { background:rgba(var(--mp-primary-rgb),.15); color:var(--mp-primary); }

.mp-products-main { min-width:0; }
.mp-products-toolbar {
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:1.5rem; gap:1rem; flex-wrap:wrap;
}
.mp-products-count { font-size:.875rem; color:var(--mp-text-tertiary); font-weight:500; }
.mp-search-bar { display:flex; gap:.75rem; align-items:center; flex:1; max-width:300px; }
.mp-search-bar .mp-input { padding:.6rem 1rem; font-size:.875rem; border-radius:var(--mp-r-full); }
.mp-sort-select {
    padding:.6rem 1rem; border:1.5px solid var(--mp-border); border-radius:var(--mp-r-full);
    font-size:.8125rem; font-family:var(--mp-font); background:var(--mp-bg-primary);
    color:var(--mp-text-primary); cursor:pointer; outline:none;
}
.mp-sort-select:focus { border-color:var(--mp-primary); }
.mp-filter-toggle {
    display:none; align-items:center; gap:.5rem;
    padding:.5rem 1rem; border:1.5px solid var(--mp-border);
    border-radius:var(--mp-r-full); font-size:.8125rem; font-weight:600;
    background:var(--mp-bg-primary); cursor:pointer;
}

/* ─── PRODUCT DETAIL PAGE ────────────────────────────────────────────────── */
.mp-product-detail { padding:3rem 0; }
.mp-product-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }

.mp-gallery-main {
    border-radius:var(--mp-r-2xl); overflow:hidden;
    background:var(--mp-bg-tertiary); position:relative; margin-bottom:1rem;
    aspect-ratio:1;
}
.mp-gallery-main img { width:100%; height:100%; object-fit:contain; padding:1rem; }
.mp-gallery-thumbs { display:flex; gap:.75rem; overflow-x:auto; padding:.25rem; scrollbar-width:none; }
.mp-gallery-thumbs::-webkit-scrollbar { display:none; }
.mp-gallery-thumb {
    width:72px; height:72px; border-radius:var(--mp-r-lg); border:2px solid var(--mp-border);
    overflow:hidden; cursor:pointer; flex-shrink:0; transition:border-color var(--mp-t-fast);
    background:var(--mp-bg-tertiary);
}
.mp-gallery-thumb.active, .mp-gallery-thumb:hover { border-color:var(--mp-primary); }
.mp-gallery-thumb img { width:100%; height:100%; object-fit:contain; padding:.25rem; }

.mp-product-info { display:flex; flex-direction:column; gap:1.25rem; }
.mp-product-category-tag {
    font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
    color:var(--mp-primary); background:rgba(var(--mp-primary-rgb),.08);
    padding:.3rem .875rem; border-radius:var(--mp-r-full); display:inline-block;
    width:fit-content;
}
.mp-product-heading { font-size:clamp(1.5rem,3vw,2rem); font-weight:800; line-height:1.25; }
.mp-product-meta { display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; }
.mp-in-stock { color:var(--mp-success); font-size:.875rem; font-weight:600; display:flex; align-items:center; gap:.375rem; }
.mp-in-stock::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--mp-success); display:block; }
.mp-detail-price { display:flex; align-items:baseline; gap:.875rem; flex-wrap:wrap; }
.mp-detail-price .mp-price-current { font-size:2rem; font-weight:900; }
.mp-detail-price .mp-price-original { font-size:1.125rem; }
.mp-discount-badge { background:var(--mp-danger); color:#fff; padding:.3rem .75rem; border-radius:var(--mp-r-full); font-size:.8125rem; font-weight:700; }
.mp-product-desc { font-size:.9375rem; color:var(--mp-text-secondary); line-height:1.75; }
.mp-qty-row { display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap; }
.mp-qty-row label { font-size:.875rem; font-weight:600; }
.mp-action-row { display:flex; gap:1rem; flex-wrap:wrap; }
.mp-action-row .mp-btn { flex:1; min-width:160px; }

.mp-product-assurance { display:grid; grid-template-columns:1fr 1fr; gap:1rem; padding-top:1.25rem; border-top:1px solid var(--mp-border); }
.mp-assurance-item { display:flex; align-items:center; gap:.75rem; font-size:.875rem; }
.mp-assurance-icon { width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.9375rem; flex-shrink:0; }

.mp-related-products { padding:4rem 0; background:var(--mp-bg-secondary); }

/* ─── BLOG LISTING PAGE ──────────────────────────────────────────────────── */
.mp-blogs-page { padding:3rem 0; }

/* ─── BLOG DETAIL PAGE ───────────────────────────────────────────────────── */
.mp-article-wrap { max-width:820px; margin:0 auto; padding:3rem 1.5rem; }
.mp-article-header { text-align:center; margin-bottom:2.5rem; }
.mp-article-meta { display:flex; align-items:center; justify-content:center; gap:1rem; flex-wrap:wrap; margin-bottom:1.25rem; }
.mp-article-date, .mp-article-author { font-size:.8125rem; color:var(--mp-text-tertiary); display:flex; align-items:center; gap:.375rem; }
.mp-article-title { font-size:clamp(1.75rem,4vw,2.75rem); font-weight:900; line-height:1.2; margin-bottom:1.25rem; }
.mp-article-feat-img { width:100%; height:420px; object-fit:cover; border-radius:var(--mp-r-2xl); margin-bottom:2.5rem; }
.mp-article-content { font-size:1.0625rem; line-height:1.85; color:var(--mp-text-primary); }
.mp-article-content p { margin-bottom:1.5rem; }
.mp-article-content h2, .mp-article-content h3 { margin:2rem 0 1rem; font-weight:800; }
.mp-article-content img { border-radius:var(--mp-r-xl); margin:1.5rem 0; }
.mp-article-content a { color:var(--mp-primary); text-decoration:underline; }
.mp-article-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; padding-top:2rem; border-top:1px solid var(--mp-border); margin-top:3rem; }
.mp-share-label { font-size:.875rem; font-weight:700; }
.mp-share-links { display:flex; gap:.625rem; }
.mp-share-link { width:36px; height:36px; border-radius:50%; color:#fff; display:flex; align-items:center; justify-content:center; font-size:.875rem; transition:transform var(--mp-t-fast); }
.mp-share-link:hover { transform:translateY(-3px); }
.mp-share-fb { background:#1877f2; }
.mp-share-tw { background:#1da1f2; }
.mp-share-wa { background:#25d366; }

/* ─── SERVICES LISTING PAGE ──────────────────────────────────────────────── */
.mp-services-page { padding:3rem 0; }

/* ─── SERVICE DETAIL PAGE ────────────────────────────────────────────────── */
.mp-service-detail { padding:3rem 0; }
.mp-service-detail-grid { display:grid; grid-template-columns:1fr 1.25fr; gap:4rem; align-items:start; }
.mp-service-image-card {
    border-radius:var(--mp-r-2xl); background:rgba(var(--mp-primary-rgb),.05);
    display:flex; align-items:center; justify-content:center;
    aspect-ratio:1; overflow:hidden;
}
.mp-service-image-card img { width:100%; height:100%; object-fit:cover; }
.mp-service-image-card-icon { font-size:8rem; color:var(--mp-primary); opacity:.35; }
.mp-service-features { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1.5rem; }
.mp-service-feature { display:flex; align-items:center; gap:.75rem; font-size:.875rem; }
.mp-service-feature i { width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.875rem; }

/* ─── OFFERS LISTING PAGE ────────────────────────────────────────────────── */
.mp-offers-page { padding:3rem 0; }
.mp-offers-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1.5rem; }
.mp-offer-card {
    background:var(--mp-bg-primary); border-radius:var(--mp-r-xl);
    border:1.5px solid var(--mp-border); overflow:hidden;
    transition:all var(--mp-t-normal); display:flex; flex-direction:column;
}
.mp-offer-card:hover { transform:translateY(-6px); box-shadow:var(--mp-shadow-xl); }
.mp-offer-image { display:block; aspect-ratio:16/9; overflow:hidden; background:var(--mp-bg-tertiary); }
.mp-offer-image img { width:100%; height:100%; object-fit:cover; transition:transform var(--mp-t-slow); }
.mp-offer-card:hover .mp-offer-image img { transform:scale(1.05); }
.mp-offer-body { padding:1.5rem; flex:1; display:flex; flex-direction:column; gap:.75rem; }
.mp-offer-badge-pill { display:inline-flex; align-items:center; gap:.375rem; background:var(--mp-danger); color:#fff; padding:.3rem .875rem; border-radius:var(--mp-r-full); font-size:.75rem; font-weight:700; width:fit-content; }
.mp-offer-title { font-size:1.125rem; font-weight:800; }
.mp-offer-desc { font-size:.875rem; color:var(--mp-text-tertiary); line-height:1.6; flex:1; }
.mp-offer-link { display:inline-flex; align-items:center; gap:.375rem; color:var(--mp-primary); font-weight:600; font-size:.875rem; transition:gap var(--mp-t-fast); margin-top:auto; }
.mp-offer-link:hover { gap:.625rem; }

/* ─── OFFER DETAIL PAGE ──────────────────────────────────────────────────── */
.mp-offer-detail { padding:3rem 0; }
.mp-offer-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }
.mp-offer-detail-image { border-radius:var(--mp-r-2xl); overflow:hidden; }
.mp-offer-detail-image img { width:100%; height:480px; object-fit:cover; }
.mp-offer-detail-info { display:flex; flex-direction:column; gap:1.25rem; }
.mp-offer-discount-badge { display:inline-flex; align-items:center; gap:.5rem; background:var(--mp-danger); color:#fff; padding:.5rem 1.25rem; border-radius:var(--mp-r-full); font-size:1.125rem; font-weight:800; width:fit-content; }
.mp-offer-heading { font-size:clamp(1.5rem,3vw,2.25rem); font-weight:900; line-height:1.25; }
.mp-offer-description-card { background:var(--mp-bg-secondary); padding:1.5rem; border-radius:var(--mp-r-xl); border-left:4px solid var(--mp-primary); font-size:.9375rem; color:var(--mp-text-secondary); line-height:1.7; }
.mp-offer-dates { display:grid; grid-template-columns:1fr 1fr; gap:1.25rem; }
.mp-offer-date-item { background:var(--mp-bg-tertiary); padding:1rem; border-radius:var(--mp-r-lg); }
.mp-offer-date-label { font-size:.6875rem; text-transform:uppercase; font-weight:700; color:var(--mp-text-tertiary); letter-spacing:.5px; margin-bottom:.375rem; }
.mp-offer-date-value { font-weight:800; font-size:1rem; }
.mp-offer-terms { font-size:.8125rem; color:var(--mp-text-tertiary); font-style:italic; text-align:center; }

/* ─── EMPTY STATE ────────────────────────────────────────────────────────── */
.mp-empty-state { text-align:center; padding:5rem 2rem; }
.mp-empty-state i { font-size:3.5rem; color:var(--mp-border); margin-bottom:1.25rem; }
.mp-empty-state h3 { font-size:1.25rem; font-weight:700; margin-bottom:.5rem; }
.mp-empty-state p { font-size:.9375rem; color:var(--mp-text-tertiary); margin-bottom:1.5rem; }

/* ─── PAGINATION ─────────────────────────────────────────────────────────── */
.mp-pagination { display:flex; align-items:center; justify-content:center; gap:.5rem; padding:2rem 0; }
.mp-page-link {
    width:40px; height:40px; border-radius:var(--mp-r-lg); border:1.5px solid var(--mp-border);
    display:flex; align-items:center; justify-content:center; font-size:.875rem; font-weight:600;
    color:var(--mp-text-secondary); background:var(--mp-bg-primary); cursor:pointer;
    transition:all var(--mp-t-fast);
}
.mp-page-link:hover, .mp-page-link.active { background:var(--mp-primary); border-color:var(--mp-primary); color:#fff; }
.mp-page-link.disabled { opacity:.4; cursor:not-allowed; pointer-events:none; }

/* ─── FLOATING ACTIONS ───────────────────────────────────────────────────── */
.mp-float-wa {
    position:fixed; bottom:6rem; right:1.5rem; z-index:700;
    width:52px; height:52px; border-radius:50%; background:#25d366; color:#fff;
    display:flex; align-items:center; justify-content:center; font-size:1.5rem;
    box-shadow:0 4px 20px rgba(37,211,102,.45); transition:all var(--mp-t-fast);
    text-decoration:none;
}
.mp-float-wa:hover { transform:scale(1.1); background:#1eaa51; }

.mp-back-top {
    position:fixed; bottom:1.5rem; right:1.5rem; z-index:700;
    width:44px; height:44px; border-radius:50%; background:var(--mp-primary); color:#fff;
    border:none; cursor:pointer; display:none; align-items:center; justify-content:center;
    font-size:1rem; box-shadow:var(--mp-shadow-lg); transition:all var(--mp-t-fast);
}
.mp-back-top.mp-back-top-show { display:flex; }
.mp-back-top:hover { background:var(--mp-primary-dark); transform:translateY(-3px); }

/* ─── AOS CUSTOM ─────────────────────────────────────────────────────────── */
[data-aos] { transition-timing-function: cubic-bezier(.4,0,.2,1) !important; }

/* ─── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (min-width:1025px) {
    .mp-hero-content { grid-template-columns:1fr 1fr; }
    .mp-product-detail-grid { grid-template-columns:1fr 1fr; }
    .mp-service-detail-grid { grid-template-columns:1fr 1.25fr; }
    .mp-offer-detail-grid { grid-template-columns:1fr 1fr; }
    .mp-contact-grid { grid-template-columns:1fr 1.25fr; }
    .mp-footer-grid { grid-template-columns:2fr 1fr 1fr; }
}

@media (max-width:1024px) {
    .mp-products-layout { grid-template-columns:200px 1fr; }
    .mp-banner-grid { grid-template-columns:1fr 1fr; }
    .mp-footer-grid { grid-template-columns:1fr 1fr; }
    .mp-hero-content { grid-template-columns:1fr; }
    .mp-hero-visual { display:none; }
}

@media (max-width:767px) {
    :root { --mp-section-pad:2.5rem; }
    .mp-header-content { padding:.625rem 1rem; gap:.75rem; }
    .mp-search-container { display:none; }
    .mp-secondary-nav { display:none; }

    .mp-hero { padding:2.5rem 0 3rem; min-height:auto; }
    .mp-hero-title { font-size:1.75rem; }
    .mp-hero-cta { flex-direction:column; }
    .mp-hero-stats { gap:1.25rem; }
    .mp-scroll-indicator { display:none; }

    .mp-section, .mp-section-alt { padding:3rem 0; }
    .mp-products-grid { grid-template-columns:repeat(2,1fr); gap:1rem; }
    .mp-services-grid { grid-template-columns:1fr; }
    .mp-banner-grid { grid-template-columns:1fr; }
    .mp-categories-grid { grid-template-columns:repeat(2,1fr); gap:1rem; }
    .mp-blog-grid { grid-template-columns:1fr; }
    .mp-offers-grid { grid-template-columns:1fr; }

    .mp-contact-grid { grid-template-columns:1fr; padding:1.5rem; }
    .mp-form-row { grid-template-columns:1fr; }
    .mp-form-row-3 { grid-template-columns:1fr; }

    .mp-products-layout { grid-template-columns:1fr; }
    .mp-sidebar { position:static; display:none; }
    .mp-sidebar.mp-sidebar-open { display:flex; }
    .mp-filter-toggle { display:flex; }
    .mp-product-detail-grid { grid-template-columns:1fr; gap:2rem; }
    .mp-service-detail-grid { grid-template-columns:1fr; gap:2rem; }
    .mp-offer-detail-grid { grid-template-columns:1fr; gap:2rem; }
    .mp-offer-dates { grid-template-columns:1fr 1fr; }
    .mp-product-assurance { grid-template-columns:1fr 1fr; }
    .mp-action-row { flex-direction:column; }
    .mp-action-row .mp-btn { min-width:0; }

    .mp-footer-grid { grid-template-columns:1fr 1fr; gap:2rem; }
    .mp-footer-bottom { flex-direction:column; text-align:center; }

    .mp-cart-drawer { width:100%; }
    .mp-modal-container { max-height:95vh; border-radius:var(--mp-r-xl) var(--mp-r-xl) 0 0; }

    .mp-section-header { flex-direction:column; align-items:flex-start; }
    .mp-products-toolbar { flex-direction:column; align-items:flex-start; }
    .mp-search-bar { max-width:100%; }

    .mp-article-title { font-size:1.625rem; }
    .mp-article-feat-img { height:240px; }
    .mp-service-features { grid-template-columns:1fr; }
    .mp-hero-badge-float { display:none; }
}

@media (max-width:480px) {
    .mp-products-grid { grid-template-columns:repeat(2,1fr); gap:.75rem; }
    .mp-categories-grid { grid-template-columns:repeat(2,1fr); }
    .mp-footer-grid { grid-template-columns:1fr; }
    .mp-banner-grid { grid-template-columns:1fr; }
}
