/* Header/Menu (scoped) */
:root{
  --ss-blue:#0551e5;
  --ss-bg:#f5f8fd;
  --ss-text:#111;
  --ss-muted:#667085;
  --ss-border:rgba(17,24,39,.10);
  --ss-shadow:0 10px 30px rgba(2, 6, 23, .08);
}

.ss-header{ position:sticky; top:0; z-index:999; }

.ss-header,
.ss-header *{
  font-family: var(--ss-font-body, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif);
}

/* Full width wrapper */
.ss-topbar-inner,
.ss-nav-inner{
  width:100%;
  padding:0 22px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

/* Topbar */
.ss-topbar{ background:#fff; border-bottom:1px solid var(--ss-border); }
.ss-topbar-inner{ padding-top:10px; padding-bottom:10px; }

.ss-top-note{ color:var(--ss-muted); font-size:13px; }

/* Actions */
.ss-actions{
  display:flex;
  align-items:center;
  gap:10px;
  list-style:none;
  margin:0;
  padding:0;
}

/* Refer (topbar) - HIDE COMPLETELY */
.ss-refer{
  display:none !important;
}

/* Cart */
.ss-cart{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:36px;
  border-radius:10px;
  border:1px solid var(--ss-border);
  color:var(--ss-text);
  background:#fff;
}
.ss-cart-badge{
  position:absolute;
  top:-7px;
  right:-7px;
  min-width:18px;
  height:18px;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 5px;
  font-size:11px;
  color:#fff;
  background:var(--ss-blue);
}

/* Dropdown */
.ss-dd{ position:relative; }
.ss-dd-btn{
  display:inline-flex;
  gap:8px;
  align-items:center;
  height:36px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid var(--ss-border);
  background:#fff;
  color:var(--ss-text);
  cursor:pointer;
}
.ss-dd-btn:hover{ border-color:rgba(5,81,229,.35); }

.ss-dd-menu{
  position:absolute;
  right:0;
  top:calc(100% + 10px);

  /* auto-adjust width */
  width: max-content;
  min-width: unset;          /* remove forced width */
  max-width: 260px;          /* safety */

  background:#fff;
  border:1px solid var(--ss-border);
  border-radius:14px;
  box-shadow:var(--ss-shadow);
  padding:8px;
  display:none;
  z-index:3000;
}
.ss-dd.open .ss-dd-menu{ display:block; }


.ss-dd-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 10px;
  border-radius:10px;
  color:var(--ss-text);
  text-decoration:none;
  font-size:14px;
}
.ss-dd-item img{ width:18px; height:18px; object-fit:cover; border-radius:50%; }
.ss-dd-item:hover{ background:rgba(5,81,229,.08); color:var(--ss-blue); }
.ss-dd.open .ss-dd-menu{ display:block; }

/* Main nav */
.ss-nav{
  background:var(--ss-bg);
  border-bottom:1px solid var(--ss-border);
  overflow:visible;
}
.ss-nav-inner{
  padding-top:14px;
  padding-bottom:14px;
  overflow:visible;
}

.ss-brand img{ max-height:38px; }

/* Desktop menu */
.ss-menu-list{
  display:flex;
  align-items:center;
  gap:6px;
  list-style:none;
  margin:0;
  padding:0;
}
.ss-menu-item{ position:relative; }
.ss-menu-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:12px;
  color:var(--ss-text);
  text-decoration:none;
  font-size:15px;
  font-weight:700;
}
.ss-menu-link:hover{
  background:#fff;
  box-shadow:0 8px 20px rgba(2,6,23,.06);
}

/* Desktop hover submenu: no hover-gap + safe bridge */
.ss-has-sub { position: relative; }

.ss-submenu{
  position:absolute;
  left:0;
  top:100%;
  margin-top:8px;                 /* visual spacing */
  min-width:240px;
  background:#fff;
  border:1px solid var(--ss-border);
  border-radius:14px;
  box-shadow:var(--ss-shadow);
  padding:10px;
  display:none;
  z-index: 2000;
}

/* Hover bridge: keeps hover active between main item and submenu */
.ss-has-sub::after{
  content:"";
  position:absolute;
  left:0;
  top:100%;
  width:100%;
  height:14px;
  background:transparent;
}

