/*
  LPDO Pedir 1.45.21
  Barra de categorías adaptada desde la implementación estable de Carta.
*/

:root {
  --lpdo-pedir-header-h: 74px;
  --lpdo-pedir-cats-left: 0px;
  --lpdo-pedir-cats-width: 100vw;
}

/* Contenedor que se crea alrededor de #categoryTabs */
#lpdo-pedir-cats-wrap-v14521 {
  position: relative;
  width: 100%;
  margin: 0 0 28px;
  background: #f7efe4;
  z-index: 900;
}

/* Estado fijo: mismo sistema usado por Carta */
#lpdo-pedir-cats-wrap-v14521.lpdo-pedir-cats-fixed-v14521 {
  position: fixed !important;
  top: var(--lpdo-pedir-header-h) !important;
  left: var(--lpdo-pedir-cats-left) !important;
  width: var(--lpdo-pedir-cats-width) !important;
  z-index: 9600 !important;

  margin: 0 !important;
  background: #f7efe4 !important;
  box-shadow: 0 8px 18px rgba(40, 25, 12, .06) !important;
}

/* Evita el salto de contenido al fijar la barra */
#lpdo-pedir-cats-spacer-v14521 {
  display: block !important;
  width: 100% !important;
  height: 0;
  pointer-events: none !important;
}

/* Barra interior */
#categoryTabs,
.category-tabs {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;

  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 12px !important;

  width: 100% !important;
  max-width: 100% !important;

  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior-x: contain !important;
  scrollbar-width: none !important;

  background: #f7efe4 !important;
  padding: 10px 18px 12px !important;
  margin: 0 !important;

  border: 0 !important;
  border-bottom: 1px solid rgba(90, 45, 18, .08) !important;
  box-shadow: none !important;
}

#categoryTabs::-webkit-scrollbar,
.category-tabs::-webkit-scrollbar {
  display: none !important;
}

/* Botones: misma forma visual */
#categoryTabs > *,
.category-tabs > * {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
}

#categoryTabs a,
#categoryTabs button,
#categoryTabs [role="button"],
#categoryTabs .tab,
#categoryTabs .chip,
#categoryTabs .category-tab,
.category-tabs a,
.category-tabs button,
.category-tabs [role="button"],
.category-tabs .tab,
.category-tabs .chip,
.category-tabs .category-tab {
  appearance: none !important;
  min-height: 50px !important;
  padding: 13px 18px !important;

  border: 1px solid rgba(97, 62, 35, .16) !important;
  border-radius: 999px !important;

  background: #fffaf4 !important;
  color: #16132a !important;

  font-weight: 900 !important;
  font-size: 15px !important;
  line-height: 1 !important;
  text-decoration: none !important;

  box-shadow: none !important;
  cursor: pointer !important;
}

/* Estado seleccionado */
#categoryTabs .active,
#categoryTabs .is-active,
#categoryTabs .selected,
#categoryTabs [aria-current="true"],
#categoryTabs [aria-selected="true"],
#categoryTabs .current,
.category-tabs .active,
.category-tabs .is-active,
.category-tabs .selected,
.category-tabs [aria-current="true"],
.category-tabs [aria-selected="true"],
.category-tabs .current {
  background: #5a2d12 !important;
  color: #fff !important;
  border-color: #5a2d12 !important;
}

/* La bolsa siempre queda por encima */
#cartDrawer,
.cart-drawer,
aside[aria-label*="Bolsa"],
aside[aria-label*="compras"] {
  z-index: 99999 !important;
}

/* Ocultar implementaciones visuales antiguas */
.lpdo-cat-scrollbar-2263,
.lpdo-cat-scrollbar-thumb-2263,
.category-scrollbar,
.category-scrollbar-thumb,
[class*="cat-scrollbar"],
[class*="category-scrollbar"],
[id*="scrollbar-visual-categorias"],
[class*="scrollbar-visual"],
[class*="scroll-hint"],
[class*="desliza"] {
  display: none !important;
  opacity: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

/* Cuando se abre la bolsa, la barra sigue fija pero queda detrás */
body.lpdo-cart-open #lpdo-pedir-cats-wrap-v14521 {
  z-index: 800 !important;
  pointer-events: none !important;
}

@media (max-width: 860px) {
  #categoryTabs,
  .category-tabs {
    padding: 9px 14px 11px !important;
    gap: 9px !important;
  }

  #categoryTabs a,
  #categoryTabs button,
  #categoryTabs [role="button"],
  #categoryTabs .tab,
  #categoryTabs .chip,
  #categoryTabs .category-tab,
  .category-tabs a,
  .category-tabs button,
  .category-tabs [role="button"],
  .category-tabs .tab,
  .category-tabs .chip,
  .category-tabs .category-tab {
    min-height: 46px !important;
    padding: 11px 15px !important;
    font-size: 14px !important;
  }
}

/* LPDO TITULOS CATEGORIAS VISIBLES 1.45.22 START */

#productGrid .lpdo-pedir-category-section-2380 {
  scroll-margin-top:
    calc(var(--lpdo-pedir-header-h) + 96px) !important;
}

#productGrid .lpdo-pedir-category-head-2380 {
  padding-top: 20px !important;
}

/* LPDO TITULOS CATEGORIAS VISIBLES 1.45.22 END */