:root{
  --site-header-black:#09090a;
  --site-header-black-2:#151517;
  --site-header-ink:#222329;
  --site-header-muted:#6d7077;
  --site-header-border:#e5e5e8;
  --site-header-soft:#f6f6f7;
  --site-header-white:#fff;
  --site-header-shadow:0 24px 60px rgba(0,0,0,.12);
  --site-header-serif:"DM Sans",Arial,sans-serif;
  --site-header-sans:"DM Sans",Arial,sans-serif;
}

body.lock{overflow:hidden}

.topbar{
  height:34px;
  background:var(--site-header-black);
  color:#ddd;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 14px;
  text-align:center;
  text-transform:uppercase;
  font-size:9px;
  letter-spacing:2.2px;
}

.header{
  height:90px;
  background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--site-header-border);
  position:sticky;
  top:0;
  z-index:1000;
  backdrop-filter:blur(14px);
  overflow:visible;
}

.site-header-shell{
  width:min(1480px,calc(100% - 72px));
  margin:auto;
}

.header-inner{
  height:100%;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
}

.nav{
  display:flex;
  align-items:center;
  gap:29px;
  min-width:0;
}

.nav-link{
  text-transform:uppercase;
  font-size:10px;
  letter-spacing:1.5px;
  height:90px;
  display:flex;
  align-items:center;
  position:relative;
  white-space:nowrap;
}

.nav-link::after{
  content:"";
  height:1px;
  background:#111;
  position:absolute;
  bottom:27px;
  left:0;
  width:0;
  transition:width .25s ease;
}

.nav-link:hover::after,
.nav-link:focus-visible::after,
.nav-link.is-active::after{
  width:100%;
}

.brand{
  text-align:center;
  line-height:1;
}

.brand-main{
  display:block;
  font-family:var(--site-header-serif);
  font-size:24px;
  letter-spacing:8px;
  white-space:nowrap;
}

.brand-sub{
  display:block;
  margin-top:9px;
  text-transform:uppercase;
  font-size:6px;
  letter-spacing:4.5px;
  color:#777;
}

.actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:9px;
  min-width:0;
}

.header-right-rail{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:18px;
  min-width:0;
}

.nav-corporate{
  justify-content:flex-end;
  gap:18px;
  padding-left:18px;
  margin-left:4px;
  border-left:1px solid rgba(17,17,17,.14);
}

.nav-link-corporate{
  color:rgba(17,17,17,.76);
}

.icon-btn{
  width:39px;
  height:39px;
  border:0;
  background:transparent;
  display:grid;
  place-items:center;
  position:relative;
  color:inherit;
}

.icon-btn svg{
  width:19px;
  height:19px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.45;
}

.count{
  position:absolute;
  right:0;
  top:0;
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--site-header-black);
  color:#fff;
  font-size:8px;
  display:grid;
  place-items:center;
}

.mobile-only{display:none}

.mega-menu-panel{
  position:absolute;
  left:0;
  right:0;
  top:100%;
  opacity:0;
  visibility:hidden;
  transform:translateY(-10px);
  pointer-events:none;
  transition:opacity .22s ease,transform .22s ease,visibility .22s ease;
}

.mega-menu-panel.open{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
}

.mega-menu-surface{
  background:rgba(255,255,255,.985);
  border-bottom:1px solid var(--site-header-border);
  box-shadow:0 28px 70px rgba(15,15,16,.1);
}

.mega-menu-inner{
  display:grid;
  grid-template-columns:minmax(280px,.88fr) minmax(0,1.12fr);
  gap:34px;
  padding:30px 0 34px;
}

.mega-copy{
  display:grid;
  gap:18px;
  align-content:start;
  padding-right:12px;
}

.mega-kicker{
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--site-header-muted);
}

.mega-title{
  font-family:var(--site-header-serif);
  font-size:38px;
  font-weight:500;
  line-height:1.02;
  color:var(--site-header-black);
}

.mega-description{
  font-size:14px;
  line-height:1.7;
  color:var(--site-header-muted);
  max-width:360px;
}

.mega-cta{
  display:inline-flex;
  align-items:center;
  gap:10px;
  width:max-content;
  min-height:46px;
  padding:0 18px;
  background:var(--site-header-black);
  color:#fff;
  text-transform:uppercase;
  font-size:9px;
  letter-spacing:.18em;
}

.mega-links{
  display:grid;
  gap:10px;
}

.mega-link{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:12px 0;
  border-top:1px solid var(--site-header-border);
}

.mega-link strong{
  display:block;
  font-size:13px;
  font-weight:600;
  color:var(--site-header-black);
}

.mega-link span{
  display:block;
  margin-top:5px;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--site-header-muted);
}

.mega-grid{
  display:grid;
  grid-template-columns:1.2fr repeat(3,minmax(0,1fr));
  gap:16px;
  min-width:0;
}

.mega-card,
.mega-spotlight,
.mega-info-card{
  display:block;
  color:inherit;
}

.mega-spotlight-media,
.mega-card-media{
  background:var(--site-header-soft);
  overflow:hidden;
  position:relative;
}

.mega-spotlight-media{
  aspect-ratio:4/4.65;
}

.mega-card-media{
  aspect-ratio:4/4.9;
}

.mega-spotlight-media img,
.mega-card-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .45s ease;
}

.mega-spotlight:hover .mega-spotlight-media img,
.mega-card:hover .mega-card-media img{
  transform:scale(1.03);
}

.mega-spotlight-copy,
.mega-card-copy{
  padding-top:14px;
}

.mega-category{
  font-size:9px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--site-header-muted);
}

.mega-spotlight-title{
  margin-top:10px;
  font-family:var(--site-header-serif);
  font-size:25px;
  line-height:1.06;
  font-weight:500;
}

.mega-card-title{
  margin-top:8px;
  font-family:var(--site-header-serif);
  font-size:17px;
  line-height:1.1;
  font-weight:500;
}

.mega-info-card{
  min-height:220px;
  padding:22px 18px;
  border:1px solid var(--site-header-border);
  background:#fff;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
}

.mega-info-copy{
  margin-top:10px;
  font-size:12px;
  line-height:1.7;
  color:var(--site-header-muted);
}

.mega-price{
  margin-top:8px;
  font-size:12px;
  color:var(--site-header-ink);
}

.search-panel{
  position:fixed;
  z-index:1200;
  top:0;
  left:0;
  right:0;
  background:#fff;
  transform:translateY(-110%);
  transition:transform .3s ease;
  box-shadow:var(--site-header-shadow);
}

.search-panel.open{transform:translateY(0)}

.search-inner{
  width:min(1480px,calc(100% - 72px));
  margin:auto;
  padding:38px 0 42px;
}

