/* Sadece shop sayfasını etkilesin diye sınırladım */
.shop-page .container-fluid { max-width: 1320px; }

/* Görseldeki gibi sayfa geniş ve oturmuş dursun */
.shop-page main.container-fluid { padding-top: 0.75rem; padding-left: 18px; padding-right: 18px; }

/* Mobilde yan boşlukları azalt */
@media (max-width: 576px){
  .shop-page main.container-fluid { padding-left: 10px; padding-right: 10px; }
}

/* Sol sidebar kutuları */
.mx-sidebar { position: sticky; top: 86px; }
.mx-sidebox{
  background:#fff;
  border:1px solid rgba(2,18,43,.08);
  border-radius: 14px;
  box-shadow: 0 10px 26px rgba(20,20,43,.06);
}
.mx-side-title{ font-weight: 700; color:#0b2a4a; }

.mx-sideitem{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 10px;
  border-radius:10px;
  text-decoration:none;
  color:#0b2a4a;
  border:1px solid rgba(2,18,43,.06);
  background: linear-gradient(180deg, #ffffff, #fbfdff);
}
.mx-sideitem:hover{
  border-color: rgba(13,110,253,.35);
  box-shadow: 0 10px 18px rgba(13,110,253,.10);
}
.mx-trust{ display:flex; align-items:center; color:#0b2a4a; opacity:.9; }

/* Hero */
.mx-hero{
  border-radius: 16px;
  overflow:hidden;
  border:1px solid rgba(2,18,43,.10);
  box-shadow: 0 14px 34px rgba(20,20,43,.10);
  background:#fff;
}
.mx-hero-banner{
  height: 172px;
  background-size: cover;
  background-position: center right;
  background-repeat:no-repeat;
  /* ✅ banner dosyanın yolu (senin sunucuna göre) */
  background-image: url("/medikal/public/assets/img/shop-hero.jpg");
}
.mx-hero-inner{
  padding: 14px 16px 16px 16px;
  background: linear-gradient(180deg, rgba(6,47,93,.08), rgba(255,255,255,1));
}
.mx-hero h3{ margin:0; font-weight:800; color:#0b2a4a; letter-spacing:-.2px; }
.mx-sub{ color: rgba(11,42,74,.72); font-size: .95rem; }

/* KPI */
.mx-kpi{ display:flex; gap:10px; }
.mx-kpi-box{
  min-width: 140px;
  padding:10px 12px;
  border-radius: 12px;
  background: linear-gradient(180deg, #0d6efd, #0b4db5);
  color:#fff;
  border:1px solid rgba(255,255,255,.22);
  box-shadow: 0 12px 18px rgba(13,110,253,.24);
}
.mx-pill{
  background:#fff;
  border:1px solid rgba(2,18,43,.10) !important;
  color:#0b2a4a;
}

/* Tabs */
.mx-tabs .nav-link{
  border-radius: 12px;
  border: 1px solid rgba(2,18,43,.10);
  color:#0b2a4a;
  background:#fff;
}
.mx-tabs .nav-link.active{
  background: linear-gradient(180deg, #0d6efd, #0b4db5);
  border-color: rgba(13,110,253,.2);
}

/* Product cards */
.mx-product{
  background:#fff;
  border:1px solid rgba(2,18,43,.10);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(20,20,43,.08);
  transition: transform .18s ease, box-shadow .18s ease;
}
.mx-product:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(20,20,43,.14);
}
.mx-prod-img{
  height: 92px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(13,110,253,.10), rgba(11,77,181,.08));
  border: 1px dashed rgba(13,110,253,.25);
}
.mx-prod-title{ font-weight:800; color:#0b2a4a; }
.mx-prod-meta{ color: rgba(11,42,74,.65); font-size:.88rem; }
.mx-prod-price{ font-weight:900; color:#0b2a4a; }
.mx-favbtn{ border-radius: 12px; }

/* Right widgets */
.mx-widget{
  background:#fff;
  border:1px solid rgba(2,18,43,.10);
  border-radius: 16px;
  box-shadow: 0 12px 30px rgba(20,20,43,.08);
}
.mx-widget-title{ font-weight:800; color:#0b2a4a; }
.mx-softline{
  border-radius: 14px;
  border:1px solid rgba(2,18,43,.08);
  background: linear-gradient(180deg, #ffffff, #f7fbff);
}
.mx-avatar{
  width:46px; height:46px;
  border:1px solid rgba(2,18,43,.10);
}
.mx-thumb{
  width:54px; height:44px;
  border:1px solid rgba(2,18,43,.10);
}

/* Trust strip */
.mx-strip{
  background: linear-gradient(180deg, #ffffff, #f7fbff);
  border:1px solid rgba(2,18,43,.10);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 10px 24px rgba(20,20,43,.06);
}
.mx-strip-item{ color:#0b2a4a; opacity:.9; }

/* Responsive tweaks */
@media (max-width: 991px){
  .mx-hero-banner{ height: 150px; }
  .mx-kpi{ width:100%; }
  .mx-kpi-box{ flex:1; min-width: 0; }
}

@media (max-width: 576px){
  .mx-hero-inner{ padding: 12px; }
  .mx-hero h3{ font-size: 1.15rem; }
  .mx-sub{ font-size:.9rem; }
  .mx-prod-img{ height: 78px; }
}
:root{
    --mx-bg:#f4f7fb;
    --mx-panel:#ffffff;
    --mx-ink:#0f172a;
    --mx-muted:#64748b;
    --mx-line:rgba(15,23,42,.08);
    --mx-line-strong:rgba(15,23,42,.12);
    --mx-blue:#2563eb;
    --mx-green:#16a34a;
    --mx-red:#dc2626;
    --mx-amber:#f59e0b;
    --mx-violet:#7c3aed;
    --mx-cyan:#0891b2;
    --mx-pink:#db2777;
    --mx-shadow-sm:0 10px 24px rgba(15,23,42,.05);
    --mx-shadow-md:0 16px 38px rgba(15,23,42,.08);
    --mx-shadow-lg:0 24px 58px rgba(15,23,42,.10);
  }

  *{box-sizing:border-box}
  html,body{overflow-x:hidden}

  .mx-page{
    background:
    radial-gradient(1000px 280px at 50% -5%, rgba(37,99,235,.06), transparent 60%),
    linear-gradient(180deg, #f7f9fd 0%, #f4f7fb 100%);
  }

  .mx-shop{
    padding:1px 0 50px;
  }
  .mx-shop-shell{
    width:100%;
    max-width:none;
    margin:0;
    padding-inline:1px;
  }

  .mx-svg{
    width:18px;height:18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
  }
  .mx-svg svg{
    width:18px;height:18px;display:block;
  }

  .mx-card{
    background:rgba(255,255,255,.97);
    border:1px solid var(--mx-line);
    border-radius:22px;
    box-shadow:var(--mx-shadow-sm);
    overflow:hidden;
  }
  .mx-card-h{
    padding:12px 14px;
    border-bottom:1px solid rgba(15,23,42,.06);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.95));
  }
  .mx-card-title{
    display:flex;
    align-items:center;
    gap:9px;
    font-weight:1100;
    font-size:14px;
    color:var(--mx-ink);
    letter-spacing:-.2px;
  }
  .mx-card-title .mx-svg{color:var(--mx-blue)}
  .mx-card-b{padding:12px 14px}

  .mx-grid{
    display:grid;
    grid-template-columns:250px minmax(0,1fr) 328px;
    gap:10px;
    align-items:start;
  }
  .mx-side,.mx-main,.mx-rightcol{min-width:0}
  .mx-main,.mx-rightcol{padding-inline:1px}
  .mx-rightcol{
    display:flex;
    flex-direction:column;
    gap:10px;
  }

  .mx-menu-shell{
    position:relative;
    padding:12px;
    background:
    radial-gradient(260px 120px at 0% 0%, rgba(37,99,235,.08), transparent 58%),
    radial-gradient(260px 120px at 100% 100%, rgba(124,58,237,.06), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,250,252,.97));
  }
  .mx-menu-list{display:grid;gap:8px}
  .mx-menu-link{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:12px 13px;
    border-radius:16px;
    border:1px solid var(--mx-line);
    background:
    radial-gradient(160px 60px at 0% 0%, rgba(37,99,235,.07), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,250,252,.97));
    text-decoration:none;
    color:inherit;
    font-weight:1000;
    box-shadow:var(--mx-shadow-sm);
    transition:transform .14s ease, box-shadow .14s ease, border-color .14s ease;
  }
  .mx-menu-link:hover{
    transform:translateY(-1px);
    box-shadow:var(--mx-shadow-md);
    border-color:rgba(37,99,235,.16);
  }
  .mx-menu-link small{
    font-size:11px;
    font-weight:1000;
    color:var(--mx-muted);
  }

  .mx-side-note{
    margin-top:10px;
    padding:12px;
    border-radius:18px;
    border:1px solid rgba(124,58,237,.14);
    background:
    radial-gradient(220px 90px at 0% 0%, rgba(124,58,237,.08), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,245,255,.96));
    box-shadow:var(--mx-shadow-sm);
  }
  .mx-side-note b{
    display:block;
    font-size:13.4px;
    font-weight:1100;
    color:var(--mx-ink);
  }
  .mx-side-note span{
    display:block;
    margin-top:6px;
    font-size:12px;
    line-height:1.45;
    color:var(--mx-muted);
    font-weight:900;
  }

  .mx-side-mini-grid{display:grid;gap:8px;margin-top:10px}
  .mx-side-mini{
    display:flex;align-items:center;gap:10px;
    padding:10px 11px;
    border-radius:16px;
    border:1px solid var(--mx-line);
    background:#fff;
    box-shadow:var(--mx-shadow-sm);
  }
  .mx-side-mini .ico{
    width:34px;height:34px;border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(37,99,235,.10);
    color:var(--mx-blue);
    flex:0 0 auto;
  }
  .mx-side-mini strong{
    display:block;
    font-size:12px;
    line-height:1.15;
    font-weight:1100;
    color:var(--mx-ink);
  }
  .mx-side-mini span{
    display:block;
    margin-top:3px;
    font-size:10.8px;
    line-height:1.35;
    color:var(--mx-muted);
    font-weight:900;
  }

  .mx-ua-side-list{display:grid;gap:8px}
  .mx-ua-side-item{
    display:grid;
    grid-template-columns:72px minmax(0,1fr) 34px;
    gap:8px;
    align-items:center;
    padding:8px;
    border-radius:16px;
    border:1px solid rgba(37,99,235,.08);
    background:
    radial-gradient(180px 80px at 0% 0%, rgba(37,99,235,.10), transparent 58%),
    radial-gradient(180px 80px at 100% 100%, rgba(245,158,11,.10), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,250,252,.97));
    box-shadow:var(--mx-shadow-sm);
    text-decoration:none;
    color:inherit;
  }
  .mx-ua-side-thumb{
    width:72px;height:72px;
    border-radius:14px;
    border:1px solid rgba(15,23,42,.06);
    background:#fff center/contain no-repeat;
  }
  .mx-ua-side-body{min-width:0}
  .mx-ua-side-name{
    font-size:11.8px;
    line-height:1.24;
    font-weight:1100;
    color:var(--mx-ink);
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .mx-ua-side-meta{
    display:flex;
    gap:5px;
    flex-wrap:wrap;
    margin-top:6px;
  }
  .mx-ua-side-chip{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:4px 7px;
    border-radius:999px;
    border:1px solid var(--mx-line);
    background:#fff;
    font-size:9.8px;
    font-weight:1100;
    color:var(--mx-muted);
    white-space:nowrap;
  }
  .mx-ua-side-price{
    margin-top:7px;
    font-size:12.8px;
    line-height:1;
    font-weight:1100;
    color:var(--mx-blue);
  }
  .mx-ua-side-go{
    width:34px;height:34px;
    border-radius:12px;
    border:1px solid var(--mx-line-strong);
    background:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:inherit;
  }

  .mx-hero{
    position:relative;
    min-height:unset;
    border-radius:26px;
    overflow:hidden;
    border:1px solid rgba(15,23,42,.08);
    box-shadow:var(--mx-shadow-lg);
    background:
    radial-gradient(900px 320px at -10% -10%, rgba(59,130,246,.28), transparent 60%),
    radial-gradient(700px 260px at 110% 110%, rgba(168,85,247,.22), transparent 60%),
    radial-gradient(400px 160px at 50% 120%, rgba(34,197,94,.18), transparent 70%),
    linear-gradient(135deg,#081426 0%,#0c1e3a 40%,#112c57 100%);
    padding:14px;
  }
  .mx-hero::before{
    content:"";
    position:absolute;
    inset:auto -60px -100px auto;
    width:220px;
    height:220px;
    border-radius:999px;
    background:radial-gradient(circle, rgba(255,255,255,.12), transparent 62%);
    pointer-events:none;
  }
  .mx-hero::after{
    content:"";
    position:absolute;
    left:-20px;
    top:-20px;
    width:150px;
    height:150px;
    border-radius:999px;
    background:radial-gradient(circle, rgba(255,255,255,.08), transparent 68%);
    pointer-events:none;
  }

  .mx-hero-slides{
    position:relative;
    min-height:0;
    height:auto;
    transition:height .35s ease;
  }

  .mx-hero-slide{
    position:absolute;
    inset:0;
    opacity:0;
    pointer-events:none;
    transform:translateY(6px) scale(.99);
    transition:opacity .45s ease, transform .45s ease;
  }
  .mx-hero-slide.is-active{
    position:relative;
    opacity:1;
    pointer-events:auto;
    transform:translateY(0) scale(1);
  }

  .mx-hero-desktop{
    display:grid;
    grid-template-columns:minmax(0,1.12fr) minmax(270px,300px);
    gap:12px;
    align-items:stretch;
    min-height:0;
    position:relative;
    z-index:2;
  }
  .mx-hero-mobile{
    display:none;
    position:relative;
    z-index:2;
  }

  .mx-hero-copy{
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:0;
    padding-bottom:52px;
  }
  .mx-hero-badges{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:10px;
  }
  .mx-hero-pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 10px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.08);
    color:#fff;
    font-size:11px;
    font-weight:1100;
    backdrop-filter:blur(10px);
  }
  .mx-hero-pill.hot{
    background:rgba(220,38,38,.84);
  }

  .mx-hero-title{
    font-size:clamp(26px, 2.1vw, 34px);
    line-height:1.03;
    letter-spacing:-0.9px;
    font-weight:1100;
    color:#fff;
    margin:0 0 8px;
    text-shadow:0 20px 48px rgba(0,0,0,.28);
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    min-height:0;
    max-width:15ch;
    text-wrap:balance;
  }

  .mx-hero-sub{
    max-width:56ch;
    color:#dbeafe;
    font-size:12.8px;
    line-height:1.45;
    font-weight:900;
    margin-bottom:10px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    min-height:0;
  }

  .mx-countdown{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:12px;
  }
  .mx-countdown > div{
    min-width:64px;
    padding:9px 8px;
    border-radius:15px;
    border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.08);
    text-align:center;
    backdrop-filter:blur(10px);
  }
  .mx-countdown b{
    display:block;
    font-size:15px;
    line-height:1;
    color:#fff;
    font-weight:1100;
  }
  .mx-countdown span{
    display:block;
    margin-top:3px;
    font-size:9.6px;
    color:rgba(255,255,255,.76);
    font-weight:1000;
  }

  .mx-hero-statline{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-bottom:12px;
  }
  .mx-hero-stat{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:8px 10px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.07);
    color:#fff;
    font-size:10.4px;
    font-weight:1100;
    backdrop-filter:blur(10px);
  }
  .mx-hero-cta{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
  }
  .mx-hero-cta .btn{
    border-radius:14px;
    font-weight:1100;
    padding:9px 12px;
    box-shadow:0 16px 34px rgba(0,0,0,.18);
  }

  .mx-hero-side{
    display:flex;
    align-items:stretch;
  }
  .mx-hero-product{
    width:100%;
    padding:10px;
    border-radius:22px;
    border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.10);
    backdrop-filter:blur(12px);
    box-shadow:0 22px 46px rgba(0,0,0,.20);
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    min-height:100%;
  }
  .mx-hero-product-media{
    height:172px;
    border-radius:16px;
    background:#fff center/contain no-repeat;
    border:1px solid rgba(15,23,42,.08);
  }
  .mx-hero-product-copy{
    margin-top:8px;
  }
  .mx-hero-product-copy b{
    display:block;
    margin:0;
    font-size:13px;
    line-height:1.18;
    font-weight:1100;
    color:#fff;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    min-height:0;
  }
  .mx-hero-product-copy span{
    display:block;
    margin-top:4px;
    font-size:10.4px;
    line-height:1.34;
    color:rgba(255,255,255,.82);
    font-weight:1000;
  }
  .mx-hero-product-foot{
    margin-top:8px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
    align-items:center;
  }
  .mx-hero-price{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
  }
  .mx-hero-price strong{
    font-size:15.5px;
    line-height:1;
    color:#fff;
    font-weight:1100;
  }
  .mx-hero-price small{
    font-size:9.8px;
    color:rgba(255,255,255,.74);
    font-weight:1000;
  }

  .mx-hero-mobile-card{
    display:grid;
    grid-template-columns:88px minmax(0,1fr);
    gap:8px;
    align-items:center;
    padding:8px;
    border-radius:18px;
    border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.08);
    backdrop-filter:blur(12px);
    box-shadow:0 18px 38px rgba(0,0,0,.20);
  }
  .mx-hero-mobile-media{
    width:88px;
    height:88px;
    border-radius:14px;
    border:1px solid rgba(15,23,42,.08);
    background:#fff center/contain no-repeat;
  }
  .mx-hero-mobile-body{
    min-width:0;
  }
  .mx-hero-mobile-title{
    font-size:12px;
    line-height:1.16;
    font-weight:1100;
    color:#fff;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    min-height:0;
  }
  .mx-hero-mobile-sub{
    margin-top:4px;
    font-size:9.8px;
    line-height:1.32;
    color:#dbeafe;
    font-weight:900;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    min-height:0;
  }
  .mx-hero-mobile-foot{
    margin-top:7px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
    align-items:center;
  }
  .mx-hero-mobile-price{
    font-size:12.4px;
    line-height:1;
    color:#fff;
    font-weight:1100;
  }
  .mx-hero-mobile-foot .btn{
    border-radius:11px;
    font-weight:1100;
    font-size:10px;
    padding:7px 8px;
  }

  .mx-hero-nav{
    position:absolute;
    left:14px;
    right:14px;
    bottom:10px;
    z-index:5;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .mx-hero-dots{
    display:flex;
    gap:7px;
  }
  .mx-hero-dot{
    width:9px;
    height:9px;
    border-radius:999px;
    border:0;
    padding:0;
    background:rgba(255,255,255,.38);
    cursor:pointer;
  }
  .mx-hero-dot.is-active{
    width:24px;
    background:#fff;
  }
  .mx-hero-arrows{
    display:flex;
    gap:7px;
  }
  .mx-hero-arrow{
    width:34px;
    height:34px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.10);
    color:#fff;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    backdrop-filter:blur(10px);
  }

  @media (max-width:991.98px){
    .mx-hero{
      padding:9px;
      min-height:unset;
      border-radius:20px;
    }

    .mx-hero-slides{
      min-height:0;
      height:auto;
    }

    .mx-hero-desktop{
      display:none;
    }

    .mx-hero-mobile{
      display:block;
      min-height:0;
      padding-bottom:48px;
    }

    .mx-hero-badges{
      gap:6px;
      margin-bottom:8px;
    }

    .mx-hero-badges .mx-hero-pill:nth-child(n+3){
      display:none;
    }

    .mx-hero-pill{
      font-size:9.6px;
      padding:6px 8px;
    }

    .mx-hero-title{
      font-size:clamp(17px, 5vw, 20px);
      line-height:1.04;
      margin-bottom:6px;
      min-height:0;
      max-width:100%;
      -webkit-line-clamp:2;
    }

    .mx-hero-sub{
      font-size:10.2px;
      line-height:1.34;
      margin-bottom:8px;
      max-width:none;
      min-height:0;
      color:#dbeafe;
      -webkit-line-clamp:2;
    }

    .mx-countdown{
      gap:5px;
      margin-bottom:8px;
    }

    .mx-countdown > div{
      min-width:46px;
      padding:6px 6px;
      border-radius:11px;
    }

    .mx-countdown b{
      font-size:11px;
    }

    .mx-countdown span{
      font-size:8px;
    }

    .mx-hero-statline{
      gap:5px;
      margin-bottom:8px;
    }

    .mx-hero-stat{
      font-size:8.8px;
      padding:6px 7px;
    }

    .mx-hero-cta .btn{
      padding:7px 9px;
      border-radius:11px;
      font-size:10px;
    }

    .mx-hero-mobile-card{
      grid-template-columns:88px minmax(0,1fr);
      gap:8px;
      padding:8px;
    }

    .mx-hero-mobile-media{
      width:88px;
      height:88px;
      border-radius:14px;
    }

    .mx-hero-mobile-title{
      font-size:12px;
      line-height:1.16;
      min-height:0;
    }

    .mx-hero-mobile-sub{
      font-size:9.8px;
      line-height:1.32;
      min-height:0;
      color:#dbeafe;
    }

    .mx-hero-mobile-price{
      font-size:12.4px;
    }

    .mx-hero-nav{
      left:9px;
      right:9px;
      bottom:8px;
    }

    .mx-hero-arrow{
      width:30px;
      height:30px;
      border-radius:10px;
    }
  }



  .mx-benefit-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
    margin:7px 0 4px;
  }
  .mx-benefit{
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0;
    padding:10px 11px;
    border-radius:16px;
    border:1px solid var(--mx-line);
    background:#fff;
    box-shadow:var(--mx-shadow-sm);
    text-decoration:none;
    color:inherit;
  }
  .mx-benefit .ico{
    width:34px;height:34px;
    border-radius:12px;
    display:flex;align-items:center;justify-content:center;
    flex:0 0 auto;
  }
  .mx-benefit.green .ico{background:rgba(22,163,74,.12);color:#166534}
  .mx-benefit.blue .ico{background:rgba(37,99,235,.12);color:var(--mx-blue)}
  .mx-benefit.amber .ico{background:rgba(245,158,11,.14);color:#92400e}
  .mx-benefit.violet .ico{background:rgba(124,58,237,.12);color:var(--mx-violet)}
  .mx-benefit b{
    display:block;
    font-size:11.7px;
    line-height:1.2;
    font-weight:1100;
    color:var(--mx-ink);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .mx-benefit span{
    display:block;
    margin-top:2px;
    font-size:10.4px;
    line-height:1.3;
    font-weight:900;
    color:var(--mx-muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }





















 .mx-toolbar-wrap{
  margin:6px 0 12px;
  padding:12px;
  border-radius:24px;
  border:1px solid rgba(15,23,42,.08);
  background:
    radial-gradient(320px 120px at 0% 0%, rgba(37,99,235,.08), transparent 58%),
    radial-gradient(260px 100px at 100% 100%, rgba(124,58,237,.06), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,255,.97));
  box-shadow:
    0 14px 32px rgba(15,23,42,.06),
    inset 0 1px 0 rgba(255,255,255,.8);
}

.mx-toolbar{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:10px;
  align-items:center;
}

.mx-tabs{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:10px;
  align-items:center;
  width:100%;
  min-width:0;
  position:relative;
}

.mx-tab-indicator{
  position:absolute;
  bottom:-2px;
  left:0;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,#2563eb,#7c3aed);
  box-shadow:0 6px 14px rgba(37,99,235,.35);
  transition:all .28s cubic-bezier(.4,0,.2,1);
  width:0;
}

.mx-tab{
  appearance:none;
  width:100%;
  border:1px solid rgba(15,23,42,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,247,251,.96));
  color:var(--mx-ink);
  border-radius:16px;
  padding:13px 12px;
  font-size:12.2px;
  line-height:1;
  font-weight:1100;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  cursor:pointer;
  white-space:nowrap;
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease,
    background .16s ease,
    color .16s ease;
  box-shadow:0 10px 22px rgba(15,23,42,.05);
  text-align:center;
}

.mx-tab:hover{
  transform:translateY(-1px);
  border-color:rgba(37,99,235,.16);
  box-shadow:0 14px 28px rgba(15,23,42,.08);
}

.mx-tab.active{
  background:
    radial-gradient(140px 60px at 0% 0%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(135deg, #2563eb 0%, #1d4ed8 55%, #1e40af 100%);
  color:#fff;
  border-color:rgba(37,99,235,.28);
  box-shadow:
    0 16px 30px rgba(37,99,235,.24),
    inset 0 1px 0 rgba(255,255,255,.16);
}

.mx-tab.active i{
  color:#fff;
}
.mx-tabs-note{
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px 2px;
  font-size:11.2px;
  line-height:1.35;
  font-weight:1000;
  color:var(--mx-muted);
}

.mx-tabs-note::before{
  content:"";
  width:8px;
  height:8px;
  border-radius:999px;
  background:linear-gradient(135deg,#2563eb,#7c3aed);
  box-shadow:0 0 0 4px rgba(37,99,235,.10);
  flex:0 0 auto;
}

.mx-tab{
  position:relative;
}

.mx-tab i{
  font-size:14px;
  line-height:1;
  opacity:.92;
}

.mx-tab span{
  display:inline-block;
  line-height:1;
}

.mx-tab.active{
  background:
    radial-gradient(140px 60px at 0% 0%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(135deg, #2563eb 0%, #1d4ed8 55%, #1e40af 100%);
  color:#fff;
  border-color:rgba(37,99,235,.28);
  box-shadow:
    0 16px 30px rgba(37,99,235,.24),
    inset 0 1px 0 rgba(255,255,255,.16);
}

.mx-tab.active::after{
  content:"";
  position:absolute;
  left:14px;
  right:14px;
  bottom:-6px;
  height:10px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(37,99,235,.30) 0%, rgba(37,99,235,0) 75%);
  pointer-events:none;
  filter:blur(2px);
}

.mx-tab[data-tab="bestseller"] i{color:#f59e0b}
.mx-tab[data-tab="new"] i{color:#7c3aed}
.mx-tab[data-tab="fav"] i{color:#db2777}
.mx-tab.active i{color:#fff !important;}






















.mx-control-bar{
  margin-top:8px;
  padding:12px;
  border-radius:20px;
  border:1px solid rgba(15,23,42,.08);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,255,.96));
  box-shadow:0 12px 28px rgba(15,23,42,.06);
}

.mx-control-top{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
}

.mx-searchbar{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 7px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  box-shadow:0 8px 18px rgba(15,23,42,.05);
}

.mx-searchbar input{
  border:none;
  outline:none;
  width:100%;
  font-size:15px;
  font-weight:1000;
}

.mx-filter-btn{
  display:flex;
  align-items:center;
  gap:6px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  font-weight:1100;
  cursor:pointer;
  box-shadow:0 8px 18px rgba(15,23,42,.05);
}

.mx-filter-btn:hover{
  background:#f1f5f9;
}



.mx-sort-bar{
  margin-top:10px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.mx-sort-chip{
  padding:10px 13px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(245,247,251,.96));
  font-size:11px;
  font-weight:1100;
  display:inline-flex;
  align-items:center;
  gap:6px;
  text-decoration:none;
  color:#0f172a;
  box-shadow:0 6px 14px rgba(15,23,42,.05);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.mx-sort-chip:hover{
  transform:translateY(-1px);
  border-color:rgba(37,99,235,.16);
  box-shadow:0 10px 20px rgba(15,23,42,.07);
}

.mx-sort-chip.active{
  background:
    radial-gradient(140px 60px at 0% 0%, rgba(255,255,255,.16), transparent 60%),
    linear-gradient(135deg,#0f172a 0%, #1e293b 100%);
  color:#fff;
  border-color:rgba(15,23,42,.24);
  box-shadow:0 12px 24px rgba(15,23,42,.20);
}

.mx-sort-chip i{
  font-size:12px;
  line-height:1;
}

.mx-sort-chip.active i{
  color:#1e46c1;
}







@media (max-width:991.98px){

  .mx-control-top{
    grid-template-columns:1fr auto;
    gap:6px;
  }

  .mx-searchbar{
    padding:9px 10px;
  }

  .mx-filter-btn{
    padding:9px 10px;
    font-size:11px;
  }

  .mx-sort-bar{
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
  }

  .mx-sort-bar::-webkit-scrollbar{
    display:none;
  }

  .mx-sort-chip{
    flex:0 0 auto;
    font-size:10px;
    padding:8px 10px;
  }
.mx-control-head{
  margin-bottom:8px;
}

.mx-control-title{
  font-size:12px;
}

.mx-control-sub{
  font-size:10px;
}

.mx-searchbox-label{
  font-size:9.6px;
  margin-bottom:5px;
}

.mx-sort-head{
  margin-top:8px;
  margin-bottom:6px;
}

.mx-sort-head span{
  font-size:10.6px;
}

.mx-sort-head small{
  font-size:9.4px;
}

}







.mx-control-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
  flex-wrap:wrap;
}

.mx-control-title{
  font-size:13.4px;
  line-height:1.1;
  font-weight:1100;
  color:var(--mx-ink);
  letter-spacing:-.2px;
}

.mx-control-sub{
  font-size:11px;
  line-height:1.35;
  font-weight:900;
  color:var(--mx-muted);
}

.mx-searchbox{
  min-width:0;
  width:100%;
}

.mx-searchbox-label{
  font-size:10.4px;
  line-height:1;
  font-weight:1100;
  color:var(--mx-muted);
  margin:0 0 6px 2px;
}

.mx-filter-btn{
  position:relative;
}

.mx-filter-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:999px;
  background:linear-gradient(135deg,#2563eb,#7c3aed);
  color:#fff;
  font-size:10px;
  line-height:1;
  font-weight:1100;
  box-shadow:0 6px 14px rgba(37,99,235,.26);
}

.mx-sort-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:10px;
  margin-bottom:8px;
  flex-wrap:wrap;
}

.mx-sort-head span{
  font-size:11.5px;
  line-height:1.1;
  font-weight:1100;
  color:var(--mx-ink);
}

.mx-sort-head small{
  font-size:10px;
  line-height:1.3;
  font-weight:1000;
  color:var(--mx-muted);
}


















  .mx-toolbar-search-row{
    margin-top:8px;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:8px;
    align-items:center;
  }
  .mx-searchbar{
    position:relative;
    min-width:0;
    width:100%;
    border:1px solid var(--mx-line);
    border-radius:14px;
    background:#fff;
    box-shadow:var(--mx-shadow-sm);
  }
  .mx-searchbar .mx-svg{
    position:absolute;
    left:12px;
    top:50%;
    transform:translateY(-50%);
    color:rgba(15,23,42,.44);
  }
  .mx-searchbar input{
    width:100%;
    border:0;
    outline:0;
    background:transparent;
    padding:10px 12px 10px 36px;
    font-size:12.3px;
    font-weight:900;
    color:var(--mx-ink);
  }
  .mx-filter-open{
    border-radius:13px;
    font-weight:1100;
    padding:9px 11px;
    white-space:nowrap;
    box-shadow:var(--mx-shadow-sm);
  }

  .mx-sort-mini{
    display:flex;
    gap:8px;
    overflow-x:auto;
    padding-top:8px;
    padding-bottom:2px;
    -ms-overflow-style:none;
    scrollbar-width:none;
  }
  .mx-sort-mini::-webkit-scrollbar{display:none}
  .mx-sort-chip{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 10px;
    border-radius:999px;
    border:1px solid var(--mx-line);
    background:#fff;
    color:inherit;
    text-decoration:none;
    font-size:11px;
    font-weight:1100;
    box-shadow:var(--mx-shadow-sm);
    white-space:nowrap;
  }
  .mx-sort-chip.active{
    background:rgba(37,99,235,.10);
    border-color:rgba(37,99,235,.18);
    color:var(--mx-blue);
  }

  .mx-cat-tiles{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
    margin:8px 0 10px;
  }
  .mx-cat-tile{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0;
    padding:13px;
    border-radius:20px;
    border:1px solid var(--mx-line);
    background:
    radial-gradient(220px 80px at 0% 0%, rgba(37,99,235,.08), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
    box-shadow:var(--mx-shadow-sm);
    text-decoration:none;
    color:inherit;
  }
  .mx-cat-ico{
    width:46px;height:46px;
    flex:0 0 auto;
    border-radius:16px;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(180deg,#dbeafe,#bfdbfe);
    color:var(--mx-blue);
    border:1px solid rgba(37,99,235,.10);
    box-shadow:0 12px 24px rgba(15,23,42,.08);
  }
  .mx-cat-tile.cat-ortho .mx-cat-ico{background:linear-gradient(180deg,#dcfce7,#bbf7d0);color:#166534}
  .mx-cat-tile.cat-olcum .mx-cat-ico{background:linear-gradient(180deg,#fef3c7,#fde68a);color:#92400e}
  .mx-cat-tile.cat-hasta .mx-cat-ico{background:linear-gradient(180deg,#fee2e2,#fecaca);color:#b91c1c}
  .mx-cat-txt{min-width:0}
  .mx-cat-txt b{
    display:block;
    font-size:13px;
    line-height:1.18;
    font-weight:1100;
    color:var(--mx-ink);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .mx-cat-txt span{
    display:block;
    margin-top:4px;
    font-size:11.2px;
    line-height:1.35;
    font-weight:900;
    color:var(--mx-muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .mx-products{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:10px;
  }
  .mx-pcard{
    position:relative;
    display:flex;
    flex-direction:column;
    min-width:0;
    height:100%;
    overflow:hidden;
    border:1px solid var(--mx-line);
    border-radius:22px;
    background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,250,252,.97));
    box-shadow:var(--mx-shadow-sm);
    transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  }
  .mx-pcard:hover{
    transform:translateY(-2px);
    box-shadow:var(--mx-shadow-md);
    border-color:rgba(37,99,235,.16);
  }
  .mx-pimgwrap{
    position:relative;
    display:block;
    margin:8px 8px 0;
    border-radius:18px;
    overflow:hidden;
    border:1px solid rgba(15,23,42,.06);
    background:
    radial-gradient(160px 100px at 50% 0%, rgba(37,99,235,.05), transparent 58%),
    #fff;
  }
  .mx-pimg{
    width:100%;
    height:198px;
    background:center/contain no-repeat;
    background-color:transparent;
  }
  .mx-poverlay{
    position:absolute;
    left:8px;right:8px;top:8px;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:8px;
    z-index:3;
  }
  .mx-poverlay-left{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    min-width:0;
    max-width:calc(100% - 40px);
  }
  .mx-tag{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:5px 8px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.16);
    background:rgba(2,6,23,.62);
    color:#fff;
    font-size:10px;
    font-weight:1100;
    line-height:1;
    backdrop-filter:blur(10px);
    box-shadow:0 12px 24px rgba(0,0,0,.16);
    white-space:nowrap;
  }
  .mx-tag.hot{background:rgba(220,38,38,.80)}
  .mx-tag.blue{background:rgba(37,99,235,.74)}
  .mx-tag.warn{background:rgba(245,158,11,.86);color:#111827;border-color:rgba(255,255,255,.12)}
  .mx-fav-btn{
    width:34px;height:34px;
    flex:0 0 auto;
    border-radius:13px;
    display:inline-flex;align-items:center;justify-content:center;
    border:1px solid rgba(15,23,42,.10);
    background:rgba(255,255,255,.96);
    box-shadow:0 14px 26px rgba(15,23,42,.14);
    cursor:pointer;
  }
  .mx-fav-btn i{font-size:15px}
  .mx-fav-btn .text-danger{color:#dc2626 !important;}

  .mx-pbody{
    display:flex;
    flex-direction:column;
    gap:6px;
    min-width:0;
    flex:1;
    padding:9px 9px 10px;
  }
  .mx-pmeta-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:8px;
    min-width:0;
  }
  .mx-rating-line{
    display:flex;
    align-items:center;
    gap:6px;
    min-width:0;
    flex-wrap:wrap;
  }
  .mx-rating-stars{
    display:inline-flex;
    gap:2px;
    color:#f59e0b;
    font-size:11px;
    line-height:1;
    white-space:nowrap;
  }
  .mx-meta-pill{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:4px 7px;
    border-radius:999px;
    border:1px solid var(--mx-line);
    background:rgba(248,250,252,.94);
    font-size:10px;
    font-weight:1100;
    line-height:1;
    white-space:nowrap;
    color:var(--mx-muted);
  }
  .mx-meta-pill.stockok{
    background:rgba(22,163,74,.10);
    border-color:rgba(22,163,74,.16);
    color:#166534;
  }
  .mx-meta-pill.stocklow{
    background:rgba(245,158,11,.14);
    border-color:rgba(245,158,11,.20);
    color:#92400e;
  }
  .mx-ptitle{
    font-size:12.8px;
    line-height:1.2;
    font-weight:1100;
    color:var(--mx-ink);
    letter-spacing:-.14px;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    min-height:31px;
  }
  .mx-pdesc{
    font-size:11.1px;
    line-height:1.34;
    color:var(--mx-muted);
    font-weight:900;
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    overflow:hidden;
    min-height:15px;
  }
  .mx-pmini{display:flex;gap:6px;flex-wrap:wrap}
  .mx-mini-chip{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:4px 7px;
    border-radius:999px;
    border:1px solid var(--mx-line);
    background:#fff;
    font-size:10px;
    font-weight:1100;
    color:var(--mx-ink);
    white-space:nowrap;
  }
  .mx-pprice{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:8px 10px;
    border-radius:16px;
    background:
    radial-gradient(160px 80px at 0% 0%, rgba(37,99,235,.06), transparent 58%),
    linear-gradient(180deg, rgba(239,246,255,.96), rgba(255,255,255,.98));
    border:1px solid rgba(37,99,235,.10);
  }
  .mx-pprice-main{
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:0;
  }
  .mx-pprice-main b{
    font-size:16px;
    line-height:1;
    font-weight:1100;
    color:var(--mx-blue);
    letter-spacing:-.3px;
    white-space:nowrap;
  }
  .mx-pprice-main s{
    font-size:11px;
    line-height:1;
    font-weight:900;
    color:rgba(100,116,139,.72);
    white-space:nowrap;
  }
  .mx-price-drop{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:5px 8px;
    border-radius:999px;
    background:rgba(220,38,38,.10);
    border:1px solid rgba(220,38,38,.18);
    color:#991b1b;
    font-size:10px;
    font-weight:1100;
    white-space:nowrap;
  }
  .mx-pbottom{
    display:grid;
    grid-template-columns:minmax(0,1fr) 40px;
    gap:7px;
    align-items:center;
    margin-top:auto;
  }
  .mx-pcta{
    width:100%;
    border-radius:14px;
    font-size:11.4px;
    font-weight:1100;
    padding:9px 9px;
    white-space:nowrap;
  }
  .mx-pdetail{
    width:40px;height:40px;
    border-radius:14px;
    border:1px solid var(--mx-line-strong);
    background:#fff;
    color:inherit;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  .mx-pager{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin:16px 0 4px;
  }
  .mx-pager .btn{border-radius:14px;font-weight:1100}
  .mx-pageinfo{font-weight:1100;color:var(--mx-muted)}

  .mx-campaign-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin:14px 0;
  }
  .mx-campaign{
    position:relative;
    overflow:hidden;
    min-height:210px;
    border-radius:24px;
    border:1px solid var(--mx-line);
    box-shadow:var(--mx-shadow-md);
    background:#0f172a;
  }
  .mx-campaign-bg{
    position:absolute;inset:0;
    background-size:cover;
    background-position:center;
    filter:saturate(1.05) contrast(1.04);
  }
  .mx-campaign-bg::after{
    content:"";
    position:absolute;inset:0;
    background:linear-gradient(90deg, rgba(2,6,23,.78) 0%, rgba(2,6,23,.52) 45%, rgba(2,6,23,.24) 100%);
  }
  .mx-campaign-body{
    position:relative;
    z-index:2;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    gap:8px;
    padding:16px;
    color:#fff;
  }
  .mx-campaign-badges{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:2px}
  .mx-campaign-pill{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 9px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.16);
    background:rgba(255,255,255,.08);
    color:#fff;
    font-size:10.4px;
    font-weight:1100;
  }
  .mx-campaign-title{
    font-size:24px;
    line-height:1.05;
    letter-spacing:-.5px;
    font-weight:1100;
    margin:0;
    text-shadow:0 18px 36px rgba(0,0,0,.22);
  }
  .mx-campaign-sub{
    font-size:12.2px;
    line-height:1.46;
    color:rgba(255,255,255,.88);
    font-weight:900;
    max-width:56ch;
    margin:0;
  }
  .mx-campaign-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
  .mx-campaign-actions .btn{
    border-radius:12px;
    font-weight:1100;
    padding:8px 10px;
    font-size:11px;
  }

  .mx-section-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:12px 14px;
    border-bottom:1px solid rgba(15,23,42,.06);
    background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.95));
  }
  .mx-head-link{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 10px;
    border-radius:11px;
    border:1px solid var(--mx-line);
    background:#fff;
    color:var(--mx-ink);
    text-decoration:none;
    font-size:10.8px;
    font-weight:1100;
    box-shadow:var(--mx-shadow-sm);
  }

  .mx-rec-viewport{overflow:hidden;width:100%}
  .mx-rec-track{
    display:flex;
    gap:12px;
    will-change:transform;
    transform:translateX(0);
  }
  .mx-rec-item{flex:0 0 calc(33.333% - 8px);min-width:0}
  .mx-rec-card{
    position:relative;
    display:flex;
    flex-direction:column;
    min-height:100%;
    border:1px solid var(--mx-line);
    border-radius:22px;
    overflow:hidden;
    background:
    radial-gradient(180px 90px at 0% 0%, rgba(37,99,235,.06), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,250,252,.97));
    box-shadow:var(--mx-shadow-sm);
    transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  }
  .mx-rec-card:hover{
    transform:translateY(-2px);
    box-shadow:var(--mx-shadow-md);
    border-color:rgba(37,99,235,.14);
  }
  .mx-rec-badge{
    position:absolute;
    left:10px;top:10px;
    z-index:3;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 10px;
    border-radius:999px;
    border:1px solid var(--mx-line);
    background:rgba(255,255,255,.96);
    font-size:11px;
    font-weight:1100;
    box-shadow:var(--mx-shadow-sm);
    white-space:nowrap;
  }
  .mx-rec-badge.blue{background:rgba(37,99,235,.10);border-color:rgba(37,99,235,.18);color:var(--mx-blue)}
  .mx-rec-badge.red{background:rgba(220,38,38,.10);border-color:rgba(220,38,38,.18);color:#991b1b}
  .mx-rec-fav{
    position:absolute;
    right:10px;top:10px;
    z-index:3;
    width:34px;height:34px;
    border-radius:13px;
    display:inline-flex;align-items:center;justify-content:center;
    border:1px solid rgba(15,23,42,.10);
    background:rgba(255,255,255,.96);
    box-shadow:var(--mx-shadow-sm);
    cursor:pointer;
  }
  .mx-rec-imgwrap{
    position:relative;
    margin:8px 8px 0;
    border-radius:18px;
    overflow:hidden;
    border:1px solid rgba(15,23,42,.06);
    background:#fff;
  }
  .mx-rec-img{
    height:188px;
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    background-color:#fff;
  }
  .mx-rec-content{
    display:flex;
    flex-direction:column;
    gap:8px;
    flex:1;
    padding:10px 10px 12px;
  }
  .mx-rec-rating{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:8px;
    flex-wrap:wrap;
  }
  .mx-rec-rating-left{
    display:flex;
    align-items:center;
    gap:6px;
    min-width:0;
    flex-wrap:wrap;
  }
  .mx-rec-stars{
    display:inline-flex;
    gap:2px;
    color:#f59e0b;
    font-size:11px;
    line-height:1;
  }
  .mx-rec-pill{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:4px 7px;
    border-radius:999px;
    border:1px solid var(--mx-line);
    background:rgba(248,250,252,.94);
    font-size:10px;
    font-weight:1100;
    color:var(--mx-muted);
    white-space:nowrap;
  }
  .mx-rec-name{
    font-size:12.8px;
    line-height:1.24;
    font-weight:1100;
    color:var(--mx-ink);
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    min-height:31px;
  }
  .mx-rec-desc{
    font-size:11px;
    line-height:1.34;
    color:var(--mx-muted);
    font-weight:900;
    display:-webkit-box;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .mx-rec-meta{display:flex;gap:6px;flex-wrap:wrap}
  .mx-rec-mini{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:4px 7px;
    border-radius:999px;
    border:1px solid var(--mx-line);
    background:#fff;
    font-size:10px;
    font-weight:1100;
    color:var(--mx-ink);
    white-space:nowrap;
  }
  .mx-rec-price{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:8px;
    padding:8px 10px;
    border-radius:15px;
    background:
    radial-gradient(160px 80px at 0% 0%, rgba(37,99,235,.06), transparent 58%),
    linear-gradient(180deg, rgba(239,246,255,.96), rgba(255,255,255,.98));
    border:1px solid rgba(37,99,235,.10);
    margin-top:auto;
  }
  .mx-rec-price b{
    font-size:15px;
    line-height:1;
    font-weight:1100;
    color:var(--mx-blue);
  }
  .mx-rec-actions{
    display:grid;
    grid-template-columns:40px minmax(0,1fr);
    gap:8px;
    margin-top:auto;
    align-items:center;
  }
  .mx-rec-detail{
    width:40px;height:40px;
    border-radius:13px;
    border:1px solid var(--mx-line-strong);
    background:#fff;
    color:inherit;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .mx-rec-actions .btn{border-radius:13px;font-weight:1100}

  .mx-assist-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin-top:14px;
    margin-bottom:14px;
  }
  .mx-assist-card{
    position:relative;
    overflow:hidden;
    border-radius:24px;
    border:1px solid var(--mx-line);
    background:
    radial-gradient(260px 100px at 0% 0%, rgba(37,99,235,.10), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,255,.95));
    box-shadow:var(--mx-shadow-sm);
    padding:11px 12px;
  }
  .mx-assist-icon{
    width:38px;height:38px;
    border-radius:13px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(245,158,11,.16);
    color:#92400e;
    margin-bottom:8px;
  }
  .mx-assist-card b{
    display:block;
    font-size:13px;
    line-height:1.2;
    font-weight:1100;
    color:var(--mx-ink);
  }
  .mx-assist-card span{
    display:block;
    margin-top:5px;
    font-size:11px;
    line-height:1.42;
    font-weight:900;
    color:var(--mx-muted);
  }
  .mx-assist-actions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:10px;
  }
  .mx-assist-actions .btn{
    border-radius:11px;
    font-weight:1100;
    padding:7px 9px;
    font-size:10.4px;
  }

  .mx-expert-top{
    padding:12px;
    border-bottom:1px solid rgba(15,23,42,.06);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .mx-expert-name{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
  }
  .mx-expert-avatar{
    width:48px;height:48px;
    border-radius:16px;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(180deg, #dbeafe, #bfdbfe);
    color:var(--mx-blue);
    border:1px solid rgba(37,99,235,.16);
    font-weight:1100;
    flex:0 0 auto;
    box-shadow:var(--mx-shadow-sm);
  }
  .mx-expert-copy b{
    display:block;
    font-size:14px;
    line-height:1.2;
    font-weight:1100;
    color:var(--mx-ink);
  }
  .mx-expert-copy span{
    display:block;
    margin-top:4px;
    font-size:11.4px;
    color:var(--mx-muted);
    font-weight:900;
  }
  .mx-expert-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 9px;
    border-radius:999px;
    background:rgba(22,163,74,.10);
    border:1px solid rgba(22,163,74,.18);
    color:#166534;
    font-size:11px;
    font-weight:1100;
    white-space:nowrap;
  }
  .mx-expert-body{padding:12px}
  .mx-expert-metrics{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
    margin-bottom:10px;
  }
  .mx-expert-metric{
    padding:10px 8px;
    border-radius:16px;
    border:1px solid var(--mx-line);
    background:
    radial-gradient(120px 50px at 0% 0%, rgba(37,99,235,.06), transparent 58%),
    #fff;
    box-shadow:var(--mx-shadow-sm);
    text-align:center;
  }
  .mx-expert-metric .mxi{
    width:28px;height:28px;
    margin:0 auto 6px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:10px;
  }
  .mx-expert-metric .mxi svg{
    width:16px;
    height:16px;
    stroke:currentColor !important;
  }
  .mx-expert-metric.is-rate .mxi{background:rgba(245,158,11,.14);color:#92400e}
  .mx-expert-metric.is-like .mxi{background:rgba(219,39,119,.12);color:var(--mx-pink)}
  .mx-expert-metric.is-view .mxi{background:rgba(8,145,178,.12);color:var(--mx-cyan)}
  .mx-expert-metric small{
    display:block;
    color:var(--mx-muted);
    font-size:10.2px;
    font-weight:1000;
  }
  .mx-expert-metric b{
    display:block;
    margin-top:5px;
    color:var(--mx-ink);
    font-size:14px;
    line-height:1;
    font-weight:1100;
  }
  .mx-expert-note{
    padding:11px;
    border-radius:16px;
    border:1px solid rgba(37,99,235,.16);
    background:
    radial-gradient(220px 90px at 0% 0%, rgba(37,99,235,.10), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,250,255,.95));
    color:var(--mx-ink);
    font-size:11.8px;
    line-height:1.46;
    font-weight:900;
    box-shadow:var(--mx-shadow-sm);
  }
  .mx-expert-tags{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    margin-top:10px;
  }
  .mx-expert-tag{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 10px;
    border-radius:999px;
    border:1px solid rgba(37,99,235,.14);
    background:linear-gradient(180deg, rgba(239,246,255,.96), rgba(255,255,255,.98));
    font-size:10.4px;
    font-weight:1100;
    color:var(--mx-blue);
    box-shadow:var(--mx-shadow-sm);
  }
  .mx-expert-tag.green{
    border-color:rgba(22,163,74,.18);
    background:linear-gradient(180deg, rgba(240,253,244,.96), rgba(255,255,255,.98));
    color:#166534;
  }
  .mx-expert-tag.amber{
    border-color:rgba(245,158,11,.18);
    background:linear-gradient(180deg, rgba(255,251,235,.96), rgba(255,255,255,.98));
    color:#92400e;
  }

  .mx-rv-list{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding:10px;
  }
  .mx-rv-card{
    display:grid;
    grid-template-columns:88px minmax(0,1fr);
    gap:10px;
    align-items:center;
    padding:10px;
    border-radius:20px;
    border:1px solid var(--mx-line);
    background:
    radial-gradient(180px 80px at 0% 0%, rgba(37,99,235,.07), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,250,252,.97));
    box-shadow:var(--mx-shadow-sm);
  }
  .mx-rv-thumb{
    width:88px;height:88px;
    border-radius:18px;
    border:1px solid rgba(15,23,42,.06);
    background:#fff center/contain no-repeat;
  }
  .mx-rv-body{min-width:0}
  .mx-rv-name{
    font-size:12.6px;
    line-height:1.22;
    font-weight:1100;
    color:var(--mx-ink);
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .mx-rv-meta{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
    margin-top:7px;
  }
  .mx-rv-pill{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:5px 8px;
    border-radius:999px;
    border:1px solid var(--mx-line);
    background:#fff;
    font-size:10px;
    font-weight:1100;
    color:var(--mx-muted);
    white-space:nowrap;
  }
  .mx-rv-price{
    margin-top:8px;
    font-size:13.2px;
    line-height:1;
    font-weight:1100;
    color:var(--mx-blue);
  }
  .mx-rv-actions{
    display:grid;
    grid-template-columns:minmax(0,1fr) 36px;
    gap:8px;
    margin-top:9px;
    align-items:center;
  }
  .mx-rv-actions .btn{
    border-radius:12px;
    font-weight:1100;
    font-size:10.4px;
    padding:8px 8px;
  }
  .mx-rv-go{
    width:36px;height:36px;
    border-radius:12px;
    border:1px solid var(--mx-line-strong);
    background:#fff;
    color:inherit;
    text-decoration:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }

  .mx-review-wrap{padding:10px}
  .mx-review-topline{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-bottom:10px;
  }
  .mx-review-score{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius:18px;
    background:#fff;
    border:1px solid var(--mx-line);
    box-shadow:var(--mx-shadow-sm);
  }
  .mx-review-score b{
    font-size:22px;
    line-height:1;
    font-weight:1100;
    color:var(--mx-ink);
  }
  .mx-review-score span{
    display:block;
    font-size:11px;
    font-weight:1000;
    color:var(--mx-muted);
  }
  .mx-review-summary-chips{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
  }
  .mx-review-summary-chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 10px;
    border-radius:999px;
    border:1px solid var(--mx-line);
    background:#fff;
    font-size:11px;
    font-weight:1100;
    color:var(--mx-ink);
    box-shadow:var(--mx-shadow-sm);
  }
  .mx-review-stage{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }
  .mx-review-card{
    padding:12px;
    border-radius:20px;
    border:1px solid var(--mx-line);
    background:
    radial-gradient(220px 80px at 0% 0%, rgba(245,158,11,.10), transparent 58%),
    radial-gradient(220px 80px at 100% 100%, rgba(37,99,235,.06), transparent 58%),
    #fff;
    box-shadow:var(--mx-shadow-sm);
  }
  .mx-review-top{
    display:flex;
    gap:10px;
    align-items:center;
  }
  .mx-review-avatar{
    width:42px;height:42px;
    border-radius:15px;
    display:flex;align-items:center;justify-content:center;
    background:rgba(37,99,235,.10);
    color:var(--mx-blue);
    border:1px solid rgba(37,99,235,.16);
    font-weight:1100;
    flex:0 0 auto;
  }
  .mx-review-name{
    font-size:13px;
    line-height:1.2;
    font-weight:1100;
    color:var(--mx-ink);
  }
  .mx-review-stars i{color:#f59e0b}
  .mx-review-badges{
    display:flex;
    gap:7px;
    flex-wrap:wrap;
    margin-top:8px;
  }
  .mx-review-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 9px;
    border-radius:999px;
    border:1px solid var(--mx-line);
    background:#fff;
    font-size:10.6px;
    font-weight:1100;
    color:var(--mx-ink);
  }
  .mx-review-badge.blue{background:rgba(37,99,235,.10);border-color:rgba(37,99,235,.18);color:var(--mx-blue)}
  .mx-review-badge.green{background:rgba(22,163,74,.10);border-color:rgba(22,163,74,.18);color:#166534}
  .mx-review-badge.amber{background:rgba(245,158,11,.14);border-color:rgba(245,158,11,.20);color:#92400e}
  .mx-review-text{
    margin-top:10px;
    color:var(--mx-muted);
    font-size:11.9px;
    line-height:1.48;
    font-weight:900;
  }
  .mx-review-foot{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin-top:10px;
    font-size:10.6px;
    color:var(--mx-muted);
    font-weight:1100;
    flex-wrap:wrap;
  }

  .mx-filter-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
  }
  .mx-filter-group{
    border:1px solid var(--mx-line);
    border-radius:18px;
    padding:12px;
    background:#fff;
  }
  .mx-filter-group b{
    display:block;
    margin-bottom:8px;
    font-size:13px;
    font-weight:1100;
    color:var(--mx-ink);
  }
  .mx-filter-group .form-control,
  .mx-filter-group .form-select{
    border-radius:14px;
    font-weight:900;
  }
  .mx-rangebox{
    border:1px solid var(--mx-line);
    border-radius:16px;
    padding:10px;
    background:rgba(248,250,252,.96);
  }
  .mx-range-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .mx-range-top span{
    font-size:11px;
    font-weight:1100;
    color:var(--mx-muted);
  }
  .mx-range-sliders{display:grid;gap:8px;margin-top:10px}
  .mx-range-sliders input[type="range"]{width:100%}
  .mx-checks{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
  .mx-check{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:8px 10px;
    border-radius:999px;
    border:1px solid var(--mx-line);
    background:#fff;
    font-size:11px;
    font-weight:1100;
    color:var(--mx-ink);
  }
  .mx-check input{margin:0}





body.modal-open{
  overflow: hidden !important;
  padding-right: 0 !important;
}

.modal.mx-filter-modal{
  overflow: hidden !important;
}

.modal.mx-filter-modal .modal-dialog{
  max-width: 760px;
}

.modal.mx-filter-modal .modal-content{
  overflow: hidden !important;
  max-height: calc(100vh - 20px);
}

.modal.mx-filter-modal .modal-body{
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: calc(100vh - 120px);
}

@media (max-width: 991.98px){
  .modal.mx-filter-modal .modal-dialog{
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    margin: 10px auto !important;
  }

  .modal.mx-filter-modal .modal-content{
    max-height: calc(100vh - 20px) !important;
  }

  .modal.mx-filter-modal .modal-body{
    max-height: calc(100vh - 110px) !important;
  }
}





  .mx-bottombar,
  .mobile-bottom-nav,
  .bottom-mobile-nav,
  .app-bottom-nav{
    background:rgba(255,255,255,.96) !important;
    backdrop-filter:blur(18px) !important;
    -webkit-backdrop-filter:blur(18px) !important;
    border-top:1px solid rgba(15,23,42,.10) !important;
    box-shadow:0 -10px 24px rgba(15,23,42,.10) !important;
  }
  .mx-bottombar a,
  .mobile-bottom-nav a,
  .bottom-mobile-nav a,
  .app-bottom-nav a,
  .mx-bottombar span,
  .mobile-bottom-nav span,
  .bottom-mobile-nav span,
  .app-bottom-nav span,
  .mx-bottombar small,
  .mobile-bottom-nav small,
  .bottom-mobile-nav small,
  .app-bottom-nav small{
    color:#0f172a !important;
    opacity:1 !important;
  }
  .mx-bottombar .active,
  .mobile-bottom-nav .active,
  .bottom-mobile-nav .active,
  .app-bottom-nav .active{
    color:#0f172a !important;
  }
  .mx-bottombar .active i,
  .mobile-bottom-nav .active i,
  .bottom-mobile-nav .active i,
  .app-bottom-nav .active i{
    color:var(--mx-blue) !important;
  }

  @media (max-width:1399.98px){
    .mx-products{grid-template-columns:repeat(3,minmax(0,1fr))}
  }

  @media (max-width:1199.98px){
    .mx-grid{grid-template-columns:238px minmax(0,1fr) 300px}
    .mx-products{grid-template-columns:repeat(3,minmax(0,1fr))}
    .mx-benefit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  }

  @media (max-width:991.98px){
    .mx-shop{padding:1px 0 12px}
    .mx-shop-shell{padding-inline:1px}
    .mx-grid{grid-template-columns:minmax(0,1fr)}
    .mx-side{display:none}
    .mx-rightcol{
      display:flex !important;
      flex-direction:column !important;
      align-items:stretch !important;
      width:100% !important;
      gap:8px !important;
      order:3;
    }
    .mx-rightcol > .mx-card,
    #mxDocBox,
    #mxReviewsBox{
      width:100% !important;
      min-width:0 !important;
    }

    .mx-main,.mx-rightcol{padding-inline:1px}


    .mx-countdown{
      gap:5px;
      margin-bottom:8px;
    }
    .mx-countdown > div{
      min-width:46px;
      padding:6px 6px;
      border-radius:11px;
    }
    .mx-countdown b{font-size:11px}
    .mx-countdown span{font-size:8px}

    .mx-benefit-grid{
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:7px;
      margin:7px 0 3px;
    }
    .mx-benefit{padding:8px 9px;border-radius:14px}
    .mx-benefit .ico{width:30px;height:30px;border-radius:10px}
    .mx-benefit b{font-size:11px}
    .mx-benefit span{font-size:9.8px}

    .mx-cat-tiles{
      display:flex;
      gap:8px;
      overflow-x:auto;
      padding-bottom:2px;
      margin:8px 0 8px;
      -ms-overflow-style:none;
      scrollbar-width:none;
    }
    .mx-cat-tiles::-webkit-scrollbar{display:none}
    .mx-cat-tile{
      flex:0 0 auto;
      min-width:132px;
      max-width:170px;
      padding:9px 10px;
      gap:8px;
      border-radius:16px;
    }
    .mx-cat-ico{width:36px;height:36px;border-radius:12px}
    .mx-cat-txt b{font-size:11.8px}
    .mx-cat-txt span{display:none}







.mx-toolbar-wrap{
  margin:2px 0 8px;
  padding:6px;
  border-radius:18px;
}

.mx-toolbar{
  grid-template-columns:1fr;
  gap:6px;
}

.mx-tabs{
  flex-wrap:nowrap;
  overflow-x:auto;
  padding-bottom:2px;
  -ms-overflow-style:none;
  scrollbar-width:none;
  gap:6px;
}

.mx-tabs::-webkit-scrollbar{
  display:none;
}

.mx-tab{
  flex:0 0 auto;
  padding:9px 11px;
  font-size:8.6px;
  border-radius:12px;
  box-shadow:0 8px 18px rgba(15,23,42,.05);
}

.mx-tabs-note{
  padding:8px 4px 0;
  font-size:10px;
}




    .mx-toolbar-search-row{
      margin-top:6px;
      grid-template-columns:minmax(0,1fr) auto;
      gap:8px;
    }

    .mx-searchbar input{padding:1px 4px 1px 27px;font-size:12px}
    .mx-filter-open{padding:8px 9px;border-radius:11px;font-size:11px}
    .mx-sort-mini{gap:6px;padding-top:7px}
    .mx-sort-chip{padding:7px 9px;font-size:10.1px;border-radius:999px}

    .mx-products{
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:6px;
    }
    .mx-pcard{border-radius:16px}
    .mx-pimgwrap{margin:6px 6px 0;border-radius:14px}
    .mx-pimg{height:148px}
    .mx-tag{font-size:9px;padding:4px 7px}
    .mx-fav-btn{width:31px;height:31px;border-radius:11px}
    .mx-pbody{padding:7px 7px 8px;gap:6px}
    .mx-pmeta-top{align-items:flex-start;flex-direction:column}
    .mx-rating-line{width:100%}
    .mx-rating-stars{font-size:10px}
    .mx-meta-pill{font-size:8.8px;padding:4px 6px}
    .mx-ptitle{font-size:11.4px;min-height:28px}
    .mx-pdesc{display:none}
    .mx-pmini{display:flex;gap:5px}
    .mx-mini-chip{font-size:8.8px;padding:4px 6px}
    .mx-pprice{
      padding:7px 8px;
      border-radius:13px;
      align-items:flex-start;
      flex-direction:column;
    }
    .mx-pprice-main b{font-size:12.4px}
    .mx-pprice-main s{font-size:9.4px}
    .mx-price-drop{font-size:8.3px;padding:4px 6px}
    .mx-pbottom{
      grid-template-columns:minmax(0,1fr) 34px;
      gap:6px;
    }
    .mx-pcta{
      font-size:10.2px;
      padding:8px 6px;
      border-radius:12px;
    }
    .mx-pdetail{width:34px;height:34px;border-radius:12px}

    .mx-campaign-grid{grid-template-columns:1fr}
    .mx-campaign{min-height:180px}
    .mx-campaign-title{font-size:19px}
    .mx-campaign-sub{font-size:11.4px}
    .mx-campaign-actions .btn{
      padding:7px 9px;
      font-size:10.4px;
      border-radius:11px;
    }
    .mx-head-link{
      padding:6px 8px;
      font-size:10px;
      border-radius:10px;
    }

    .mx-rec-item{flex:0 0 calc(50% - 6px)}
    .mx-rec-card{border-radius:16px}
    .mx-rec-imgwrap{margin:6px 6px 0;border-radius:14px}
    .mx-rec-img{height:150px}
    .mx-rec-content{padding:9px;gap:7px}
    .mx-rec-name{font-size:11.8px;min-height:28px}
    .mx-rec-desc{display:none}
    .mx-rec-rating{gap:6px}
    .mx-rec-stars{font-size:10px}
    .mx-rec-pill{font-size:8.7px;padding:4px 6px}
    .mx-rec-meta{display:flex;gap:5px}
    .mx-rec-mini{font-size:8.5px;padding:4px 6px}
    .mx-rec-price{padding:7px 8px;border-radius:13px}
    .mx-rec-price b{font-size:12.4px}
    .mx-rec-actions{
      grid-template-columns:34px minmax(0,1fr);
      gap:6px;
    }
    .mx-rec-detail{width:34px;height:34px;border-radius:12px}
    .mx-rec-actions .btn{
      font-size:10.1px;
      border-radius:12px;
      padding:8px 6px;
    }

    .mx-assist-grid{grid-template-columns:1fr}
    .mx-assist-card{border-radius:18px;padding:10px}
    .mx-assist-icon{width:34px;height:34px;border-radius:12px}
    .mx-assist-card b{font-size:12.4px}
    .mx-assist-card span{font-size:10.8px}
    .mx-assist-actions .btn{
      padding:7px 8px;
      font-size:10px;
      border-radius:10px;
    }

    .mx-expert-top,.mx-expert-body{padding:10px}
    .mx-expert-avatar{width:40px;height:40px;border-radius:13px}
    .mx-expert-badge{font-size:10px;padding:6px 8px}
    .mx-expert-metrics{gap:6px}
    .mx-expert-metric{padding:8px 6px;border-radius:14px}
    .mx-expert-note{font-size:11.1px;padding:9px;border-radius:14px}
    .mx-expert-tags{gap:6px}
    .mx-expert-tag{font-size:9.6px;padding:6px 8px}

    .mx-rv-list{padding:8px}
    .mx-rv-card{
      grid-template-columns:78px minmax(0,1fr);
      padding:8px;
      border-radius:15px;
    }
    .mx-rv-thumb{width:78px;height:78px;border-radius:15px}
    .mx-rv-name{font-size:11.7px}
    .mx-rv-pill{font-size:9.4px;padding:4px 7px}
    .mx-rv-price{font-size:12px}
    .mx-rv-actions .btn{font-size:9.8px;padding:7px 7px}
    .mx-rv-go{width:34px;height:34px;border-radius:12px}

    .mx-review-wrap{padding:8px}
    .mx-review-topline{
      flex-direction:column;
      align-items:flex-start;
      gap:8px;
    }
    .mx-review-score{
      width:100%;
      padding:8px 10px;
      border-radius:14px;
    }
    .mx-review-score b{font-size:19px}
    .mx-review-summary-chip{
      font-size:10px;
      padding:7px 8px;
    }
    .mx-review-card{padding:10px;border-radius:15px}
    .mx-review-text{font-size:11.3px}
    .mx-review-badge{font-size:9.8px;padding:5px 7px}

    .mx-filter-grid{grid-template-columns:1fr}
  }

  @media (max-width:590.98px){
    .mx-hero-mobile .mx-hero-title{
      font-size:16px !important;
      line-height:1.08 !important;
      letter-spacing:-0.3px !important;
      margin-bottom:6px !important;
      max-width:100% !important;
    }

    .mx-hero-mobile-sub{
      font-size:11px !important;
    }

    .mx-hero-mobile .mx-hero-sub{
      font-size:12px !important;
      line-height:1.3 !important;
    }
    .mx-hero-mobile-title{
      font-size:15px !important;
      line-height:1.08 !important;
      letter-spacing:-0.3px !important;
      margin-bottom:6px !important;
      max-width:100% !important;
    }

    .mx-sort-chip{font-size:9.8px;padding:7px 8px}
    .mx-pimg{height:142px}
    .mx-pcta{font-size:10px}
    .mx-pprice-main b{font-size:12px}
    .mx-price-drop{font-size:8.1px}
    .mx-rec-img{height:142px}
    .mx-rec-price b{font-size:12px}
    .mx-rec-actions .btn{font-size:9.9px}
  }























































/* SEPET CSS KODLARI TÜMÜ */


    .mx-cartDrawer { --mx-radius: 16px; }
  .mx-muted { color: rgba(0,0,0,.55); }

  .mx-offBody {
    display:flex;
    flex-direction:column;
    height:100%;
    overflow:hidden !important;
    padding-bottom:0 !important;
    min-height:0 !important;
  }

  .mx-drawerFlexRoot{
    height:100%;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    min-height:0;
  }

  .mx-itemsScroll{
    flex:1 1 auto;
    overflow:auto;
    padding: 0 2px 12px 0;
    min-height:0;
  }

  .mx-fixedFooter{
    flex:0 0 auto;
    padding: 0.75rem;
    background: transparent;
    border-top: 1px solid rgba(0,0,0,.06);
  }

  .mx-cartItem{
    border: 1px solid rgba(0,0,0,.06);
    border-radius: var(--mx-radius);
    background:#fff;
    box-shadow: 0 6px 18px rgba(0,0,0,.05);
    overflow:hidden;
  }

  .mx-cartImg{
    width: 96px; height: 96px;
    object-fit: cover;
    border-radius: 16px;
    border: 1px solid rgba(0,0,0,.08);
    background:#f8f9fa;
    flex: 0 0 auto;
  }

  .mx-title{
    font-weight: 900;
    line-height: 1.2;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  .mx-chip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:4px 10px;
    border-radius:999px;
    border:1px solid rgba(0,0,0,.08);
    background:#fff;
    font-size:12px;
    font-weight:800;
    white-space:nowrap;
  }

  .mx-chip-primary{
    background: rgba(13,110,253,.08);
    border-color: rgba(13,110,253,.15);
    color:#0d6efd;
  }
  .mx-chip-success{
    background: rgba(25,135,84,.10);
    border-color: rgba(25,135,84,.18);
    color:#198754;
  }
  .mx-chip-warning{
    background: rgba(255,193,7,.16);
    border-color: rgba(255,193,7,.28);
    color:#8a6d00;
  }

  .mx-qtyRow{
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
  }

  .mx-qty{
    display:flex; align-items:center; gap:8px;
    background:#f8f9fa;
    border:1px solid rgba(0,0,0,.08);
    border-radius: 14px;
    padding:6px 8px;
  }
  .mx-qty button{
    width:34px; height:34px;
    border-radius: 12px;
  }
  .mx-qty input{
    width:44px;
    text-align:center;
    border:0;
    background:transparent;
    font-weight:900;
    outline:none;
  }

  .mx-subtotalBox{
    border: 1px dashed rgba(0,0,0,.12);
    background:#f8f9fa;
    border-radius: var(--mx-radius);
    padding: 12px 14px;
  }

  .mx-shipNote{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 12px;
    border-radius: var(--mx-radius);
    border: 1px solid rgba(0,0,0,.06);
    background:#fff;
    font-weight:800;
  }
  .mx-shipIcon{
    width:34px;height:34px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    background: rgba(25,135,84,.10);
    color:#198754;
    flex:0 0 auto;
  }

  .mx-empty{
    border: 1px solid rgba(0,0,0,.06);
    border-radius: var(--mx-radius);
    background: linear-gradient(180deg,#fff,#f8f9fa);
    box-shadow: 0 8px 26px rgba(0,0,0,.06);
    padding: 18px;
    text-align:center;
  }
  .mx-emptyIcon{
    width:56px;height:56px;
    border-radius: 18px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    background: rgba(13,110,253,.10);
    color:#0d6efd;
    font-size: 26px;
    margin-bottom: 10px;
  }

  .mx-undoWrap{
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin-top: 10px;
  }
  .mx-undoToast{
    border-radius: var(--mx-radius);
    border: 1px solid rgba(0,0,0,.08);
    background:#fff;
    box-shadow: 0 10px 28px rgba(0,0,0,.10);
    padding: 10px 12px;
    display:none;
  }
  .mx-undoToast.show{ display:block; }

  .mx-progressWrap{
    border:1px solid rgba(0,0,0,.06);
    background:#fff;
    border-radius: var(--mx-radius);
    padding: 10px 12px;
  }
  .mx-progressBar{
    height: 10px;
    border-radius: 999px;
    background: rgba(13,110,253,.10);
    overflow:hidden;
  }
  .mx-progressBar > div{
    height:100%;
    width:0%;
    background: rgba(13,110,253,.55);
    border-radius: 999px;
    transition: width .2s ease;
  }

  .mx-itemsScroll::-webkit-scrollbar { width: 10px; }
  .mx-itemsScroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); border-radius: 10px; }
  .mx-itemsScroll::-webkit-scrollbar-track { background: transparent; }


  @media (max-width: 767.98px){

    .mx-cartDrawer{
      --mx-radius: 14px;
    }

    .mx-offBody{
      padding-top: 4px !important;
    }

    .mx-itemsScroll{
      padding: 0 1px 8px 0;
    }

    .mx-cartItem{
      border-radius: 14px;
      box-shadow: 0 4px 14px rgba(0,0,0,.05);
    }

    .mx-cartItem.p-3{
      padding: 10px !important;
    }

    .mx-cartImg{
      width: 74px;
      height: 74px;
      border-radius: 12px;
    }

    .mx-title{
      font-size: 13px;
      line-height: 1.18;
    }

    .mx-cartItem .small{
      font-size: 11px;
      line-height: 1.3;
    }

    .mx-chip{
      padding: 4px 8px;
      border-radius: 999px;
      font-size: 10px;
      gap: 5px;
    }

    .mx-qtyRow{
      gap: 8px;
      margin-top: 10px !important;
    }

    .mx-qty{
      gap: 6px;
      padding: 4px 6px;
      border-radius: 12px;
    }

    .mx-qty button{
      width: 30px;
      height: 30px;
      border-radius: 10px;
      padding: 0;
      font-size: 14px;
      line-height: 1;
    }

    .mx-qty input{
      width: 32px;
      font-size: 12px;
    }

    .mx-qtyRow .btn-outline-danger{
      padding: 8px 10px !important;
      font-size: 11px;
      border-radius: 12px;
      font-weight: 800;
    }

    .mx-fixedFooter{
      padding: 10px 0 0;
      border-top: 1px solid rgba(0,0,0,.05);
    }

    .mx-subtotalBox{
      padding: 10px 12px;
      border-radius: 14px;
    }

    .mx-subtotalBox .fw-semibold{
      font-size: 12px;
    }

    .mx-subtotalBox .fs-5{
      font-size: 17px !important;
      line-height: 1;
    }

    .mx-progressWrap{
      padding: 9px 10px;
      border-radius: 14px;
    }

    .mx-progressWrap .small{
      font-size: 10.5px !important;
      line-height: 1.25;
    }

    .mx-progressBar{
      height: 8px;
    }

    .mx-shipNote{
      padding: 9px 10px;
      border-radius: 14px;
      gap: 8px;
      align-items: flex-start;
    }

    .mx-shipIcon{
      width: 30px;
      height: 30px;
      border-radius: 10px;
    }

    .mx-shipNote > div:last-child{
      font-size: 11.5px;
      line-height: 1.28;
    }

    .mx-shipNote .small{
      font-size: 10px !important;
      line-height: 1.25;
    }

    #mxActions{
      gap: 8px !important;
    }

    #mxActions .btn{
      min-height: 42px;
      border-radius: 12px;
      font-size: 12px;
      font-weight: 900;
      padding: 9px 10px;
      line-height: 1.15;
    }

    .offcanvas-header{
      padding-bottom: 8px;
    }

    .offcanvas-title{
      font-size: 17px;
      line-height: 1.1;
    }

    #mxCartCountBadge{
      font-size: 11px;
      padding: 5px 7px;
    }

    .mx-empty{
      padding: 14px;
      border-radius: 14px;
    }

    .mx-emptyIcon{
      width: 48px;
      height: 48px;
      border-radius: 14px;
      font-size: 22px;
      margin-bottom: 8px;
    }

    .mx-undoToast{
      border-radius: 14px;
      padding: 9px 10px;
    }

    .mx-undoToast .btn{
      font-size: 10.5px;
      padding: 6px 8px;
      border-radius: 10px;
    }
  }
  @media (max-width: 767.98px){

    .mx-cartItem .d-flex.gap-3.align-items-start{
      gap: 9px !important;
      align-items: flex-start !important;
    }

    .mx-cartItem .flex-grow-1{
      min-width: 0;
    }

    .mx-title a{
      color: #0f172a !important;
    }

    .mx-title{
      font-size: 12.8px;
      line-height: 1.16;
      margin-bottom: 2px;
    }

    .mx-cartItem .small.mx-muted.mt-1{
      margin-top: 2px !important;
      font-size: 10.4px !important;
      opacity: .88;
    }

    .mx-cartItem .d-flex.flex-wrap.gap-2.mt-2.align-items-center{
      gap: 6px !important;
      margin-top: 7px !important;
    }

    .mx-chip.mx-chip-primary{
      background: linear-gradient(180deg, rgba(13,110,253,.07), rgba(13,110,253,.03));
      border-color: rgba(13,110,253,.12);
    }

    .mx-chip .fw-bold{
      font-size: 10.6px;
      line-height: 1;
    }

    .mx-qtyRow{
      display:grid;
      grid-template-columns: minmax(0,1fr) auto;
      align-items:center;
    }

    .mx-qty{
      justify-content: space-between;
      width: 100%;
      max-width: 132px;
      background: linear-gradient(180deg,#f8fafc,#f1f5f9);
    }

    .mx-qtyRow .btn-outline-danger{
      min-width: 74px;
      justify-content: center;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: #fff;
    }

    .mx-cartItem [data-role="err"]{
      font-size: 10px;
      line-height: 1.2;
      margin-top: 6px !important;
    }
  }
  .mx-cartHead{
    padding: 10px 2px 12px;
    border-bottom: 1px solid rgba(15,23,42,.06);
  }

  .mx-cartHeadBox{
    width: calc(100% - 25px) !important;
    margin: 0 auto;
    border: 1px solid rgba(15,23,42,.06);
    border-radius: 16px;
    background:
    radial-gradient(220px 90px at 0% 0%, rgba(37,99,235,.08), transparent 58%),
    radial-gradient(220px 90px at 100% 100%, rgba(124,58,237,.06), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
    box-shadow: 0 8px 22px rgba(15,23,42,.05);
    padding: 12px;
    box-sizing: border-box;
  }
  .mx-cartHeadMini{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    width:100%;
  }

  .mx-cartHeadMiniLeft{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
  }

  .mx-cartHeadMiniIcon{
    width:36px;
    height:36px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    background:linear-gradient(135deg, rgba(37,99,235,.10), rgba(124,58,237,.08));
    color:#2563eb;
    border:1px solid rgba(37,99,235,.10);
  }

  .mx-cartHeadMiniIcon i{
    font-size:15px;
    line-height:1;
  }

  .mx-cartHeadMiniText{
    min-width:0;
  }

  .mx-cartHeadMiniLabel{
    font-size:12.6px;
    line-height:1.1;
    font-weight:1100;
    color:#0f172a;
    letter-spacing:-.2px;
  }

  .mx-cartHeadMiniSub{
    margin-top:3px;
    font-size:10.5px;
    line-height:1.3;
    font-weight:900;
    color:rgba(15,23,42,.56);
  }

  @media (max-width: 767.98px){
    .mx-cartHeadMini{
      gap:8px;
    }

    .mx-cartHeadMiniLeft{
      gap:8px;
    }

    .mx-cartHeadMiniIcon{
      width:32px;
      height:32px;
      border-radius:11px;
    }

    .mx-cartHeadMiniIcon i{
      font-size:14px;
    }

    .mx-cartHeadMiniLabel{
      font-size:11.8px;
    }

    .mx-cartHeadMiniSub{
      font-size:9.8px;
    }
  }

  .mx-cartCountBadge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:24px;
    height:24px;
    padding:0 8px;
    border-radius:999px;
    background: linear-gradient(135deg,#2563eb,#1d4ed8);
    color:#fff;
    font-size:11px;
    line-height:1;
    font-weight:1100;
    box-shadow: 0 8px 18px rgba(37,99,235,.22);
  }
  @media (max-width: 767.98px){

    .mx-cartHead{
      padding: 8px 2px 10px;
    }

    .mx-cartHeadBox{
      padding: 10px;
      border-radius: 14px;
    }

    .mx-cartHeadTitleWrap{
      gap:8px;
    }

    .mx-cartHeadIcon{
      width:36px;
      height:36px;
      border-radius:12px;
    }

    .mx-cartHeadIcon i{
      font-size:16px;
    }

    .mx-cartHeadText .offcanvas-title{
      font-size:16px;
    }

    .mx-cartHeadSub{
      font-size:10px;
      line-height:1.3;
      margin-top:3px;
    }

    .mx-cartCountBadge{
      min-width:22px;
      height:22px;
      font-size:10px;
      padding:0 7px;
    }
  }


  .mx-qtyControl{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    width:100%;
  }

  .mx-removeBtn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    min-height:38px;
    padding:8px 12px;
    border-radius:12px;
    border:1px solid rgba(220,38,38,.14);
    background:#fff;
    color:#dc2626;
    font-size:11px;
    line-height:1;
    font-weight:1000;
    white-space:nowrap;
    box-shadow:0 6px 14px rgba(15,23,42,.04);
    transition:all .16s ease;
  }

  .mx-removeBtn:hover{
    background:rgba(220,38,38,.05);
    border-color:rgba(220,38,38,.22);
  }

  .mx-removeBtn i{
    font-size:13px;
    line-height:1;
  }

  @media (max-width: 767.98px){

    .mx-qtyControl{
      gap:8px;
    }

    .mx-removeBtn{
      min-height:34px;
      padding:7px 10px;
      border-radius:11px;
      font-size:10.5px;
    }

    .mx-removeBtn i{
      font-size:12px;
    }
  }


  .mx-undoToast{
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.08);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(6px);
  box-shadow: 0 12px 30px rgba(15,23,42,.12);
  padding: 10px 12px;
  display:none;
}

.mx-undoToast.show{ display:block; }

.mx-undoContent{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.mx-undoLeft{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.mx-undoIcon{
  width:34px;
  height:34px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(37,99,235,.10);
  color:#2563eb;
  flex:0 0 auto;
}

.mx-undoIcon i{
  font-size:15px;
}

.mx-undoText{
  min-width:0;
}

.mx-undoTitle{
  font-size:12px;
  font-weight:1000;
  color:#0f172a;
}

.mx-undoSub{
  font-size:10px;
  font-weight:800;
  color:rgba(15,23,42,.55);
  margin-top:2px;
}

.mx-undoActions{
  display:flex;
  align-items:center;
  gap:6px;
}

.mx-undoBtn{
  border-radius:10px;
  border:1px solid rgba(37,99,235,.18);
  background:rgba(37,99,235,.08);
  color:#2563eb;
  font-size:10.5px;
  font-weight:1000;
  padding:6px 10px;
  transition:.15s;
}

.mx-undoBtn:hover{
  background:rgba(37,99,235,.14);
}

.mx-undoClose{
  border:none;
  background:transparent;
  font-size:14px;
  color:#64748b;
  padding:4px;
}

@media (max-width: 767.98px){

  .mx-undoToast{
    padding: 8px 10px;
    border-radius: 12px;
  }

  .mx-undoIcon{
    width:30px;
    height:30px;
  }

  .mx-undoIcon i{
    font-size:13px;
  }

  .mx-undoTitle{
    font-size:11.5px;
  }

  .mx-undoSub{
    font-size:9.5px;
  }

  .mx-undoBtn{
    padding:5px 8px;
    font-size:10px;
  }
}





























/* Sepet Dosyası index.php Dosya Css kodları */
 .mx-cartHero{
    border:1px solid rgba(15,23,42,.08);
    border-radius:26px;
    background:
      radial-gradient(320px 120px at 0% 0%, rgba(37,99,235,.08), transparent 58%),
      radial-gradient(260px 100px at 100% 100%, rgba(124,58,237,.06), transparent 58%),
      linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,250,252,.97));
    box-shadow:0 14px 34px rgba(15,23,42,.06);
    padding:16px;
  }

  .mx-cartHeroHead{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    flex-wrap:wrap;
  }

  .mx-cartHeroTitleWrap{
    display:flex;
    align-items:flex-start;
    gap:12px;
    min-width:0;
  }

  .mx-cartHeroIcon{
    width:50px;
    height:50px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    background:linear-gradient(135deg, rgba(37,99,235,.12), rgba(124,58,237,.10));
    color:#2563eb;
    border:1px solid rgba(37,99,235,.10);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
  }

  .mx-cartHeroIcon i{
    font-size:22px;
    line-height:1;
  }

  .mx-cartHeroKicker{
    font-size:11px;
    line-height:1;
    font-weight:1100;
    color:#64748b;
    margin-bottom:6px;
    letter-spacing:.1px;
  }

  .mx-cartHeroTitle{
    font-size:28px;
    line-height:1.05;
    font-weight:1100;
    color:#0f172a;
    letter-spacing:-.6px;
  }

  .mx-cartHeroSub{
    font-size:12.4px;
    line-height:1.45;
    font-weight:900;
    color:#64748b;
    max-width:60ch;
  }

  .mx-cartHeroActions{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
  }

  .mx-btn-soft{
    border:1px solid rgba(15,23,42,.10);
    background:#fff;
    color:#0f172a;
    border-radius:14px;
    padding:10px 14px;
    font-size:12px;
    font-weight:1100;
    box-shadow:0 8px 18px rgba(15,23,42,.04);
  }

  .mx-btn-soft:hover{
    background:#f8fafc;
    color:#0f172a;
  }

  .mx-btn-danger-soft{
    border:1px solid rgba(220,38,38,.14);
    background:#fff;
    color:#dc2626;
    border-radius:14px;
    padding:10px 14px;
    font-size:12px;
    font-weight:1100;
    box-shadow:0 8px 18px rgba(15,23,42,.04);
  }

  .mx-btn-danger-soft:hover{
    background:rgba(220,38,38,.05);
    color:#dc2626;
  }

  .mx-cartStats{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
    margin-top:14px;
  }

  .mx-cartStatCard{
    border:1px solid rgba(15,23,42,.08);
    border-radius:20px;
    padding:14px;
    background:#fff;
    box-shadow:0 8px 20px rgba(15,23,42,.04);
    min-width:0;
  }

  .mx-cartStatTop{
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:10px;
  }

  .mx-cartStatIcon{
    width:34px;
    height:34px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    font-size:15px;
  }

  .mx-cartStatLabel{
    font-size:11px;
    line-height:1.1;
    font-weight:1100;
    color:#64748b;
  }

  .mx-cartStatValue{
    font-size:24px;
    line-height:1;
    font-weight:1100;
    color:#0f172a;
    letter-spacing:-.4px;
  }

  .mx-cartStatSub{
    margin-top:8px;
    font-size:10.6px;
    line-height:1.35;
    font-weight:900;
    color:#64748b;
  }

  .mx-cartStatCard.is-neutral .mx-cartStatIcon{
    background:rgba(15,23,42,.06);
    color:#0f172a;
  }

  .mx-cartStatCard.is-primary .mx-cartStatIcon{
    background:rgba(37,99,235,.10);
    color:#2563eb;
  }

  .mx-cartStatCard.is-success .mx-cartStatIcon{
    background:rgba(25,135,84,.10);
    color:#198754;
  }

  .mx-cartStatCard.is-warning .mx-cartStatIcon{
    background:rgba(245,158,11,.14);
    color:#a16207;
  }

  @media (max-width: 991.98px){
    .mx-cartStats{
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:10px;
    }
  }

  @media (max-width: 767.98px){
    .mx-cartHero{
      padding:12px;
      border-radius:20px;
    }

    .mx-cartHeroHead{
      gap:10px;
    }

    .mx-cartHeroTitleWrap{
      gap:10px;
    }

    .mx-cartHeroIcon{
      width:40px;
      height:40px;
      border-radius:14px;
    }

    .mx-cartHeroIcon i{
      font-size:18px;
    }

    .mx-cartHeroKicker{
      font-size:9.8px;
      margin-bottom:4px;
    }

    .mx-cartHeroTitle{
      font-size:20px;
      line-height:1.04;
      margin-bottom:4px !important;
    }

    .mx-cartHeroSub{
      font-size:10.5px;
      line-height:1.35;
    }

    .mx-cartHeroActions{
      width:100%;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:8px;
    }

    .mx-btn-soft,
    .mx-btn-danger-soft{
      width:100%;
      justify-content:center;
      text-align:center;
      padding:9px 10px;
      font-size:10.6px;
      border-radius:12px;
    }

    .mx-cartStats{
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:8px;
      margin-top:12px;
    }

    .mx-cartStatCard{
      padding:10px;
      border-radius:16px;
    }

    .mx-cartStatTop{
      gap:6px;
      margin-bottom:8px;
    }

    .mx-cartStatIcon{
      width:28px;
      height:28px;
      border-radius:10px;
      font-size:13px;
    }

    .mx-cartStatLabel{
      font-size:9.8px;
    }

    .mx-cartStatValue{
      font-size:17px;
    }

    .mx-cartStatSub{
      margin-top:6px;
      font-size:9.2px;
      line-height:1.28;
    }
  }




































  .mx-cartList{
    display:grid;
    gap:14px;
  }

  .mx-cartItemCard{
    border:1px solid rgba(15,23,42,.08);
    border-radius:22px;
    background:
      radial-gradient(220px 80px at 0% 0%, rgba(37,99,235,.05), transparent 58%),
      linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,250,252,.97));
    box-shadow:0 10px 24px rgba(15,23,42,.05);
    overflow:hidden;
  }

  .mx-cartItemBody{
    padding:16px;
  }

  .mx-cartThumbWrap{
    width:96px;
    flex:0 0 auto;
  }

  .mx-cartThumb{
    width:96px;
    height:96px;
    border-radius:18px;
    overflow:hidden;
    border:1px solid rgba(15,23,42,.08);
    background:#f8fafc;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
  }

  .mx-cartThumb img{
    width:100%;
    height:100%;
    object-fit:cover;
  }

  .mx-cartThumbEmpty{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:11px;
    font-weight:900;
    color:#64748b;
  }

  .mx-cartName{
    font-size:15px;
    line-height:1.24;
    font-weight:1100;
    color:#0f172a;
    text-decoration:none;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  .mx-cartName:hover{
    color:#2563eb;
  }

  .mx-cartMeta{
    margin-top:6px;
    display:flex;
    gap:8px;
    flex-wrap:wrap;
  }

  .mx-cartMetaChip{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:5px 9px;
    border-radius:999px;
    border:1px solid rgba(15,23,42,.08);
    background:#fff;
    font-size:10.4px;
    font-weight:1000;
    color:#475569;
    white-space:nowrap;
  }

  .mx-cartMetaChip.stock-ok{
    background:rgba(25,135,84,.08);
    border-color:rgba(25,135,84,.14);
    color:#198754;
  }

  .mx-cartMetaChip.stock-low{
    background:rgba(245,158,11,.12);
    border-color:rgba(245,158,11,.18);
    color:#a16207;
  }

  .mx-cartControlBox{
    margin-top:12px;
    padding:10px 12px;
    border:1px solid rgba(15,23,42,.08);
    border-radius:18px;
    background:linear-gradient(180deg, rgba(248,250,252,.95), rgba(255,255,255,.98));
  }

  .mx-cartQtyLabel{
    font-size:10.5px;
    line-height:1;
    font-weight:1100;
    color:#64748b;
    margin-bottom:6px;
  }

  .mx-cartQtyInput{
    border-radius:14px;
    min-height:42px;
    font-weight:1000;
    border:1px solid rgba(15,23,42,.10);
    background:#fff;
    box-shadow:none;
  }

  .mx-cartPriceBox{
    text-align:right;
  }

  .mx-cartPriceLabel{
    font-size:10.6px;
    line-height:1;
    font-weight:1100;
    color:#64748b;
    margin-bottom:6px;
  }

  .mx-cartPriceValue{
    font-size:18px;
    line-height:1;
    font-weight:1100;
    color:#0f172a;
    letter-spacing:-.3px;
  }

  .mx-cartRemoveBtn{
    border-radius:14px;
    min-height:42px;
    padding:8px 12px;
    font-size:11px;
    font-weight:1100;
    border:1px solid rgba(15,23,42,.10);
    background:#fff;
    color:#334155;
    box-shadow:0 8px 18px rgba(15,23,42,.04);
  }

  .mx-cartRemoveBtn:hover{
    background:rgba(220,38,38,.05);
    color:#dc2626;
    border-color:rgba(220,38,38,.16);
  }

  .mx-cartBottomActions{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
    margin-top:14px;
  }

  .mx-cartBottomActions .btn{
    border-radius:14px;
    min-height:44px;
    padding:10px 14px;
    font-size:12px;
    font-weight:1100;
  }

  @media (max-width: 767.98px){
    .mx-cartList{
      gap:10px;
    }

    .mx-cartItemCard{
      border-radius:16px;
    }

    .mx-cartItemBody{
      padding:10px;
    }

    .mx-cartThumbWrap{
      width:76px;
    }

    .mx-cartThumb{
      width:76px;
      height:76px;
      border-radius:14px;
    }

    .mx-cartName{
      font-size:12.8px;
      line-height:1.18;
    }

    .mx-cartMeta{
      margin-top:5px;
      gap:6px;
    }

    .mx-cartMetaChip{
      padding:4px 7px;
      font-size:9.4px;
    }

    .mx-cartControlBox{
      margin-top:9px;
      padding:8px;
      border-radius:14px;
    }

    .mx-cartQtyLabel,
    .mx-cartPriceLabel{
      font-size:9.2px;
      margin-bottom:5px;
    }

    .mx-cartQtyInput{
      min-height:36px;
      border-radius:12px;
      font-size:12px;
      padding:8px 10px;
    }

    .mx-cartPriceValue{
      font-size:14px;
    }

    .mx-cartRemoveBtn{
      min-height:36px;
      border-radius:12px;
      font-size:10px;
      padding:7px 10px;
    }

    .mx-cartBottomActions{
      gap:8px;
      margin-top:10px;
    }

    .mx-cartBottomActions .btn{
      min-height:38px;
      border-radius:12px;
      font-size:10.6px;
      padding:8px 10px;
    }
  }














































  .mx-summaryCard{
    border:1px solid rgba(15,23,42,.08);
    border-radius:24px;
    background:
      radial-gradient(260px 100px at 0% 0%, rgba(37,99,235,.06), transparent 58%),
      radial-gradient(220px 90px at 100% 100%, rgba(124,58,237,.05), transparent 58%),
      linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,250,252,.97));
    box-shadow:0 12px 28px rgba(15,23,42,.06);
    overflow:hidden;
  }

  .mx-summaryBody{
    padding:18px;
  }

  .mx-summaryTitle{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:14px;
  }

  .mx-summaryTitleIcon{
    width:40px;
    height:40px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 auto;
    background:linear-gradient(135deg, rgba(37,99,235,.12), rgba(124,58,237,.10));
    color:#2563eb;
    border:1px solid rgba(37,99,235,.10);
  }

  .mx-summaryTitleIcon i{
    font-size:18px;
    line-height:1;
  }

  .mx-summaryTitleText h5{
    margin:0;
    font-size:18px;
    line-height:1.05;
    font-weight:1100;
    color:#0f172a;
    letter-spacing:-.3px;
  }

  .mx-summaryTitleText small{
    display:block;
    margin-top:4px;
    font-size:10.6px;
    line-height:1.3;
    font-weight:900;
    color:#64748b;
  }

  .mx-summaryBox{
    border:1px solid rgba(15,23,42,.08);
    border-radius:18px;
    background:
      linear-gradient(180deg, rgba(248,250,252,.96), rgba(255,255,255,.98));
    padding:14px;
    margin-bottom:14px;
  }

  .mx-summaryRow{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    font-size:12px;
    line-height:1.2;
    font-weight:1000;
    margin-bottom:10px;
  }

  .mx-summaryRow:last-child{
    margin-bottom:0;
  }

  .mx-summaryRow span:first-child{
    color:#64748b;
  }

  .mx-summaryRow span:last-child{
    color:#0f172a;
    font-weight:1100;
  }

  .mx-summaryDivider{
    height:1px;
    background:rgba(15,23,42,.08);
    margin:10px 0;
  }

  .mx-summaryNote{
    font-size:10.6px;
    line-height:1.45;
    font-weight:900;
    color:#64748b;
  }

  .mx-summaryActions{
    display:grid;
    gap:10px;
  }

  .mx-summaryActions .btn{
    min-height:48px;
    border-radius:16px;
    font-size:12.4px;
    font-weight:1100;
    padding:10px 14px;
  }

  .mx-summaryActions .btn-primary{
    box-shadow:0 14px 28px rgba(37,99,235,.22);
  }

  .mx-summaryFootNote{
    margin-top:12px;
    font-size:10.6px;
    line-height:1.4;
    font-weight:900;
    color:#64748b;
  }

  @media (max-width: 767.98px){
    .mx-summaryCard{
      border-radius:18px;
    }

    .mx-summaryBody{
      padding:12px;
    }

    .mx-summaryTitle{
      gap:8px;
      margin-bottom:10px;
    }

    .mx-summaryTitleIcon{
      width:34px;
      height:34px;
      border-radius:12px;
    }

    .mx-summaryTitleIcon i{
      font-size:15px;
    }

    .mx-summaryTitleText h5{
      font-size:15px;
    }

    .mx-summaryTitleText small{
      font-size:9.6px;
    }

    .mx-summaryBox{
      padding:10px;
      border-radius:14px;
      margin-bottom:10px;
    }

    .mx-summaryRow{
      font-size:10.8px;
      margin-bottom:8px;
    }

    .mx-summaryNote{
      font-size:9.6px;
      line-height:1.35;
    }

    .mx-summaryActions{
      gap:8px;
    }

    .mx-summaryActions .btn{
      min-height:40px;
      border-radius:12px;
      font-size:10.8px;
      padding:8px 10px;
    }

    .mx-summaryFootNote{
      margin-top:10px;
      font-size:9.6px;
      line-height:1.3;
    }
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  .mx-cartLayout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:24px;
  align-items:start;
}

.mx-cartMain{
  min-width:0;
}

.mx-cartSide{
  min-width:0;
}

.mx-cartSide .mx-summaryCard{
  position:sticky;
  top:20px;
}

.mx-cartBottomActions{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
}

.mx-cartBottomActions .btn{
  min-width:190px;
  justify-content:center;
}

@media (max-width: 1199.98px){
  .mx-cartLayout{
    grid-template-columns:minmax(0,1fr) 320px;
    gap:18px;
  }
}

@media (max-width: 991.98px){
  .mx-cartLayout{
    grid-template-columns:1fr;
    gap:16px;
  }

  .mx-cartSide .mx-summaryCard{
    position:relative;
    top:auto;
  }

  .mx-cartBottomActions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .mx-cartBottomActions .btn{
    min-width:0;
    width:100%;
  }
}

@media (max-width: 575.98px){
  .mx-cartBottomActions{
    grid-template-columns:1fr;
  }
}

.mx-cartItemCard{
  transition: all .25s ease;
}

.mx-cartItemCard:hover{
  transform: translateY(-3px);
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
}

.mx-cartStepper{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  min-height:42px;
  padding:6px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:14px;
  background:linear-gradient(180deg,#ffffff,#f8fafc);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65);
}

.mx-stepBtn{
  width:34px;
  height:34px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  color:#0f172a;
  border-radius:11px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
  line-height:1;
  font-weight:1100;
  padding:0;
  box-shadow:0 4px 10px rgba(15,23,42,.04);
  transition:all .16s ease;
}

.mx-stepBtn:hover{
  background:#f8fafc;
  border-color:rgba(37,99,235,.16);
  color:#2563eb;
}

.mx-stepBtn:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.mx-cartStepperInput{
  width:42px;
  border:0;
  outline:none;
  background:transparent;
  text-align:center;
  font-size:13px;
  line-height:1;
  font-weight:1100;
  color:#0f172a;
  padding:0;
}

@media (max-width: 767.98px){
  .mx-cartStepper{
    min-height:36px;
    border-radius:12px;
    padding:4px;
    gap:6px;
  }

  .mx-stepBtn{
    width:28px;
    height:28px;
    border-radius:9px;
    font-size:16px;
  }

  .mx-cartStepperInput{
    width:32px;
    font-size:12px;
  }
}

/* =========================================================
SHOP PAGE WHITE SURFACE FIX
Amaç:
- .mx-page içindeki gradient'i shop özelinde öldürmek
- içerik yüzeyi tam beyaz yapmak
- kartları/hero'yu bozmamak
========================================================= */

/* Sayfanın ana zemini tam beyaz */
.mx-page,
.mx-shop,
.mx-shop-shell{
  background: #ffffff !important;
  background-image: none !important;
}

/* Shop layout sarmalayıcıları */
.shop-page,
.shop-page .container-fluid,
.shop-page main,
.shop-page main.container-fluid,
.mx-main,
.mx-rightcol,
.mx-side{
  background: transparent !important;
  background-image: none !important;
}

/* Sayfanın beyaz hissini bozan üst genel gradient'i kapat */
.mx-page{
  background: #ffffff !important;
  background-image: none !important;
}

/* Shop özel body alanı */
.mx-shop{
  padding-top: 1px !important;
  background: #ffffff !important;
}

/* Hero kendi tasarımını korusun ama dış zemini beyaz kalsın */
.mx-hero{
  margin-top: 0 !important;
}

/* Toolbar ve kontrol alanı çevresi beyaz zemine otursun */
.mx-toolbar-wrap,
.mx-control-bar{
  background-clip: padding-box !important;
}

/* Mobilde de aynı beyazlık */
@media (max-width: 991.98px){
  .mx-page,
  .mx-shop,
  .mx-shop-shell,
  .shop-page,
  .shop-page .container-fluid,
  .shop-page main,
  .shop-page main.container-fluid{
    background: #ffffff !important;
    background-image: none !important;
  }
}

@media (max-width: 575.98px){
  .mx-page,
  .mx-shop,
  .mx-shop-shell,
  .shop-page,
  .shop-page main,
  .shop-page main.container-fluid{
    background: #ffffff !important;
    background-image: none !important;
  }
}