.ss-has-sub:hover .ss-submenu{ display:block; }

.ss-submenu a{
  display:block;
  padding:10px 12px;
  border-radius:10px;
  color:var(--ss-text);
  text-decoration:none;
  font-weight:600;
  font-size:14px;
}
.ss-submenu a:hover{ background:rgba(5,81,229,.08); color:var(--ss-blue); }

.ss-submenu i{
  width:18px;
  text-align:center;
  color:var(--ss-blue);
  font-size:15px;
}

/* Right side CTA */
.ss-nav-actions{ display:flex; align-items:center; gap:12px; }

.ss-refer-main{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:14px;
  background:var(--ss-blue);
  color:#fff;
  text-decoration:none;
  font-weight:900;
  white-space:nowrap;
  box-shadow:0 10px 22px rgba(5,81,229,.22);
}
.ss-refer-main:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(5,81,229,.25);
}

.ss-refer-badge{
  display:inline-flex;
  align-items:center;
  height:22px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  font-size:12px;
  font-weight:800;
}

/* Burger */
.ss-burger{
  width:44px;
  height:44px;
  border-radius:14px;
  border:1px solid var(--ss-border);
  background:#fff;
  display:none;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:6px;
  cursor:pointer;
}
.ss-burger span{ width:18px; height:2px; background:#111; display:block; }

/* Drawer */
.ss-drawer{
  position:fixed;
  top:0;
  right:-340px;
  width:340px;
  max-width:88vw;
  height:100vh;
  background:#fff;
  border-left:1px solid var(--ss-border);
  box-shadow:var(--ss-shadow);
  transition:right .25s ease;
  z-index:1001;
}
.ss-drawer.open{ right:0; }
.ss-drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px;
  border-bottom:1px solid var(--ss-border);
}
.ss-drawer-head img{ max-height:34px; }
.ss-drawer-close{
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid var(--ss-border);
  background:#fff;
  font-size:22px;
  cursor:pointer;
}
.ss-drawer-body{ padding:14px 16px; }

/* Drawer referral */
.ss-m-refer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 12px;
  border-radius:14px;
  background:rgba(5,81,229,.08);
  color:var(--ss-blue);
  text-decoration:none;
  font-weight:900;
  margin-bottom:12px;
}
.ss-m-refer span{
  font-size:12px;
  font-weight:900;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(5,81,229,.12);
}

.ss-m-link{
  display:block;
  padding:12px 12px;
  border-radius:12px;
  color:var(--ss-text);
  text-decoration:none;
  font-weight:800;
}
.ss-m-link:hover{ background:rgba(5,81,229,.08); color:var(--ss-blue); }

.ss-m-item{ margin-bottom:8px; }
.ss-m-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--ss-border);
  background:#fff;
  font-weight:900;
  cursor:pointer;
}
.ss-m-sub{ display:none; padding:8px 0 0; }
.ss-m-sub a{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  text-decoration:none;
  color:var(--ss-text);
  font-weight:650;
}
.ss-m-sub a:hover{ background:rgba(5,81,229,.08); color:var(--ss-blue); }
.ss-m-item.open .ss-m-sub{ display:block; }

/* Overlay */
.ss-overlay{
  position:fixed;
  inset:0;
  background:rgba(2,6,23,.45);
  z-index:1000;
}