.search-top{
  display:flex;
  align-items:center;
  gap:20px;
}

.search-top input{
  flex:1;
  border:0;
  border-bottom:1px solid #222;
  outline:0;
  height:55px;
  font-family:var(--site-header-serif);
  font-size:27px;
  background:transparent;
}

.search-hints{
  margin-top:22px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.search-hints a,
.search-hints span{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:9px 13px;
  background:#f2f2f3;
  font-size:8px;
  text-transform:uppercase;
  letter-spacing:1.4px;
}

.overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  z-index:1100;
  opacity:0;
  visibility:hidden;
  transition:.25s;
}

.overlay.open{
  opacity:1;
  visibility:visible;
}

.drawer{
  position:fixed;
  z-index:1300;
  top:0;
  right:0;
  width:min(450px,92vw);
  height:100vh;
  background:#fff;
  transform:translateX(100%);
  transition:transform .3s ease;
  display:flex;
  flex-direction:column;
  box-shadow:var(--site-header-shadow);
}

.drawer.open{transform:translateX(0)}

.drawer-head{
  height:79px;
  border-bottom:1px solid var(--site-header-border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 25px;
}

.drawer-head h3{
  font-family:var(--site-header-serif);
  font-size:22px;
  font-weight:400;
}

.close-btn{
  border:0;
  background:none;
  font-size:24px;
}

.drawer-body{
  flex:1;
  overflow:auto;
  padding:25px;
}

.empty{
  text-align:center;
  padding:80px 20px;
  color:#777;
  font-size:12px;
}

.cart-item{
  display:grid;
  grid-template-columns:80px 1fr auto;
  gap:13px;
  padding-bottom:18px;
  margin-bottom:18px;
  border-bottom:1px solid var(--site-header-border);
}

.cart-item img{
  height:95px;
  object-fit:cover;
}

.cart-item h4{
  font-family:var(--site-header-serif);
  font-size:15px;
  font-weight:400;
}

.cart-item small{
  color:#888;
  font-size:9px;
}

.remove{
  border:0;
  background:none;
  color:#999;
}

.drawer-foot{
  padding:22px;
  border-top:1px solid var(--site-header-border);
}

.total-row{
  display:flex;
  justify-content:space-between;
  font-size:12px;
  margin-bottom:17px;
}

.checkout{
  width:100%;
  height:50px;
  border:0;
  background:#111;
  color:#fff;
  text-transform:uppercase;
  font-size:9px;
  letter-spacing:2px;
}

.mobile-menu-panel{
  position:fixed;
  z-index:1300;
  inset:0 22% 0 0;
  background:#fff;
  transform:translateX(-100%);
  transition:transform .3s ease;
  padding:28px;
  overflow:auto;
}

.mobile-menu-panel.open{transform:translateX(0)}

.mobile-menu-brand{
  text-align:left;
  margin-bottom:32px;
}

.mobile-menu-section{
  margin-top:24px;
}

.mobile-menu-section-title{
  margin-bottom:12px;
  font-size:10px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--site-header-muted);
}

.mobile-menu-info-links{
  display:grid;
  border-top:1px solid var(--site-header-border);
}

.mobile-menu-info-links a{
  padding:14px 0;
  border-bottom:1px solid var(--site-header-border);
  font-family:var(--site-header-serif);
  font-size:22px;
}

.mobile-menu-groups{
  display:grid;
  gap:12px;
}

.mobile-menu-group{
  border-top:1px solid var(--site-header-border);
}

.mobile-menu-toggle{
  width:100%;
  border:0;
  background:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:16px 0;
  text-align:left;
  text-transform:uppercase;
  font-size:11px;
  letter-spacing:.16em;
}

.mobile-menu-toggle span:last-child{
  font-size:18px;
  line-height:1;
}

.mobile-menu-list{
  display:none;
  padding:0 0 10px;
}

.mobile-menu-group.open .mobile-menu-list{
  display:grid;
}

.mobile-menu-list a{
  padding:11px 0;
  border-bottom:1px solid var(--site-header-border);
  font-family:var(--site-header-serif);
  font-size:24px;
}

.mobile-menu-list a small{
  display:block;
  margin-top:6px;
  font-family:var(--site-header-sans);
  font-size:9px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--site-header-muted);
}

.mobile-menu-utility{
  margin-top:28px;
  display:grid;
  gap:10px;
}

.mobile-menu-utility a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 0;
  border-top:1px solid var(--site-header-border);
  text-transform:uppercase;
  font-size:10px;
  letter-spacing:.16em;
}

.toast{
  position:fixed;
  z-index:1400;
  left:50%;
  bottom:30px;
  transform:translate(-50%,40px);
  opacity:0;
  background:#111;
  color:#fff;
  padding:13px 20px;
  font-size:10px;
  letter-spacing:1px;
  transition:.25s;
}

.toast.show{
  opacity:1;
  transform:translate(-50%,0);
}

@media(max-width:1100px){
  .nav{display:none}
  .nav-corporate{display:none}
  .mobile-only{display:grid}
  .mega-menu-panel{display:none}
}

@media(max-width:1380px){
  .site-header-shell{
    width:min(1480px,calc(100% - 44px));
  }

  .nav{
    gap:20px;
  }

  .nav-corporate{
    gap:14px;
    padding-left:14px;
  }
}

@media(max-width:1240px){
  .nav{
    gap:14px;
  }

  .nav-link{
    font-size:9px;
    letter-spacing:1.2px;
  }

  .header-right-rail{
    gap:12px;
  }

  .nav-corporate{
    gap:12px;
    padding-left:12px;
  }
}

@media(max-width:650px){
  .topbar{
    font-size:7px;
    letter-spacing:1.2px;
  }

  .header{height:74px}

  .site-header-shell,
  .search-inner{
    width:calc(100% - 30px);
  }

  .header-inner{
    grid-template-columns:1fr auto 1fr;
    gap:0;
  }

  .brand-main{
    font-size:18px;
    letter-spacing:5px;
  }

  .brand-sub{display:none}
  .actions{gap:0}
  .header-right-rail{gap:0}
  .account-btn,
  .wish-top{display:none}
  .search-top input{font-size:22px}
  .mobile-menu-panel{
    inset:0 10% 0 0;
    padding:24px 20px;
  }
}

/* ==========================================================
   SIBARA LUX · MEGA MENU COMPACTO + MOBILE APP BAR
   ========================================================== */


/* ---------- MEGA MENU COMPACTO ---------- */

