/* ══════════════════════════════════════════════════════
   Mawasem – Home Page Styles
   ══════════════════════════════════════════════════════ */

/* ── Design Tokens ─────────────────────────────────── */
:root {
  --mw-primary: #274651;
  --mw-accent: #9E7653;
  --mw-bg: #EFECE6;
  --mw-bg-dark: #142A1B;
  --mw-grad-end: #113824;
  --mw-btn-bg: #e6e2cf;
  --mw-btn-text: #153725;
  --mw-star: #F4BA07;
  --mw-white: #ffffff;
  --mw-text: #2c2c2c;
  --mw-text-sec: #6b6b6b;
  --mw-text-mute: #9ca3af;
  --mw-border: #d4cfc5;
  --mw-radius: 16px;
  --mw-shadow: 0 2px 12px rgba(39,70,81,.06);
  --mw-nav-h: 64px;
  --mw-hdr-h: 56px;
}

/* ── Reset ─────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
a{text-decoration:none;color:inherit}
button{font-family:inherit;border:none;cursor:pointer}
img{max-width:100%;display:block}
ul,ol{list-style:none}

/* ── Body ──────────────────────────────────────────── */
body{
  font-family:'Cairo',sans-serif;
  background:var(--mw-bg);
  color:var(--mw-text);
  padding-bottom:calc(var(--mw-nav-h) + 12px);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
  /* subtle geometric pattern */
  background-image:url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 0L40 20L20 40L0 20z' fill='none' stroke='%23274651' stroke-opacity='0.03' stroke-width='0.5'/%3E%3C/svg%3E");
}

/* ── Top Header ────────────────────────────────────── */
.mw-header{
  position:sticky;top:0;z-index:100;
  height:var(--mw-hdr-h);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;
  background:linear-gradient(180deg,rgba(239,236,230,.96) 0%,rgba(239,236,230,.85) 100%);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.mw-header__logo img{height:40px;object-fit:contain}
.mw-header__nav{display:none;align-items:center;gap:24px;list-style:none;margin:0;padding:0}
.mw-header__nav a{
  color:var(--mw-primary);font-size:.9rem;font-weight:600;
  font-family:'Cairo',sans-serif;transition:color .2s;
  white-space:nowrap;
}
.mw-header__nav a:hover{color:var(--mw-accent)}
.mw-header__nav a.active{color:var(--mw-accent)}
.mw-header__actions{display:flex;align-items:center;gap:8px}
.mw-header__btn{
  width:38px;height:38px;border-radius:50%;
  background:rgba(39,70,81,.06);color:var(--mw-primary);
  display:flex;align-items:center;justify-content:center;
  font-size:17px;transition:all .2s;
}
.mw-header__btn:hover{background:var(--mw-accent);color:var(--mw-white)}
.mw-header__btn{position:relative}
.mw-header__badge{
  position:absolute;top:-2px;right:-2px;
  min-width:16px;height:16px;border-radius:8px;
  background:#ef4444;color:var(--mw-white);
  font-size:.6rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  padding:0 4px;
}

/* ── Hero Slider ───────────────────────────────────── */
.mw-hero{padding:10px 16px 0;max-width:1400px;margin:0 auto}

#hero-swiper{border-radius:18px;overflow:hidden;height:210px}
@media(min-width:640px){#hero-swiper{height:320px}}
@media(min-width:1024px){#hero-swiper{height:420px}}

.mw-hero__slide{position:relative;width:100%;height:100%}
.mw-hero__slide img{width:100%;height:100%;object-fit:cover}

.mw-hero__overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.55) 0%,rgba(0,0,0,.08) 50%,transparent 100%);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:20px;color:var(--mw-white);
}
.mw-hero__title{font-size:1.3rem;font-weight:800;margin-bottom:4px}
@media(min-width:768px){.mw-hero__title{font-size:2rem}}
.mw-hero__desc{font-size:.85rem;opacity:.8;margin-bottom:12px}