/* News area */
.ss-news{
  flex: 1 1 auto;
  display:flex;
  justify-content:center;
  align-items:center;
  padding: 0 12px;
  min-width: 220px;
}
.ss-news span{
  font-size:13px;
  color:var(--ss-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ===========================
   MOBILE adjustments
=========================== */
@media (max-width: 992px){

  /* Force desktop menu off + burger on */
  .ss-menu{ display:none !important; }
  .ss-burger{ display:flex !important; }

  /* Hide left + news on mobile */
  .ss-top-left{ display:none !important; }
  .ss-news{ display:none !important; }

  /* IMPORTANT: Keep Currency/Profile/Cart right-most */
  .ss-topbar-inner{
    justify-content:flex-end !important;
    flex-wrap:nowrap !important;
    gap:10px !important;
  }

  .ss-top-right{
    width:100% !important;
    display:flex !important;
    justify-content:flex-end !important;
  }

  .ss-actions{
    justify-content:flex-end !important;
    flex-wrap:nowrap !important;
  }

  /* Icon only for member text */
  .ss-member-text{ display:none !important; }
}

@media (max-width: 520px){
  /* Keep topbar tight */
  .ss-topbar-inner{ padding-left:12px; padding-right:12px; }
  .ss-nav-inner{ padding-left:12px; padding-right:12px; }

  /* Hide main refer CTA if you want minimal header */
  .ss-refer-main{ display:none; }

  /* Dropdown button smaller */
  .ss-dd-btn{ padding:0 10px; }
}

/* =========================================================
   TABLET / RESPONSIVE FIX (996–1118 widths)
   Paste at END of your CSS
========================================================= */

/* ---------- TOPBAR: allow proper shrinking + ellipsis ---------- */
.ss-top-left,
.ss-news,
.ss-top-right{
  min-width: 0; /* IMPORTANT so ellipsis works in flex */
}

.ss-top-left{
  flex: 0 1 420px;   /* left block can shrink */
}

.ss-news{
  flex: 1 1 auto;    /* news gets remaining space */
}

.ss-top-note,
.ss-news span{
  display:block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- NAV: keep menu items single-line ---------- */
.ss-menu-link{
  white-space: nowrap; /* prevent Web Hosting breaking into 2 lines */
}

/* Reduce menu spacing slightly for mid widths */
@media (max-width: 1200px){
  .ss-menu-list{ gap: 2px; }
  .ss-menu-link{ padding: 10px 10px; font-size: 14px; }
}

/* ---------- REFER BUTTON: shrink nicely on tablets ---------- */
/* 1) On <= 1200px hide the long badge so it doesn't push menu */
@media (max-width: 1200px){
  .ss-refer-badge{ display:none !important; }
  .ss-refer-main{ padding: 10px 12px; }
}

/* 2) On <= 1100px make header tighter */
@media (max-width: 1100px){
  .ss-nav-inner{ gap: 10px; }
  .ss-brand img{ max-height: 34px; }
}

/* 3) On <= 1060px hide the "Refer a Friend" text (icon only) */
@media (max-width: 1060px){
  .ss-refer-main > span:not(.ss-refer-badge){
    display:none !important;
  }
  .ss-refer-main{
    width: 48px;
    height: 44px;
    padding: 0;
    border-radius: 14px;
    justify-content: center;
  }
}

/* ---------- TOPBAR: when space is tight, hide left note first ---------- */
@media (max-width: 1120px){
  .ss-top-left{ display:none !important; } /* keeps News + right actions clean */
  .ss-news{ justify-content: flex-start; }
}

/* ---------- TOPBAR: if still tight, hide news too (optional) ---------- */
@media (max-width: 1000px){
  .ss-news{ display:none !important; }
}

/* ---------- Ensure right actions always stay right (desktop/tablet) ---------- */
.ss-top-right{
  display:flex;
  justify-content:flex-end;
}
.ss-actions{
  flex-wrap: nowrap;
}

/* ---------- Mobile: your existing right-most rules remain ---------- */


/* === Typography normalization (non-invasive, avoids variable conflicts) ===
   NOTE: modern-menu.css uses --ss-text as a COLOR variable (#111).
   So we use dedicated typography vars to keep font sizes consistent across pages
   without affecting menu colors.
*/
:root{
  --ss-font-body:'poppinsregular', Arial, Helvetica, sans-serif;
  --ss-font-heading:'poppinssemibold', Arial, Helvetica, sans-serif;

  --ss-fs:15px;      /* base menu font size */
  --ss-fs-sm:14px;   /* dropdown/submenu */
  --ss-fs-xs:13px;   /* top note/news */
  --ss-lh:1.65;      /* line-height */
}

/* Apply shared typography (font family + sizes only) */
.ss-header, .ss-header *{ font-family: var(--ss-font-body); }

.ss-menu-link{ font-size: var(--ss-fs) !important; line-height: var(--ss-lh); }

.ss-submenu a,
.ss-dd-item{ font-size: var(--ss-fs-sm) !important; line-height: var(--ss-lh); }

.ss-top-note,
.ss-news span{ font-size: var(--ss-fs-xs) !important; line-height: var(--ss-lh); }