@media(min-width:1101px){

  .mega-menu-inner{
    grid-template-columns:minmax(245px,.72fr) minmax(0,1.28fr);
    gap:30px;
    padding:22px 0 24px;
  }

  .mega-copy{
    gap:12px;
    padding-right:8px;
  }

  .mega-kicker{
    font-size:8px;
  }

  .mega-title{
    font-size:30px;
    line-height:1;
  }

  .mega-description{
    max-width:330px;
    font-size:12px;
    line-height:1.55;
  }

  .mega-cta{
    min-height:38px;
    padding:0 14px;
    font-size:8px;
  }

  .mega-links{
    gap:0;
  }

  .mega-link{
    padding:8px 0;
  }

  .mega-link strong{
    font-size:11px;
  }

  .mega-link span{
    margin-top:3px;
    font-size:8px;
  }

  /* SIEMPRE SOLO 3 BLOQUES VISUALES:
     1 spotlight + 2 productos */
  .mega-grid{
    grid-template-columns:1.08fr repeat(2,minmax(0,1fr));
    gap:14px;
    align-items:start;
  }

  .mega-grid > *:nth-child(n+4){
    display:none !important;
  }

  .mega-spotlight-media,
  .mega-card-media{
    height:160px;
    aspect-ratio:auto;
  }

  .mega-spotlight-copy,
  .mega-card-copy{
    padding-top:10px;
  }

  .mega-category{
    font-size:7px;
  }

  .mega-spotlight-title{
    margin-top:6px;
    font-size:19px;
  }

  .mega-card-title{
    margin-top:6px;
    font-size:16px;
  }

  .mega-price{
    margin-top:6px;
    font-size:10px;
  }

  .mega-info-card{
    min-height:205px;
    padding:18px;
  }

}


/* ---------- LINK DIRECTO INICIO EN MOBILE MENU ---------- */

.mobile-menu-direct{
  min-height:54px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:16px 0;
  text-transform:uppercase;
  text-decoration:none;
  font-size:11px;
  letter-spacing:.16em;
  color:inherit;
}


/* ==========================================================
   MOBILE APP BAR
   ========================================================== */

.mobile-app-bar,
.mobile-app-bar-handle{
  display:none;
}


@media(max-width:700px){

  body{
    padding-bottom:74px;
  }

  body.mobile-app-bar-hidden{
    padding-bottom:18px;
  }

  .mobile-app-bar{
    position:fixed;
    z-index:1080;
    left:10px;
    right:10px;
    bottom:10px;
    height:64px;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    align-items:center;
    background:rgba(10,10,11,.96);
    border:1px solid rgba(255,255,255,.12);
    border-radius:18px;
    box-shadow:0 14px 38px rgba(0,0,0,.25);
    backdrop-filter:blur(16px);
    transition:
      transform .25s ease,
      opacity .25s ease;
  }

  .mobile-app-bar.is-hidden{
    transform:translateY(calc(100% + 22px));
    opacity:0;
    pointer-events:none;
  }

  .mobile-app-item{
    min-width:0;
    height:100%;
    padding:7px 2px 6px;
    border:0;
    background:transparent;
    color:#fff;
    text-decoration:none;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:5px;
    font-family:var(--site-header-sans);
  }

  .mobile-app-item > svg,
  .mobile-app-icon-wrap > svg{
    width:20px;
    height:20px;
    fill:none;
    stroke:currentColor;
    stroke-width:1.4;
  }

  .mobile-app-item > span:last-child{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:7px;
    line-height:1;
    letter-spacing:.07em;
    text-transform:uppercase;
  }

  .mobile-app-icon-wrap{
    position:relative;
    display:grid;
    place-items:center;
  }

  .mobile-app-count{
    position:absolute;
    top:-7px;
    right:-10px;
    min-width:15px;
    height:15px;
    padding:0 3px;
    border-radius:20px;
    background:#fff;
    color:#111;
    display:grid;
    place-items:center;
    font-size:7px;
    font-weight:600;
  }

  .mobile-app-bar-handle{
    position:fixed;
    z-index:1081;
    left:50%;
    bottom:67px;
    transform:translateX(-50%);
    width:42px;
    height:21px;
    padding:0;
    border:1px solid rgba(255,255,255,.12);
    border-bottom:0;
    border-radius:12px 12px 0 0;
    background:#0a0a0b;
    color:#fff;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:0;
    box-shadow:0 -4px 14px rgba(0,0,0,.12);
    transition:
      bottom .25s ease,
      transform .25s ease;
  }

  .mobile-app-bar-handle.is-hidden-state{
    bottom:0;
    width:48px;
    height:25px;
  }

  .mobile-app-handle-line{
    width:16px;
    height:1px;
    background:rgba(255,255,255,.5);
  }

  .mobile-app-handle-chevron{
    font-size:9px;
    line-height:9px;
    margin-top:1px;
  }

  /* Toast por encima de la barra */
  .toast{
    bottom:92px;
  }

}


/* pantallas realmente pequeñas */

@media(max-width:390px){

  .mobile-app-bar{
    left:7px;
    right:7px;
    bottom:7px;
  }

  .mobile-app-item > span:last-child{
    font-size:6px;
  }

}


/* accesibilidad */

@media(prefers-reduced-motion:reduce){

  .mobile-app-bar,
  .mobile-app-bar-handle{
    transition:none;
  }

}

/* ==========================================================
   SIBARA LUX · MOBILE APP BAR V2
   PEGADA ABAJO + HANDLE FUNCIONAL
   ========================================================== */

