/* ===== Live Sale – text-only mega menu (final) ===== */

/* allow dropdown to overflow header */
#header,
.header-default,
.header-default .box-navigation,
.wrapper-header { overflow: visible !important; }

/* li shouldn't be the positioning context; submenu will be centered to page width */
.header-default .box-navigation .menu-item { position: static; }

/* base card + centered */
.header-default .mega-menu{
  position: absolute;
  left: 0; right: 0;          /* center with max-width + margin:auto */
  margin: 0 auto;
  top: 100%;
  z-index: 1000;

  width: 100%;
  max-width: 1180px;
  padding: 24px 28px;

  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
}

/* show/hide without flicker */
.header-default .box-navigation .menu-item .sub-menu{
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;                 /* block accidental hover while hidden */
  transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  margin-top: 8px;                      /* tiny gap under nav */
}

/* keep open if either the li OR the submenu itself is hovered */
.header-default .box-navigation .menu-item:hover > .sub-menu,
.header-default .box-navigation .menu-item > .sub-menu:hover{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition-delay: 0s;
}

/* invisible hover bridge between nav link and panel */
.header-default .box-navigation .menu-item > .sub-menu::before{
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -14px;              /* adjust if needed */
  height: 14px;
}

/* grid spacing */
.header-default .mega-menu .row{
  column-gap: 36px;
  row-gap: 20px;
  align-items: flex-start;
}
.header-default .mega-menu .row > [class*="col-"]{ min-width: 260px; }

/* vertical dividers on desktop */
@media (min-width: 992px){
  .header-default .mega-menu .row > [class*="col-"]:not(:last-child){
    border-right: 1px solid #f2f3f5;
  }
  .header-default .mega-menu .mega-menu-item{ padding-right: 28px; }
}

/* headings */
.header-default .mega-menu .menu-heading{
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #111827;
}
.header-default .mega-menu .menu-heading a{ color:#111827; text-decoration:none; }

/* list */
.header-default .mega-menu .menu-list{ margin: 0; padding: 0; list-style: none; }
.header-default .mega-menu .menu-list li + li{ margin-top: 6px; }

.header-default .mega-menu .menu-link-text{
  display: block;
  font-size: 14px;
  line-height: 1.25;
  color: #4b5563;
  padding: 6px 0;
  text-decoration: none;
  transition: color .2s ease, transform .2s ease;
}
.header-default .mega-menu .menu-link-text:hover{
  color: #111827;
  transform: translateX(2px);
}

/* "View all" link */
.header-default .mega-menu .mt-8 a{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-weight: 600;
  font-size: 13px;
  color: #111827;
  text-decoration: none;
}
.header-default .mega-menu .mt-8 a::after{ content: "›"; line-height: 1; transform: translateY(-1px); }

/* muted note */
.header-default .mega-menu em{ color:#9ca3af; font-size:13px; }

/* mobile: simple stacked layout */
@media (max-width: 991.98px){
  .header-default .mega-menu{
    position: static;
    left: auto; right: auto;
    margin: 0;
    top: auto;
    max-width: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 16px 18px;
  }
  .header-default .mega-menu .row{ column-gap: 18px; }
}

/* Mobile offcanvas nav */
.mobile-nav .mobile-link{
  display:block; padding:10px 0; color:#111827; text-decoration:none;
}
.mobile-nav .mobile-link:hover{ color:#000; }

.mobile-accordion,
.mobile-cat{
  width:100%; padding:12px 0; border:0; background:none; text-align:left;
  color:#111827; font-weight:600; position:relative;
}
.mobile-accordion::after,
.mobile-cat::after{
  content:"+"; position:absolute; right:0; top:50%; transform:translateY(-50%);
  font-weight:700; font-size:18px; line-height:1;
}
.mobile-accordion[aria-expanded="true"]::after,
.mobile-cat[aria-expanded="true"]::after{ content:"–"; }


/* Auth pages (login + registration) */
.login-card{
  padding: 24px;
  border-radius: 14px;
  background:#fff;
  box-shadow: 0 14px 36px rgba(0,0,0,.08);
}

/* smaller logo */
.login-logo{
  height: 72px;          /* was too large; adjust as you like */
  width: auto;
  object-fit: contain;
}

/* heading like login */
.login-title{
  margin: 6px 0 16px;
  font-weight: 700;
  font-size: 34px;       /* reduce from huge default */
  color:#1f2937;         /* gray-800 */
}

/* inputs look like login (soft background + rounded) */
.login-card .form-label{ font-weight: 600; color:#111827; }
.login-card .form-control{
  background:#eef2ff;                /* soft blue like your login */
  border:1px solid #e5e7eb;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
}
.login-card .form-control::placeholder{ color:#9ca3af; }
.login-card .form-control:focus{
  background:#f3f6ff;
  border-color:#3b82f6;
  box-shadow: 0 0 0 .2rem rgba(59,130,246,.15);
}

/* primary button style to match login */
.tf-button{
  display:inline-block;
  width:100%;
  border:0;
  border-radius: 10px;
  padding: 12px 16px;
  background:#0d6efd;                /* Bootstrap primary / your login blue */
  color:#fff;
  font-weight: 600;
  transition: transform .06s ease, box-shadow .2s ease, opacity .2s ease;
}
.tf-button:hover{ opacity: .95; }
.tf-button:active{ transform: translateY(1px); }

/* small screen tweaks */
@media (max-width: 575.98px){
  .login-card{ padding:18px; }
  .login-logo{ height:60px; }
  .login-title{ font-size: 28px; }
}