.mw-hero__cta{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--mw-white);color:var(--mw-text);
  padding:10px 22px;border-radius:12px;
  font-weight:700;font-size:.85rem;
  transition:all .2s;width:fit-content;
}
.mw-hero__cta:hover{background:var(--mw-accent);color:var(--mw-white)}

#hero-swiper .swiper-pagination-bullet{
  background:rgba(255,255,255,.4)!important;opacity:1;
  width:8px;height:8px;transition:all .3s;
}
#hero-swiper .swiper-pagination-bullet-active{
  background:var(--mw-white)!important;
  width:24px!important;border-radius:4px!important;
}

/* ── Section Wrapper ───────────────────────────────── */
.mw-section{max-width:1400px;margin:0 auto;padding:22px 16px 0}
.mw-section__head{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;
}
.mw-section__title{font-size:1.15rem;font-weight:800;color:var(--mw-text)}
.mw-section__more{
  font-size:.8rem;font-weight:600;color:var(--mw-accent);
  transition:opacity .2s;
}
.mw-section__more:hover{opacity:.65}

/* ── Horizontal Scroll Container ───────────────────── */
.mw-hscroll{
  display:flex;gap:12px;overflow-x:auto;
  padding:4px 0 8px;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.mw-hscroll::-webkit-scrollbar{display:none}

/* ── Season Circles ────────────────────────────────── */
.mw-seasons{
  display:flex;gap:18px;overflow-x:auto;
  padding:4px 0 8px;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.mw-seasons::-webkit-scrollbar{display:none}

.mw-season{
  flex-shrink:0;display:flex;flex-direction:column;
  align-items:center;gap:6px;width:76px;
  scroll-snap-align:start;cursor:pointer;
  transition:transform .2s;color:inherit;
}
.mw-season:hover{transform:translateY(-2px)}
.mw-season.soon{opacity:.55;cursor:default}

.mw-season__img{
  width:68px;height:68px;border-radius:50%;overflow:hidden;
  border:2.5px solid var(--mw-border);background:var(--mw-white);
  flex-shrink:0;position:relative;
}
.mw-season__img img{width:100%;height:100%;object-fit:cover}

.mw-season__badge{
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  background:var(--mw-accent);color:var(--mw-white);
  font-size:.6rem;font-weight:700;padding:1px 8px;
  border-radius:6px;white-space:nowrap;z-index:2;
}
.mw-season__name{
  font-size:.7rem;font-weight:600;text-align:center;
  line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;
}

/* ── Package Card (Luxury Selections) ──────────────── */
.mw-pkg{
  flex-shrink:0;width:230px;height:290px;
  border-radius:var(--mw-radius);overflow:hidden;
  position:relative;scroll-snap-align:start;
  cursor:pointer;transition:transform .2s;
  display:block;color:var(--mw-white);
}
@media(min-width:768px){.mw-pkg{width:270px;height:330px}}
.mw-pkg:hover{transform:scale(1.02)}

.mw-pkg__img{width:100%;height:100%;object-fit:cover}
.mw-pkg__grad{
  position:absolute;inset:0;
  background:linear-gradient(to top,var(--mw-grad-end) 0%,rgba(17,56,36,.25) 45%,transparent 75%);
}
.mw-pkg__fav{
  position:absolute;top:10px;left:10px;z-index:2;
  width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.2);backdrop-filter:blur(4px);
  color:var(--mw-white);display:flex;align-items:center;justify-content:center;
  font-size:13px;transition:all .2s;
}
.mw-pkg__fav:hover,.mw-pkg__fav.liked{color:#ef4444;background:rgba(255,255,255,.45)}

.mw-pkg__info{
  position:absolute;bottom:0;left:0;right:0;
  padding:14px 16px;z-index:2;color:var(--mw-white);
}
.mw-pkg__name{
  font-size:.95rem;font-weight:700;margin-bottom:4px;
  display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;
  -webkit-box-orient:vertical;overflow:hidden;
}
.mw-pkg__price{font-size:.9rem;font-weight:700;display:flex;align-items:center;gap:4px}

/* ── Product Card ──────────────────────────────────── */
.mw-prod{
  flex-shrink:0;width:170px;
  border-radius:var(--mw-radius);background:var(--mw-white);
  overflow:hidden;box-shadow:var(--mw-shadow);
  scroll-snap-align:start;display:flex;flex-direction:column;
  transition:transform .2s,box-shadow .2s;
}
@media(min-width:768px){.mw-prod{width:195px}}
.mw-prod:hover{transform:translateY(-3px);box-shadow:0 6px 20px rgba(39,70,81,.1)}

.mw-prod__imgw{position:relative;height:170px;background:#f0ece6;overflow:hidden}
.mw-prod__imgw img{width:100%;height:100%;object-fit:cover;transition:transform .3s}
.mw-prod:hover .mw-prod__imgw img{transform:scale(1.04)}

.mw-prod__fav{
  position:absolute;top:8px;left:8px;z-index:2;
  width:28px;height:28px;border-radius:50%;
  background:rgba(255,255,255,.85);
  color:var(--mw-text-mute);display:flex;align-items:center;justify-content:center;
  font-size:12px;transition:all .2s;
}
.mw-prod__fav:hover,.mw-prod__fav.liked{color:#ef4444}

.mw-prod__sold{
  position:absolute;bottom:0;left:0;right:0;
  background:rgba(0,0,0,.55);color:var(--mw-white);
  text-align:center;padding:5px;font-size:.75rem;font-weight:700;
}

.mw-prod__body{
  padding:10px 10px 12px;display:flex;flex-direction:column;
  gap:5px;flex:1;
}
.mw-prod__name{
  font-size:.78rem;font-weight:600;text-align:center;
  display:-webkit-box;-webkit-line-clamp:1;line-clamp:1;
  -webkit-box-orient:vertical;overflow:hidden;
  line-height:1.4;color:var(--mw-text);
}
.mw-prod__prices{
  display:flex;align-items:center;justify-content:center;
  gap:5px;flex-wrap:wrap;
}
.mw-prod__price{font-size:.85rem;font-weight:800;color:var(--mw-text)}
.mw-prod__original{
  font-size:.7rem;color:var(--mw-text-mute);text-decoration:line-through;
}
.mw-prod__disc{
  font-size:.6rem;font-weight:700;color:#dc2626;
  background:#fef2f2;padding:1px 5px;border-radius:5px;
}
.mw-prod__imgw > .mw-prod__disc{
  position:absolute;top:8px;right:8px;z-index:2;
  padding:3px 8px;border-radius:8px;font-size:.68rem;
}

.mw-prod__btn{
  width:100%;padding:7px;border-radius:10px;
  font-weight:700;font-size:.78rem;
  transition:all .2s;font-family:'Cairo',sans-serif;margin-top:auto;
}
.mw-prod__btn--add{background:var(--mw-primary);color:var(--mw-white)}
.mw-prod__btn--add:hover{background:var(--mw-accent)}
.mw-prod__btn--sold{background:#e5e5e5;color:#999;cursor:not-allowed}

/* ── Stars ─────────────────────────────────────────── */
.mw-stars{display:flex;gap:2px;justify-content:center}
.mw-stars i{font-size:.65rem;color:var(--mw-star)}
.mw-stars i.empty{color:#ddd}

/* ── Bottom Navigation ─────────────────────────────── */
.mw-bnav{
  position:fixed;bottom:0;left:0;right:0;
  height:var(--mw-nav-h);background:var(--mw-white);
  border-top:1px solid var(--mw-border);
  display:flex;z-index:200;
  box-shadow:0 -2px 12px rgba(0,0,0,.04);
}
.mw-bnav__tab{
  flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:2px;
  color:var(--mw-text-mute);font-size:.68rem;font-weight:600;
  background:none;position:relative;
  transition:all .2s;font-family:'Cairo',sans-serif;
}
.mw-bnav__tab.active{
  color:var(--mw-accent);
  background:linear-gradient(180deg,rgba(158,118,83,.07) 0%,transparent 100%);
}
.mw-bnav__tab.active::before{
  content:'';position:absolute;top:0;left:20%;right:20%;
  height:2.5px;background:var(--mw-accent);border-radius:0 0 2px 2px;
}
.mw-bnav__tab i{font-size:20px}

.mw-bnav__badge{
  position:absolute;top:6px;right:calc(50% - 18px);
  min-width:16px;height:16px;border-radius:8px;
  background:#ef4444;color:var(--mw-white);
  font-size:.6rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  padding:0 4px;
}

/* ── Toast ──────────────────────────────────────────── */
.mw-toast{
  position:fixed;top:72px;left:50%;transform:translateX(-50%);
  background:var(--mw-primary);color:var(--mw-white);
  padding:10px 24px;border-radius:12px;
  font-size:.85rem;font-weight:700;z-index:9999;
  animation:mwFadeUp .3s ease;white-space:nowrap;
  box-shadow:0 4px 20px rgba(39,70,81,.2);
  font-family:'Cairo',sans-serif;
}
.mw-toast--err{background:#ef4444}

/* ── Shimmer Loading ───────────────────────────────── */
.mw-shim{
  background:linear-gradient(90deg,#e4e0d8 25%,#ede9e2 50%,#e4e0d8 75%);
  background-size:200% 100%;animation:mwShim 1.3s ease-in-out infinite;
  border-radius:var(--mw-radius);
}
.mw-shim--circle{border-radius:50%}
@keyframes mwShim{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ── Utilities ─────────────────────────────────────── */
.mw-hide{display:none!important}

@keyframes mwFadeUp{
  from{opacity:0;transform:translate(-50%,-8px)}
  to{opacity:1;transform:translate(-50%,0)}
}

/* ── Desktop Enhancements ──────────────────────────── */
@media(min-width:1024px){
  .mw-bnav{display:none}
  body{padding-bottom:0}
  .mw-header{padding:0 32px;height:64px}
  .mw-header__logo img{height:48px}
  .mw-header__nav{display:flex}
  .mw-hero{padding:16px 32px 0}
  .mw-section{padding:28px 32px 0}
  .mw-section__title{font-size:1.35rem}
}

/* ── Footer (desktop only) ─────────────────────────── */
.mw-footer{
  max-width:1400px;margin:32px auto 0;padding:24px 16px;
  border-top:1px solid var(--mw-border);
  text-align:center;color:var(--mw-text-sec);
  font-size:.8rem;font-weight:500;
}
@media(min-width:1024px){.mw-footer{padding:24px 32px}}

/* ══════════════════════════════════════════════════════
   SHARED COMPONENTS (Forms, Buttons, Cards, etc.)
   ══════════════════════════════════════════════════════ */

/* ── Page Shell (for non-home pages) ───────────────── */
.mw-page{
  max-width:520px;margin:0 auto;
  padding:calc(var(--mw-hdr-h) + 20px) 16px calc(var(--mw-nav-h) + 24px);
  min-height:100vh;
}
.mw-page--wide{max-width:960px}
.mw-page--full{max-width:1400px}

/* ── Auth Layout ───────────────────────────────────── */
.mw-auth{
  display:flex;flex-direction:column;align-items:center;
  padding-top:32px;gap:24px;
}
.mw-auth__logo img{height:64px;object-fit:contain}
.mw-auth__title{font-size:1.4rem;font-weight:800;color:var(--mw-text);text-align:center}
.mw-auth__sub{font-size:.85rem;color:var(--mw-text-sec);text-align:center;margin-top:-12px}

/* ── Card / Panel ──────────────────────────────────── */
.mw-card{
  background:var(--mw-white);border-radius:var(--mw-radius);
  box-shadow:var(--mw-shadow);padding:24px;width:100%;
}
.mw-card--flat{box-shadow:none;border:1px solid var(--mw-border)}

/* ── Form Controls ─────────────────────────────────── */
.mw-form{display:flex;flex-direction:column;gap:16px}

.mw-field{display:flex;flex-direction:column;gap:5px;position:relative}
.mw-field__label{
  font-size:.8rem;font-weight:600;color:var(--mw-text);
}
.mw-field__input{
  width:100%;height:48px;padding:0 14px;
  border:1.5px solid var(--mw-border);border-radius:12px;
  font-family:'Cairo',sans-serif;font-size:.9rem;
  color:var(--mw-text);background:var(--mw-white);
  transition:border-color .2s,box-shadow .2s;
  outline:none;
}
.mw-field__input::placeholder{color:var(--mw-text-mute);font-size:.82rem}
.mw-field__input:focus{
  border-color:var(--mw-accent);
  box-shadow:0 0 0 3px rgba(158,118,83,.12);
}
.mw-field__input--error{border-color:#ef4444}
.mw-field__error{
  font-size:.72rem;color:#ef4444;display:none;margin-top:2px;
}
.mw-field__input--error ~ .mw-field__error{display:block}

.mw-field__icon{
  position:absolute;left:14px;top:38px;
  color:var(--mw-text-mute);cursor:pointer;font-size:15px;
  transition:color .2s;
}
.mw-field__icon:hover{color:var(--mw-accent)}

textarea.mw-field__input{height:auto;min-height:100px;padding:12px 14px;resize:vertical}

/* ── Row layout for inline fields ──────────────────── */
.mw-row{display:flex;gap:12px}
.mw-row > *{flex:1}

/* ── Phone field with country code ─────────────────── */
.mw-phone{display:flex;gap:8px;align-items:flex-end}
.mw-phone__code{
  width:80px;height:48px;padding:0 8px;
  border:1.5px solid var(--mw-border);border-radius:12px;
  font-family:'Cairo',sans-serif;font-size:.85rem;
  background:var(--mw-bg);color:var(--mw-text);
  text-align:center;
}
.mw-phone__input{flex:1}

/* ── Buttons ───────────────────────────────────────── */
.mw-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:48px;padding:0 24px;border-radius:12px;
  font-family:'Cairo',sans-serif;font-weight:700;font-size:.9rem;
  cursor:pointer;transition:all .2s;border:none;
  white-space:nowrap;
}
.mw-btn--primary{background:var(--mw-primary);color:var(--mw-white)}
.mw-btn--primary:hover{background:#1e3a44}
.mw-btn--accent{background:var(--mw-accent);color:var(--mw-white)}
.mw-btn--accent:hover{opacity:.88}
.mw-btn--outline{background:transparent;border:1.5px solid var(--mw-border);color:var(--mw-text)}
.mw-btn--outline:hover{border-color:var(--mw-accent);color:var(--mw-accent)}
.mw-btn--ghost{background:transparent;color:var(--mw-accent);padding:0}
.mw-btn--ghost:hover{text-decoration:underline}
.mw-btn--full{width:100%}
.mw-btn--sm{height:38px;font-size:.8rem;padding:0 16px;border-radius:10px}
.mw-btn--lg{height:54px;font-size:1rem}
.mw-btn:disabled{opacity:.45;cursor:not-allowed}
.mw-btn .fa-spinner{animation:mwSpin 1s linear infinite}
@keyframes mwSpin{to{transform:rotate(360deg)}}

/* ── Tabs ──────────────────────────────────────────── */
.mw-tabs{display:flex;gap:4px;background:var(--mw-bg);border-radius:12px;padding:4px}
.mw-tabs__tab{
  flex:1;text-align:center;padding:10px 4px;
  border-radius:10px;font-size:.82rem;font-weight:600;
  color:var(--mw-text-sec);cursor:pointer;
  transition:all .2s;background:transparent;
}
.mw-tabs__tab.active{background:var(--mw-white);color:var(--mw-accent);box-shadow:0 1px 4px rgba(0,0,0,.06)}

/* ── Separator (or) ────────────────────────────────── */
.mw-sep{
  display:flex;align-items:center;gap:12px;color:var(--mw-text-mute);
  font-size:.8rem;font-weight:500;
}
.mw-sep::before,.mw-sep::after{
  content:'';flex:1;height:1px;background:var(--mw-border);
}

/* ── Social Login (Google/Apple) ───────────────────── */
.mw-social{display:flex;gap:12px;justify-content:center}
.mw-social__btn{
  width:48px;height:48px;border-radius:12px;
  border:1.5px solid var(--mw-border);background:var(--mw-white);
  display:flex;align-items:center;justify-content:center;
  font-size:20px;color:var(--mw-text);cursor:pointer;
  transition:all .2s;
}
.mw-social__btn:hover{border-color:var(--mw-accent);color:var(--mw-accent)}

/* ── OTP Input Grid ────────────────────────────────── */
.mw-otp{display:flex;gap:10px;justify-content:center;direction:ltr}
.mw-otp__box{
  width:48px;height:54px;text-align:center;font-size:1.3rem;font-weight:700;
  border:1.5px solid var(--mw-border);border-radius:12px;
  font-family:'Cairo',sans-serif;color:var(--mw-text);
  transition:border-color .2s;outline:none;
}
.mw-otp__box:focus{border-color:var(--mw-accent);box-shadow:0 0 0 3px rgba(158,118,83,.12)}

/* ── Alert / Inline Message ────────────────────────── */
.mw-alert{
  padding:12px 16px;border-radius:12px;font-size:.82rem;font-weight:600;
  display:flex;align-items:center;gap:8px;
}
.mw-alert--success{background:#ecfdf5;color:#065f46}
.mw-alert--error{background:#fef2f2;color:#991b1b}
.mw-alert--info{background:#eff6ff;color:#1e40af}

/* ── Badge ─────────────────────────────────────────── */
.mw-badge{
  display:inline-flex;align-items:center;justify-content:center;
  font-size:.65rem;font-weight:700;padding:2px 8px;border-radius:8px;
}
.mw-badge--accent{background:var(--mw-accent);color:var(--mw-white)}
.mw-badge--success{background:#dcfce7;color:#166534}
.mw-badge--danger{background:#fef2f2;color:#dc2626}

/* ── Empty State ───────────────────────────────────── */
.mw-empty{
  text-align:center;padding:48px 24px;color:var(--mw-text-sec);
}
.mw-empty__icon{font-size:3rem;color:var(--mw-border);margin-bottom:12px}
.mw-empty__title{font-size:1.1rem;font-weight:700;color:var(--mw-text);margin-bottom:4px}
.mw-empty__desc{font-size:.85rem}

/* ── List Items ────────────────────────────────────── */
.mw-list-item{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-bottom:1px solid var(--mw-border);
  transition:background .2s;cursor:pointer;
}
.mw-list-item:hover{background:rgba(158,118,83,.04)}
.mw-list-item:last-child{border-bottom:none}
.mw-list-item__icon{
  width:42px;height:42px;border-radius:12px;
  background:var(--mw-bg);display:flex;align-items:center;justify-content:center;
  color:var(--mw-accent);font-size:18px;flex-shrink:0;
}
.mw-list-item__body{flex:1;min-width:0}
.mw-list-item__title{font-size:.88rem;font-weight:600;color:var(--mw-text)}
.mw-list-item__sub{font-size:.75rem;color:var(--mw-text-sec)}
.mw-list-item__arrow{color:var(--mw-text-mute);font-size:14px}

/* ── Modal / Overlay ───────────────────────────────── */
.mw-overlay{
  position:fixed;inset:0;z-index:300;
  background:rgba(0,0,0,.45);backdrop-filter:blur(4px);
  display:flex;align-items:flex-end;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .25s;
}
.mw-overlay.open{opacity:1;pointer-events:auto}
.mw-modal{
  background:var(--mw-white);border-radius:20px 20px 0 0;
  width:100%;max-width:520px;max-height:85vh;overflow-y:auto;
  padding:24px 20px calc(var(--mw-nav-h) + 24px);
  transform:translateY(100%);transition:transform .3s ease;
}
.mw-overlay.open .mw-modal{transform:translateY(0)}
.mw-modal__bar{
  width:40px;height:4px;border-radius:2px;
  background:var(--mw-border);margin:0 auto 16px;
}
@media(min-width:640px){
  .mw-overlay{align-items:center}
  .mw-modal{border-radius:20px;max-height:90vh;padding-bottom:24px}
}

/* ── Stepper ───────────────────────────────────────── */
.mw-stepper{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:24px}
.mw-stepper__step{
  display:flex;flex-direction:column;align-items:center;gap:4px;
  font-size:.7rem;font-weight:600;color:var(--mw-text-mute);
  position:relative;min-width:60px;
}
.mw-stepper__dot{
  width:28px;height:28px;border-radius:50%;
  border:2px solid var(--mw-border);background:var(--mw-white);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;transition:all .2s;
}
.mw-stepper__step.active .mw-stepper__dot{
  border-color:var(--mw-accent);background:var(--mw-accent);color:var(--mw-white);
}
.mw-stepper__step.done .mw-stepper__dot{
  border-color:var(--mw-primary);background:var(--mw-primary);color:var(--mw-white);
}
.mw-stepper__line{width:40px;height:2px;background:var(--mw-border);margin-bottom:18px}
.mw-stepper__step.done + .mw-stepper__line{background:var(--mw-primary)}

/* ── Link ──────────────────────────────────────────── */
.mw-link{color:var(--mw-accent);font-weight:600;font-size:.82rem;cursor:pointer;transition:opacity .2s}
.mw-link:hover{opacity:.7}

/* ── Divider ───────────────────────────────────────── */
.mw-divider{height:1px;background:var(--mw-border);margin:16px 0}

/* ── Avatar ────────────────────────────────────────── */
.mw-avatar{
  width:72px;height:72px;border-radius:50%;
  border:3px solid var(--mw-accent);object-fit:cover;
  background:var(--mw-bg);
}
.mw-avatar--sm{width:40px;height:40px;border-width:2px}
.mw-avatar--lg{width:96px;height:96px}

/* ── Chip / Tag ────────────────────────────────────── */
.mw-chip{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:20px;font-size:.78rem;font-weight:600;
  border:1.5px solid var(--mw-border);color:var(--mw-text);
  cursor:pointer;transition:all .2s;background:var(--mw-white);
}
.mw-chip.active,.mw-chip:hover{
  border-color:var(--mw-accent);background:rgba(158,118,83,.08);color:var(--mw-accent);
}

/* ── Quantity Selector ─────────────────────────────── */
.mw-qty{display:inline-flex;align-items:center;gap:4px}
.mw-qty__btn{
  width:32px;height:32px;border-radius:8px;
  background:var(--mw-bg);color:var(--mw-text);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;transition:all .2s;
}
.mw-qty__btn:hover{background:var(--mw-accent);color:var(--mw-white)}
.mw-qty__val{font-size:.9rem;font-weight:700;min-width:24px;text-align:center}

/* ── Toggle Switch ─────────────────────────────────── */
.mw-toggle{
  position:relative;display:inline-block;width:44px;height:24px;
}
.mw-toggle input{display:none}
.mw-toggle__slider{
  position:absolute;inset:0;border-radius:12px;
  background:var(--mw-border);cursor:pointer;transition:background .2s;
}
.mw-toggle__slider::before{
  content:'';position:absolute;width:18px;height:18px;
  border-radius:50%;background:var(--mw-white);
  top:3px;left:3px;transition:transform .2s;
}
.mw-toggle input:checked + .mw-toggle__slider{background:var(--mw-accent)}
.mw-toggle input:checked + .mw-toggle__slider::before{transform:translateX(20px)}

/* ── Profile Nav (Vertical tabs) ───────────────────── */
.mw-pnav{display:flex;flex-direction:column;gap:4px;padding:4px 0}
.mw-pnav__item{
  display:flex;align-items:center;gap:10px;
  padding:12px 16px;border-radius:var(--mw-radius);
  font-size:.88rem;font-weight:600;color:var(--mw-text);
  cursor:pointer;transition:all .2s;background:transparent;border:none;
  text-align:right;width:100%;
}
.mw-pnav__item:hover{background:var(--mw-bg)}
.mw-pnav__item.active{background:var(--mw-accent);color:var(--mw-white)}
.mw-pnav__item i{width:20px;text-align:center}
.mw-pnav__item--danger{color:#dc2626}
.mw-pnav__item--danger:hover{background:#fef2f2}

/* ── Order Card ────────────────────────────────────── */
.mw-order{
  background:var(--mw-white);border-radius:var(--mw-radius);
  border:1px solid var(--mw-border);padding:16px;
  margin-bottom:12px;
}
.mw-order__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.mw-order__num{font-weight:700;font-size:.95rem}
.mw-order__date{font-size:.78rem;color:var(--mw-text-sec)}
.mw-order__status{
  display:inline-block;padding:3px 10px;border-radius:20px;
  font-size:.72rem;font-weight:700;
}
.mw-order__status--0{background:#dbeafe;color:#1d4ed8}
.mw-order__status--1{background:#fef3c7;color:#b45309}
.mw-order__status--2{background:#e0e7ff;color:#4338ca}
.mw-order__status--3{background:#d1fae5;color:#065f46}
.mw-order__status--4{background:#fee2e2;color:#991b1b}
.mw-order__items{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.mw-order__thumb{width:52px;height:52px;border-radius:8px;object-fit:cover;border:1px solid var(--mw-border)}
.mw-order__total{font-size:.85rem;font-weight:700;margin-top:10px;text-align:left}

/* ── Address Card ──────────────────────────────────── */
.mw-addr{
  background:var(--mw-white);border-radius:var(--mw-radius);
  border:1px solid var(--mw-border);padding:14px;
  margin-bottom:10px;position:relative;
}
.mw-addr.mw-addr--default{border-color:var(--mw-accent)}
.mw-addr__type{font-weight:700;font-size:.85rem;margin-bottom:4px}
.mw-addr__line{font-size:.82rem;color:var(--mw-text-sec);margin-bottom:2px}
.mw-addr__actions{display:flex;gap:8px;margin-top:8px}
.mw-addr__tag{
  position:absolute;top:10px;left:10px;
  background:var(--mw-accent);color:var(--mw-white);
  font-size:.68rem;padding:2px 8px;border-radius:10px;font-weight:700;
}

/* ── Notification Item ─────────────────────────────── */
.mw-notif{
  display:flex;gap:12px;padding:14px;
  border-bottom:1px solid var(--mw-border);
  align-items:flex-start;
}
.mw-notif__icon{
  width:38px;height:38px;border-radius:50%;
  background:var(--mw-bg);display:flex;
  align-items:center;justify-content:center;
  flex-shrink:0;color:var(--mw-accent);font-size:.9rem;
}
.mw-notif__body{flex:1}
.mw-notif__title{font-weight:700;font-size:.85rem;margin-bottom:2px}
.mw-notif__desc{font-size:.78rem;color:var(--mw-text-sec)}
.mw-notif__time{font-size:.7rem;color:var(--mw-text-sec);margin-top:4px}
.mw-notif__del{
  background:none;border:none;color:#dc2626;
  font-size:.85rem;cursor:pointer;padding:4px;
}
.mw-notif--unread{background:#faf7f2}

/* ── Wishlist Grid ─────────────────────────────────── */
.mw-wish-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}