@media(max-width:700px){

  body{
    padding-bottom:72px !important;
  }

  body.mobile-app-bar-hidden{
    padding-bottom:22px !important;
  }

  #mobileAppBar.mobile-app-bar{
    position:fixed !important;
    z-index:1800 !important;

    left:0 !important;
    right:0 !important;
    bottom:0 !important;

    width:100% !important;
    height:68px !important;

    margin:0 !important;

    display:grid !important;
    grid-template-columns:repeat(5,1fr) !important;

    background:#09090a !important;

    border-top:1px solid rgba(255,255,255,.15) !important;
    border-left:0 !important;
    border-right:0 !important;
    border-bottom:0 !important;

    /* SOLO REDONDEADO ARRIBA */
    border-radius:22px 22px 0 0 !important;

    box-shadow:
      0 -10px 30px rgba(0,0,0,.18) !important;

    overflow:visible !important;

    transform:translateY(0);
    opacity:1;

    transition:
      transform .25s ease,
      opacity .2s ease !important;
  }


  #mobileAppBar.mobile-app-bar.is-hidden{
    transform:translateY(105%) !important;
    opacity:0 !important;
    pointer-events:none !important;
  }


  #mobileAppBar .mobile-app-item{
    height:68px !important;
    min-width:0;

    border:0 !important;
    background:transparent !important;

    color:#fff !important;

    display:flex !important;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:5px;
    padding:7px 2px 6px;

    text-decoration:none;
  }


  #mobileAppBar .mobile-app-item svg{
    width:20px !important;
    height:20px !important;

    fill:none !important;
    stroke:currentColor !important;
    stroke-width:1.4 !important;
  }


  #mobileAppBar .mobile-app-item > span:last-child{
    font-size:7px !important;
    letter-spacing:.08em;
    text-transform:uppercase;
    white-space:nowrap;
  }


  /* ========================================================
     BOTÓN PARA ESCONDER / MOSTRAR
     ======================================================== */

  #mobileAppBarHandle{
    position:fixed !important;

    z-index:1900 !important;

    left:50% !important;
    bottom:68px !important;

    transform:translateX(-50%) !important;

    width:46px !important;
    height:24px !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    padding:0 !important;
    margin:0 !important;

    border:
      1px solid rgba(255,255,255,.15) !important;

    border-bottom:0 !important;

    border-radius:
      14px 14px 0 0 !important;

    background:#09090a !important;
    color:#fff !important;

    cursor:pointer !important;
    pointer-events:auto !important;

    box-shadow:
      0 -5px 16px rgba(0,0,0,.14) !important;

    transition:
      bottom .25s ease,
      width .25s ease,
      height .25s ease !important;
  }


  #mobileAppBarHandle:hover,
  #mobileAppBarHandle:active{
    background:#1a1a1c !important;
  }


  #mobileAppBarHandle .mobile-app-handle-line{
    display:none !important;
  }


  #mobileAppBarHandle .mobile-app-handle-chevron{
    display:block !important;

    margin:0 !important;

    font-size:14px !important;
    line-height:1 !important;

    pointer-events:none !important;
  }


  /* CUANDO LA BARRA ESTÁ ESCONDIDA:
     DEJAR UNA PESTAÑITA ABAJO */

  #mobileAppBarHandle.is-hidden-state{
    bottom:0 !important;

    width:54px !important;
    height:28px !important;

    border-radius:
      15px 15px 0 0 !important;
  }


  /* contador */

  #mobileAppBar .mobile-app-count{
    position:absolute;

    top:-7px;
    right:-10px;

    min-width:15px;
    height:15px;

    padding:0 3px;

    border-radius:20px;

    background:#fff !important;
    color:#09090a !important;

    display:grid;
    place-items:center;

    font-size:7px;
  }


  /* toast encima de la barra */

  .toast{
    bottom:92px !important;
  }

}


@media(max-width:390px){

  #mobileAppBar.mobile-app-bar{
    left:0 !important;
    right:0 !important;
    bottom:0 !important;

    width:100% !important;

    border-radius:20px 20px 0 0 !important;
  }

}

/* ==========================================================
   SIBARA LUX · MOBILE APP BAR V3
   HORIZONTAL / SWIPE / WARM MOTION
   ========================================================== */

@media(max-width:700px){

  /* --------------------------------------------------------
     BARRA
     -------------------------------------------------------- */

  #mobileAppBar.mobile-app-bar{
    display:flex !important;
    grid-template-columns:none !important;

    align-items:stretch !important;

    width:100% !important;
    height:70px !important;

    left:0 !important;
    right:0 !important;
    bottom:0 !important;

    padding:
      0 10px
      max(0px, env(safe-area-inset-bottom))
      10px !important;

    gap:2px !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    scroll-behavior:smooth;
    scroll-snap-type:x proximity;
    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;

    scrollbar-width:none;

    background:
      linear-gradient(
        180deg,
        #12110f 0%,
        #09090a 100%
      ) !important;

    border-radius:
      22px 22px 0 0 !important;

    box-shadow:
      0 -10px 34px rgba(44,35,23,.20),
      0 -1px 0 rgba(255,245,228,.07)
      inset !important;

    transition:
      transform .42s cubic-bezier(.22,1,.36,1),
      opacity .30s ease !important;
  }


  #mobileAppBar::-webkit-scrollbar{
    display:none;
  }


  #mobileAppBar.mobile-app-bar.is-hidden{
    transform:
      translate3d(0,110%,0) !important;

    opacity:.15 !important;
  }


  /* --------------------------------------------------------
     CADA OPCIÓN
     -------------------------------------------------------- */

  #mobileAppBar .mobile-app-item{
    flex:
      0 0 74px !important;

    width:74px !important;
    min-width:74px !important;

    height:70px !important;

    scroll-snap-align:center;

    border-radius:15px !important;

    transition:
      background .28s ease,
      color .28s ease,
      transform .28s cubic-bezier(.22,1,.36,1) !important;
  }


  #mobileAppBar .mobile-app-item:active{
    background:
      rgba(231,215,190,.10) !important;

    transform:
      translateY(-2px)
      scale(.97);
  }


  #mobileAppBar .mobile-app-item svg{
    width:21px !important;
    height:21px !important;

    stroke:
      #f2eee7 !important;

    transition:
      transform .30s cubic-bezier(.22,1,.36,1),
      stroke .25s ease !important;
  }


  #mobileAppBar .mobile-app-item:active svg{
    transform:
      translateY(-2px)
      scale(1.06);
  }


  #mobileAppBar .mobile-app-item > span:last-child{
    color:
      rgba(245,241,234,.72);

    font-size:
      6.7px !important;

    letter-spacing:
      .09em !important;
  }


  /* --------------------------------------------------------
     CONTADOR
     -------------------------------------------------------- */

  #mobileAppBar .mobile-app-count{
    top:-6px !important;
    right:-11px !important;

    background:
      #ece1d0 !important;

    color:
      #111 !important;

    box-shadow:
      0 3px 8px
      rgba(0,0,0,.18);
  }


  /* --------------------------------------------------------
     HANDLE MÁS ANCHO / MEJOR ALINEADO
     -------------------------------------------------------- */

  #mobileAppBarHandle{
    width:
      76px !important;

    height:
      27px !important;

    bottom:
      70px !important;

    border-radius:
      16px 16px 0 0 !important;

    background:
      linear-gradient(
        180deg,
        #181612,
        #0d0c0b
      ) !important;

    border:
      1px solid
      rgba(232,218,196,.16) !important;

    border-bottom:
      0 !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    padding:0 !important;

    box-shadow:
      0 -7px 20px
      rgba(50,39,25,.16) !important;

    transition:
      bottom .42s cubic-bezier(.22,1,.36,1),
      width .32s cubic-bezier(.22,1,.36,1),
      height .32s cubic-bezier(.22,1,.36,1),
      background .25s ease !important;
  }


  #mobileAppBarHandle .mobile-app-handle-line{
    display:block !important;

    position:absolute;

    top:6px;

    width:24px !important;
    height:2px !important;

    border-radius:20px;

    background:
      rgba(235,224,207,.35) !important;
  }


  #mobileAppBarHandle .mobile-app-handle-chevron{
    position:absolute !important;

    left:50% !important;
    top:50% !important;

    transform:
      translate(-50%,-35%) !important;

    margin:0 !important;

    width:20px;
    height:14px;

    display:flex !important;

    align-items:center;
    justify-content:center;

    font-family:
      Arial,sans-serif !important;

    font-size:
      13px !important;

    line-height:
      1 !important;

    color:
      #e9dfd0 !important;
  }


  /* HANDLE CUANDO LA BARRA ESTÁ OCULTA */

  #mobileAppBarHandle.is-hidden-state{
    bottom:
      0 !important;

    width:
      82px !important;

    height:
      31px !important;

    border-radius:
      17px 17px 0 0 !important;
  }


  #mobileAppBarHandle.is-hidden-state
  .mobile-app-handle-line{
    top:
      7px !important;
  }


  #mobileAppBarHandle.is-hidden-state
  .mobile-app-handle-chevron{
    top:
      58% !important;

    transform:
      translate(-50%,-50%) !important;
  }


  /* --------------------------------------------------------
     PEQUEÑO FADE LATERAL PARA DAR IDEA DE DESLIZAR
     -------------------------------------------------------- */

  body::after{
    content:"";

    position:fixed;

    z-index:1799;

    right:0;
    bottom:0;

    width:18px;
    height:70px;

    pointer-events:none;

    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(9,9,10,.72)
      );
  }


  body.mobile-app-bar-hidden::after{
    display:none;
  }

}


@media(max-width:390px){

  #mobileAppBar .mobile-app-item{
    flex-basis:
      70px !important;

    width:
      70px !important;

    min-width:
      70px !important;
  }

}

/* ==========================================================
   SIBARA LUX · MOBILE APP BAR V4
   CLIPPING REAL + CHEVRON ANCHO
   ========================================================== */

@media(max-width:700px){

  /* ========================================================
     ICONOS SIEMPRE DENTRO DE LA BARRA
     ======================================================== */

  #mobileAppBar.mobile-app-bar{

    left:0 !important;
    right:0 !important;
    bottom:0 !important;

    width:100% !important;

    border-radius:
      22px 22px 0 0 !important;

    /*
      IMPORTANTE:
      el contenido sigue desplazándose horizontalmente,
      pero ahora queda RECORTADO por las esquinas.
    */

    clip-path:
      inset(
        0
        round
        22px 22px 0 0
      ) !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    isolation:isolate;

    padding-left:10px !important;
    padding-right:10px !important;

    overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;
  }


  /*
    Eliminamos el fade viejo exterior.
    Era innecesario y podía hacer parecer
    que los iconos salían de la barra.
  */

  body::after{
    display:none !important;
    content:none !important;
  }


  /* ========================================================
     OPCIONES
     ======================================================== */

  #mobileAppBar .mobile-app-item{

    flex:
      0 0 76px !important;

    width:
      76px !important;

    min-width:
      76px !important;

    height:
      70px !important;

    position:relative;

    overflow:hidden;

    border-radius:
      14px !important;
  }


  #mobileAppBar .mobile-app-item > svg,
  #mobileAppBar .mobile-app-icon-wrap > svg{

    width:
      21px !important;

    height:
      21px !important;

    flex:
      0 0 auto;

    display:block;
  }


  /* ========================================================
     HANDLE / PESTAÑA
     ======================================================== */

  #mobileAppBarHandle{

    width:
      88px !important;

    height:
      28px !important;

    bottom:
      70px !important;

    padding:
      0 !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    overflow:hidden !important;
  }


  /*
    La rayita queda arriba como detalle.
  */

  #mobileAppBarHandle
  .mobile-app-handle-line{

    position:absolute !important;

    top:
      5px !important;

    left:50% !important;

    transform:
      translateX(-50%) !important;

    width:
      28px !important;

    height:
      2px !important;

    border-radius:
      20px !important;
  }


  /* ========================================================
     ESTA ES LA FLECHA QUE DECÍAS:
     AHORA ES UN SVG REAL, MUCHO MÁS ANCHO
     ======================================================== */

  #mobileAppBarHandle
  .mobile-app-handle-chevron{

    position:absolute !important;

    left:
      50% !important;

    top:
      16px !important;

    transform:
      translate(-50%,-50%) !important;

    width:
      40px !important;

    height:
      14px !important;

    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    margin:
      0 !important;

    line-height:
      1 !important;

    pointer-events:none !important;
  }


  #mobileAppBarHandle
  .mobile-app-handle-chevron svg{

    width:
      34px !important;

    height:
      12px !important;

    display:block !important;

    overflow:visible;

    fill:none;

    stroke:
      #e9dfd0;

    stroke-width:
      1.8;

    stroke-linecap:
      round;

    stroke-linejoin:
      round;

    transition:
      transform
      .42s
      cubic-bezier(.22,1,.36,1);
  }


  /*
    Cuando está cerrada NO cambiamos el símbolo.
    Rotamos limpiamente el mismo chevron.
  */

  #mobileAppBarHandle
  .mobile-app-handle-chevron.is-up svg{

    transform:
      rotate(180deg);
  }


  /* ========================================================
     ESTADO CERRADO
     ======================================================== */

  #mobileAppBarHandle.is-hidden-state{

    bottom:
      0 !important;

    width:
      94px !important;

    height:
      34px !important;

    border-radius:
      18px 18px 0 0 !important;
  }


  /*
    CORRECCIÓN IMPORTANTE:
    cuando está abajo, damos aire arriba/abajo.
    Ya no queda pegada arriba.
  */

  #mobileAppBarHandle.is-hidden-state
  .mobile-app-handle-line{

    top:
      6px !important;
  }


  #mobileAppBarHandle.is-hidden-state
  .mobile-app-handle-chevron{

    top:
      21px !important;

    width:
      44px !important;

    height:
      14px !important;

    transform:
      translate(-50%,-50%) !important;
  }


  #mobileAppBarHandle.is-hidden-state
  .mobile-app-handle-chevron svg{

    width:
      38px !important;
  }

}


@media(max-width:390px){

  #mobileAppBar .mobile-app-item{

    flex-basis:
      72px !important;

    width:
      72px !important;

    min-width:
      72px !important;
  }

}

/* ==========================================================
   SIBARA LUX · MOBILE BAR
   CACHITOS LATERALES PUNTIAGUDOS
   ========================================================== */

@media(max-width:700px){

  #mobileAppBar.mobile-app-bar{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100% !important;

    background:#09090a !important;

    border-radius:18px 18px 0 0 !important;

    overflow:visible !important;
  }

  /* PUNTA IZQUIERDA */
  #mobileAppBar.mobile-app-bar::before{
    content:"" !important;

    position:absolute !important;

    left:0 !important;
    top:-17px !important;

    width:34px !important;
    height:18px !important;

    background:#09090a !important;

    clip-path:polygon(
      0 100%,
      0 38%,
      16% 0,
      100% 100%
    ) !important;

    pointer-events:none !important;
  }

  /* PUNTA DERECHA */
  #mobileAppBar.mobile-app-bar::after{
    content:"" !important;

    position:absolute !important;

    right:0 !important;
    top:-17px !important;

    width:34px !important;
    height:18px !important;

    background:#09090a !important;

    clip-path:polygon(
      0 100%,
      84% 0,
      100% 38%,
      100% 100%
    ) !important;

    pointer-events:none !important;
  }

}

/* ==========================================================
   SIBARA LUX · MOBILE BAR
   CACHITOS LATERALES PUNTIAGUDOS
   ========================================================== */

@media(max-width:700px){

  #mobileAppBar.mobile-app-bar{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;
    width:100% !important;

    background:#09090a !important;

    border-radius:18px 18px 0 0 !important;

    overflow:visible !important;
  }

  /* PUNTA IZQUIERDA */
  #mobileAppBar.mobile-app-bar::before{
    content:"" !important;

    position:absolute !important;

    left:0 !important;
    top:-17px !important;

    width:34px !important;
    height:18px !important;

    background:#09090a !important;

    clip-path:polygon(
      0 100%,
      0 38%,
      16% 0,
      100% 100%
    ) !important;

    pointer-events:none !important;
  }

  /* PUNTA DERECHA */
  #mobileAppBar.mobile-app-bar::after{
    content:"" !important;

    position:absolute !important;

    right:0 !important;
    top:-17px !important;

    width:34px !important;
    height:18px !important;

    background:#09090a !important;

    clip-path:polygon(
      0 100%,
      84% 0,
      100% 38%,
      100% 100%
    ) !important;

    pointer-events:none !important;
  }

}

/* ==========================================================
   SIBARA LUX · MOBILE BAR FINAL SHAPE
   DOS CACHITOS / PICOS LATERALES HACIA ARRIBA
   ========================================================== */

@media(max-width:700px){

  /*
   * IMPORTANTE:
   * Los cachitos ahora son PARTE DE LA FORMA de la barra.
   * No usamos ::before / ::after.
   * Así los iconos permanecen recortados dentro.
   */

  #mobileAppBar.mobile-app-bar{
    left:0 !important;
    right:0 !important;
    bottom:0 !important;

    width:100% !important;
    height:82px !important;

    margin:0 !important;

    padding:
      12px 8px 0 8px !important;

    background:#09090a !important;

    border:0 !important;
    border-radius:0 !important;

    /*
       PICO IZQUIERDO        PICO DERECHO

       0,0  \____________/  100%,0

       La línea central baja 14px.
    */

    clip-path:polygon(
      0 0,
      25px 14px,
      calc(100% - 25px) 14px,
      100% 0,
      100% 100%,
      0 100%
    ) !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    scroll-behavior:smooth !important;
    -webkit-overflow-scrolling:touch;

    box-shadow:
      0 -8px 28px rgba(0,0,0,.20) !important;
  }


  /* ELIMINAR TODOS LOS CACHITOS VIEJOS */

  #mobileAppBar.mobile-app-bar::before,
  #mobileAppBar.mobile-app-bar::after{
    display:none !important;
    content:none !important;
  }


  /*
   * Los botones quedan debajo de la parte inclinada,
   * totalmente dentro de la barra.
   */

  #mobileAppBar .mobile-app-item{
    height:68px !important;

    flex:
      0 0 74px !important;

    width:74px !important;
    min-width:74px !important;

    margin:0 !important;

    overflow:hidden !important;

    position:relative !important;

    border-radius:13px !important;
  }


  #mobileAppBar .mobile-app-item > svg,
  #mobileAppBar .mobile-app-icon-wrap > svg{
    width:20px !important;
    height:20px !important;
  }


  /*
   * HANDLE:
   * ahora se coloca encima de la nueva altura real.
   */

  #mobileAppBarHandle{
    bottom:82px !important;
  }


  #mobileAppBarHandle.is-hidden-state{
    bottom:0 !important;
  }


  /*
   * Cuando se oculta, baja la barra completa.
   */

  #mobileAppBar.mobile-app-bar.is-hidden{
    transform:
      translate3d(0,110%,0) !important;

    opacity:0 !important;
    pointer-events:none !important;
  }


  body{
    padding-bottom:82px !important;
  }


  body.mobile-app-bar-hidden{
    padding-bottom:24px !important;
  }


  .toast{
    bottom:104px !important;
  }

}


@media(max-width:390px){

  #mobileAppBar.mobile-app-bar{

    /*
     * Cachitos un poquito más estrechos
     * en teléfonos pequeños.
     */

    clip-path:polygon(
      0 0,
      21px 13px,
      calc(100% - 21px) 13px,
      100% 0,
      100% 100%,
      0 100%
    ) !important;
  }

}

/* ==========================================================
   SIBARA LUX · MOBILE BAR
   CACHITOS REDONDEADOS
   ========================================================== */

@media(max-width:700px){

  #mobileAppBar.mobile-app-bar{
    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;

    width:100% !important;
    height:84px !important;

    margin:0 !important;
    padding:12px 8px 0 8px !important;

    background:#09090a !important;

    clip-path:none !important;
    border:0 !important;
    border-radius:20px 20px 0 0 !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth !important;

    box-shadow:0 -8px 28px rgba(0,0,0,.20) !important;

    isolation:isolate;
  }

  /*
   * CACHITOS REDONDOS
   * Ya no rectos.
   */

  #mobileAppBar.mobile-app-bar::before,
  #mobileAppBar.mobile-app-bar::after{
    content:"" !important;
    position:absolute !important;
    top:-14px !important;

    width:54px !important;
    height:24px !important;

    background:#09090a !important;

    pointer-events:none !important;
    z-index:0 !important;
  }

  #mobileAppBar.mobile-app-bar::before{
    left:0 !important;
    border-radius:28px 28px 0 0 !important;
    transform:rotate(-8deg) !important;
    transform-origin:left bottom !important;
  }

  #mobileAppBar.mobile-app-bar::after{
    right:0 !important;
    border-radius:28px 28px 0 0 !important;
    transform:rotate(8deg) !important;
    transform-origin:right bottom !important;
  }

  /*
   * El contenido queda por encima.
   */

  #mobileAppBar .mobile-app-item,
  #mobileAppBar .mobile-app-item > *,
  #mobileAppBar .mobile-app-icon-wrap{
    position:relative !important;
    z-index:1 !important;
  }

  #mobileAppBar .mobile-app-item{
    height:68px !important;
    flex:0 0 74px !important;
    width:74px !important;
    min-width:74px !important;
    margin:0 !important;
    overflow:hidden !important;
    border-radius:13px !important;
  }

  #mobileAppBarHandle{
    bottom:84px !important;
  }

  #mobileAppBarHandle.is-hidden-state{
    bottom:0 !important;
  }

  #mobileAppBar.mobile-app-bar.is-hidden{
    transform:translate3d(0,110%,0) !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  body{
    padding-bottom:84px !important;
  }

  body.mobile-app-bar-hidden{
    padding-bottom:24px !important;
  }

  .toast{
    bottom:106px !important;
  }
}

@media(max-width:390px){

  #mobileAppBar.mobile-app-bar::before,
  #mobileAppBar.mobile-app-bar::after{
    width:46px !important;
    height:20px !important;
    top:-12px !important;
  }

}

/* ==========================================================
   SIBARA LUX · MOBILE BAR
   ARRIBA RECTA EN EL CENTRO + CURVA QUE SUBE EN LOS EXTREMOS
   ========================================================== */

@media(max-width:700px){

  #mobileAppBar.mobile-app-bar{
    /*
      Ajusta solo estos 3 valores si luego quieres afinar:
      --upcurve-height : cuánto se levantan los extremos
      --upcurve-width  : qué tan antes empieza la curva
      --bar-bg         : color de la barra
    */
    --upcurve-height: 18px;
    --upcurve-width: 40px;
    --bar-bg: #09090a;

    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;

    width:100% !important;
    height:84px !important;

    margin:0 !important;
    padding:var(--upcurve-height) 8px 0 8px !important;

    border:0 !important;
    border-radius:0 !important;

    /*
      Centro recto:
      la barra negra empieza después de la altura de la curva
    */
    background:
      linear-gradient(
        to bottom,
        transparent 0,
        transparent var(--upcurve-height),
        var(--bar-bg) var(--upcurve-height),
        var(--bar-bg) 100%
      ) !important;

    clip-path:none !important;
    -webkit-mask:none !important;
    mask:none !important;

    overflow-x:auto !important;
    overflow-y:hidden !important;

    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth !important;
    box-shadow:0 -8px 28px rgba(0,0,0,.20) !important;
  }

  /*
    PIEZA CURVA IZQUIERDA
    Sale hacia arriba en el extremo
  */
  #mobileAppBar.mobile-app-bar::before{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    top:0 !important;

    width:var(--upcurve-width) !important;
    height:var(--upcurve-height) !important;

    background:
      no-repeat center / 100% 100%
      url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 18' preserveAspectRatio='none'>\
<path fill='%2309090a' d='M0 18 L0 0 C11 0 24 3 40 18 Z'/>\
</svg>") !important;

    pointer-events:none !important;
    z-index:0 !important;
  }

  /*
    PIEZA CURVA DERECHA
    Espejo de la izquierda
  */
  #mobileAppBar.mobile-app-bar::after{
    content:"" !important;
    position:absolute !important;
    right:0 !important;
    top:0 !important;

    width:var(--upcurve-width) !important;
    height:var(--upcurve-height) !important;

    background:
      no-repeat center / 100% 100%
      url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 18' preserveAspectRatio='none'>\
<path fill='%2309090a' d='M40 18 L40 0 C29 0 16 3 0 18 Z'/>\
</svg>") !important;

    pointer-events:none !important;
    z-index:0 !important;
  }

  /*
    Contenido por encima de las curvas
  */
  #mobileAppBar .mobile-app-item,
  #mobileAppBar .mobile-app-item > *,
  #mobileAppBar .mobile-app-icon-wrap{
    position:relative !important;
    z-index:1 !important;
  }

  #mobileAppBar .mobile-app-item{
    height:66px !important;
    margin-top:0 !important;
  }

  #mobileAppBarHandle{
    bottom:84px !important;
  }

  #mobileAppBarHandle.is-hidden-state{
    bottom:0 !important;
  }

  body{
    padding-bottom:84px !important;
  }

  body.mobile-app-bar-hidden{
    padding-bottom:24px !important;
  }

  .toast{
    bottom:106px !important;
  }

}

@media(max-width:390px){

  #mobileAppBar.mobile-app-bar{
    --upcurve-height: 16px;
    --upcurve-width: 34px;
  }

}

/* ==========================================================
   FIX: SIN ESPACIO TRANSPARENTE
   Barra negra completa + curvas que sobresalen arriba
   ========================================================== */

@media(max-width:700px){

  #mobileAppBar.mobile-app-bar{
    --upcurve-height:18px;
    --upcurve-width:44px;
    --bar-bg:#09090a;

    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;

    width:100% !important;
    height:70px !important;

    margin:0 !important;
    padding:0 8px !important;

    background:var(--bar-bg) !important;

    border:0 !important;
    border-radius:0 !important;

    clip-path:none !important;
    -webkit-mask:none !important;
    mask:none !important;

    overflow-x:auto !important;
    overflow-y:visible !important;

    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth !important;
  }

  /* CURVA IZQUIERDA */
  #mobileAppBar.mobile-app-bar::before{
    content:"" !important;

    position:absolute !important;
    left:0 !important;
    top:calc(var(--upcurve-height) * -1) !important;

    width:var(--upcurve-width) !important;
    height:var(--upcurve-height) !important;

    background:
      no-repeat center / 100% 100%
      url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 18' preserveAspectRatio='none'>\
<path fill='%2309090a' d='M0 18 L0 0 C12 0 25 5 44 18 Z'/>\
</svg>") !important;

    pointer-events:none !important;
    z-index:0 !important;
  }

  /* CURVA DERECHA */
  #mobileAppBar.mobile-app-bar::after{
    content:"" !important;

    position:absolute !important;
    right:0 !important;
    top:calc(var(--upcurve-height) * -1) !important;

    width:var(--upcurve-width) !important;
    height:var(--upcurve-height) !important;

    background:
      no-repeat center / 100% 100%
      url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 18' preserveAspectRatio='none'>\
<path fill='%2309090a' d='M44 18 L44 0 C32 0 19 5 0 18 Z'/>\
</svg>") !important;

    pointer-events:none !important;
    z-index:0 !important;
  }

  #mobileAppBar .mobile-app-item{
    height:70px !important;
    margin-top:0 !important;
    position:relative !important;
    z-index:1 !important;
  }

  #mobileAppBarHandle{
    bottom:70px !important;
  }

  #mobileAppBarHandle.is-hidden-state{
    bottom:0 !important;
  }

  body{
    padding-bottom:70px !important;
  }

  body.mobile-app-bar-hidden{
    padding-bottom:24px !important;
  }

}

/* ==========================================================
   FIX: SIN ESPACIO TRANSPARENTE
   Barra negra completa + curvas que sobresalen arriba
   ========================================================== */

@media(max-width:700px){

  #mobileAppBar.mobile-app-bar{
    --upcurve-height:18px;
    --upcurve-width:44px;
    --bar-bg:#09090a;

    position:fixed !important;
    left:0 !important;
    right:0 !important;
    bottom:0 !important;

    width:100% !important;
    height:70px !important;

    margin:0 !important;
    padding:0 8px !important;

    background:var(--bar-bg) !important;

    border:0 !important;
    border-radius:0 !important;

    clip-path:none !important;
    -webkit-mask:none !important;
    mask:none !important;

    overflow-x:auto !important;
    overflow-y:visible !important;

    -webkit-overflow-scrolling:touch;
    scroll-behavior:smooth !important;
  }

  /* CURVA IZQUIERDA */
  #mobileAppBar.mobile-app-bar::before{
    content:"" !important;

    position:absolute !important;
    left:0 !important;
    top:calc(var(--upcurve-height) * -1) !important;

    width:var(--upcurve-width) !important;
    height:var(--upcurve-height) !important;

    background:
      no-repeat center / 100% 100%
      url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 18' preserveAspectRatio='none'>\
<path fill='%2309090a' d='M0 18 L0 0 C12 0 25 5 44 18 Z'/>\
</svg>") !important;

    pointer-events:none !important;
    z-index:0 !important;
  }

  /* CURVA DERECHA */
  #mobileAppBar.mobile-app-bar::after{
    content:"" !important;

    position:absolute !important;
    right:0 !important;
    top:calc(var(--upcurve-height) * -1) !important;

    width:var(--upcurve-width) !important;
    height:var(--upcurve-height) !important;

    background:
      no-repeat center / 100% 100%
      url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 18' preserveAspectRatio='none'>\
<path fill='%2309090a' d='M44 18 L44 0 C32 0 19 5 0 18 Z'/>\
</svg>") !important;

    pointer-events:none !important;
    z-index:0 !important;
  }

  #mobileAppBar .mobile-app-item{
    height:70px !important;
    margin-top:0 !important;
    position:relative !important;
    z-index:1 !important;
  }

  #mobileAppBarHandle{
    bottom:70px !important;
  }

  #mobileAppBarHandle.is-hidden-state{
    bottom:0 !important;
  }

  body{
    padding-bottom:70px !important;
  }

  body.mobile-app-bar-hidden{
    padding-bottom:24px !important;
  }

}

/* ==========================================================
   HEAVENLY · HEADER UNIFICADO · TYPO SPORT 2026
   ========================================================== */

.site-header,
.site-header *,
.site-mega,
.site-mega *,
.site-nav,
.site-nav *{
    font-family:"DM Sans",Arial,sans-serif !important;
}

/* navegación principal */
.site-header nav a,
.site-nav a,
.site-header-menu a{
    font-weight:700 !important;
}

/* logo / marca */
.site-header-logo,
.site-logo,
.site-brand,
.site-header .brand{
    font-weight:800 !important;
}

/* títulos megamenu */
.site-mega h1,
.site-mega h2,
.site-mega h3,
.site-mega h4,
.site-mega-title,
.site-mega-heading{
    font-weight:800 !important;
}

/* enlaces megamenu */
.site-mega a,
.site-mega-link{
    font-weight:650 !important;
}

/* texto secundario */
.site-mega p,
.site-mega span{
    font-weight:550 !important;
}

/* precio / producto */
.site-mega strong,
.site-mega .price,
.site-mega .product-name{
    font-weight:750 !important;
}

/* búsqueda */
.site-header input,
.site-header button{
    font-family:"DM Sans",Arial,sans-serif !important;
    font-weight:650 !important;
}


/* ==========================================================
   HEAVENLY · MONTSERRAT HEADER / MEGAMENU FINAL
   ========================================================== */

:root{
    --site-header-serif:"Montserrat",Arial,sans-serif !important;
    --site-header-sans:"Montserrat",Arial,sans-serif !important;
}

/* TODO EL HEADER */

.site-header,
.site-header *,
.site-header-shell,
.site-header-shell *,
.mega-menu,
.mega-menu *,
.mega-menu-inner,
.mega-menu-inner *{
    font-family:"Montserrat",Arial,sans-serif !important;
}


/* NAVEGACION PRINCIPAL */

.site-header nav a,
.site-header .nav-link,
.site-header .menu-link,
.site-header [class*="nav"] a{
    font-family:"Montserrat",Arial,sans-serif !important;
    font-weight:700 !important;
    letter-spacing:-0.015em !important;
}


/* LOGO HEAVENLY */

.site-header .brand-main,
.site-header .site-brand,
.site-header .site-logo,
.site-header .logo,
.site-header [class*="brand"]{
    font-family:"Montserrat",Arial,sans-serif !important;
    font-weight:800 !important;
}


/* MEGAMENU - TITULOS */

.mega-menu h1,
.mega-menu h2,
.mega-menu h3,
.mega-menu h4,
.mega-menu .mega-title,
.mega-menu .mega-heading,
.mega-menu [class*="title"],
.mega-menu [class*="heading"]{
    font-family:"Montserrat",Arial,sans-serif !important;
    font-weight:800 !important;
    letter-spacing:-0.025em !important;
}


/* MEGAMENU - LINKS */

.mega-menu a,
.mega-menu li,
.mega-menu .product-name,
.mega-menu [class*="link"]{
    font-family:"Montserrat",Arial,sans-serif !important;
    font-weight:650 !important;
}


/* PRODUCTOS DEL MEGAMENU */

.mega-menu .product-name,
.mega-menu .price,
.mega-menu strong{
    font-weight:800 !important;
}


/* TEXTOS SECUNDARIOS */

.mega-menu p,
.mega-menu span,
.site-header p,
.site-header span{
    font-family:"Montserrat",Arial,sans-serif !important;
    font-weight:600 !important;
}


/* BUSCADOR */

.site-header input,
.site-header button,
.site-header select{
    font-family:"Montserrat",Arial,sans-serif !important;
    font-weight:650 !important;
}


/* ICONOS - NO ENGORDAR SVG */

.site-header svg,
.site-header svg *,
.mega-menu svg,
.mega-menu svg *{
    font-family:initial !important;
}