:root{
  --inventory-shell: min(1280px, calc(100vw - 64px));
  --inventory-border: rgba(17, 17, 17, 0.12);
  --inventory-panel: #f2f5f8;
  --inventory-text: #181818;
  --inventory-muted: #5f5f5f;
  --inventory-accent: #ff0000;
  --inventory-shadow: 0 20px 44px rgba(16, 28, 47, 0.08);
}

.InventoryPageBody{
  background:
    radial-gradient(circle at top left, rgba(235, 239, 244, 0.95), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
  color: var(--inventory-text);
}

.InventoryMain{
  padding: 0 0 5vw;
}

.InventoryShell{
  width: var(--inventory-shell);
  margin: 0 auto;
}

.InventoryHero{
  padding: 0;
}

.InventoryHeroMedia{
  position: relative;
  min-height: 29vw;
  display: flex;
  align-items: center;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(18, 18, 18, 0.16), rgba(18, 18, 18, 0.42)),
    url("../../img/inventario/inventario.webp") center center / cover no-repeat;
}

.InventoryHeroOverlay{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(18, 18, 18, 0.18), rgba(18, 18, 18, 0.48)),
    radial-gradient(circle at center, rgba(20, 20, 20, 0.2), transparent 46%);
}

.InventoryHeroInner{
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 29vw;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.InventoryEyebrow{
  margin: 0 0 1vw;
  font: 700 .92vw/1.2 "Rubik", sans-serif;
  letter-spacing: .18vw;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}

.InventoryTitle{
  margin: 0;
  font: 700 clamp(2.4rem, 4.4vw, 5rem)/0.96 "TASA Orbiter", sans-serif;
  letter-spacing: -.05vw;
  color: #ffffff;
  text-shadow: 0 0.18vw 1vw rgba(0, 0, 0, 0.32);
}

.InventoryIntro{
  max-width: 56vw;
  margin: 1.2vw 0 0;
  font: 400 1.02vw/1.7 "Rubik", sans-serif;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 0.14vw 0.75vw rgba(0, 0, 0, 0.28);
}

.InventoryBreadcrumbSection{
  padding: 2.4vw 0 1vw;
}

.InventoryBreadcrumb{
  display: inline-flex;
  align-items: center;
  gap: .7vw;
  margin: 0;
  font: 700 .92vw/1.2 "TASA Orbiter", sans-serif;
  color: #6a6a6a;
}

.InventoryBreadcrumb a{
  color: inherit;
  text-decoration: none;
}

.InventoryBreadcrumb span{
  opacity: .6;
}

.InventorySection{
  padding-bottom: 3vw;
}

.InventoryLayout{
  display: grid;
  grid-template-columns: minmax(250px, 18vw) minmax(0, 1fr);
  gap: 2.4vw;
  align-items: start;
}

.InventorySidebar{
  position: sticky;
  top: 8.6vw;
}

.InventoryFilterCard{
  padding: 1.8vw 1.55vw;
  border: 0.08vw solid var(--inventory-border);
  background: rgba(255, 255, 255, 0.92);
  box-shadow: var(--inventory-shadow);
  backdrop-filter: blur(10px);
}

.InventoryFilterTitle,
.InventorySearchLabel,
.InventoryFilterGroup summary{
  font-family: "TASA Orbiter", sans-serif;
}

.InventoryFilterTitle{
  margin: 0 0 1.25vw;
  font-size: 1.55vw;
}

.InventorySearchLabel{
  display: block;
  margin-bottom: .55vw;
  font-size: .98vw;
}

.InventorySearchInput{
  width: 100%;
  padding: .92vw 1vw;
  border: 0.08vw solid rgba(17, 17, 17, 0.14);
  background: #ffffff;
  font: 500 .94vw/1.2 "Rubik", sans-serif;
  color: var(--inventory-text);
}

.InventorySearchInput:focus-visible{
  outline: 0.14vw solid rgba(255, 0, 0, 0.38);
  outline-offset: 0.15vw;
  border-color: rgba(255, 0, 0, 0.28);
}

.InventoryFilterGroup{
  margin: 1.25vw 0 0;
  border-top: 0.08vw solid rgba(25, 44, 78, 0.18);
  padding-top: 1vw;
}

.InventoryFilterGroup summary{
  cursor: pointer;
  list-style: none;
  font-size: 1.08vw;
}

.InventoryFilterGroup summary::-webkit-details-marker{
  display: none;
}

.InventoryCheckboxList{
  display: grid;
  gap: .8vw;
  padding-top: 1vw;
}

.InventoryCheckbox{
  display: flex;
  align-items: center;
  gap: .7vw;
  font: 500 .95vw/1.3 "Rubik", sans-serif;
  color: var(--inventory-text);
}

.InventoryCheckbox input{
  width: 1vw;
  height: 1vw;
  accent-color: #ff0000;
}

.InventoryClearBtn{
  width: 100%;
  margin-top: 1.4vw;
  padding: .95vw 1vw;
  border: 0.08vw solid rgba(25, 44, 78, 0.18);
  background: transparent;
  font: 700 .9vw/1 "TASA Orbiter", sans-serif;
  color: var(--inventory-text);
  cursor: pointer;
  transition: background-color .22s ease, color .22s ease, border-color .22s ease;
}

.InventoryClearBtn:hover,
.InventoryClearBtn:focus-visible{
  background: #ff0000;
  color: #ffffff;
  border-color: #ff0000;
  outline: none;
}

.InventoryContent{
  min-width: 0;
}

.InventoryResultsBar{
  padding: 0 0 1.25vw;
}

.InventoryResultsText{
  margin: 0;
  font: 700 1.46vw/1.18 "TASA Orbiter", sans-serif;
}

.InventoryActiveFilters{
  display: flex;
  flex-wrap: wrap;
  gap: .55vw;
  margin-top: .9vw;
}

.InventoryActiveFilter{
  display: inline-flex;
  align-items: center;
  padding: .5vw .78vw;
  border: 0.08vw solid rgba(255, 0, 0, 0.18);
  background: rgba(255,255,255,.9);
  font: 600 .78vw/1 "Rubik", sans-serif;
  color: #b30000;
}

.InventoryGrid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.15vw;
}

.InventoryCard{
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 21vw;
  border: 0.08vw solid rgba(25, 44, 78, 0.12);
  background: rgba(255, 255, 255, 0.95);
  text-decoration: none;
  box-shadow: 0 16px 32px rgba(16, 28, 47, 0.07);
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.InventoryCard:hover,
.InventoryCard:focus-visible{
  transform: translateY(-.28vw);
  border-color: rgba(255, 0, 0, 0.42);
  box-shadow: 0 20px 36px rgba(16, 28, 47, 0.12);
  outline: none;
}

.InventoryCardMedia{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .4vw;
  min-height: 16.1vw;
  background:
    radial-gradient(circle at top, rgba(224, 230, 236, 0.75), transparent 52%),
    linear-gradient(180deg, #ffffff 0%, #f3f6fa 100%);
}

.InventoryCardMedia img{
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
  display: block;
}

.InventoryCardBody{
  padding: 1.15vw 1.25vw 1.35vw;
  border-top: 0.08vw solid rgba(25, 44, 78, 0.08);
}

.InventoryCardTitle{
  margin: 0;
  font: 700 1.28vw/1.08 "TASA Orbiter", sans-serif;
  color: #13233d;
}




.InventoryCardMetaAction::after{
  content: "›";
  color: #ff0000;
  font-size: 1.05vw;
  line-height: 1;
  transition: transform .22s ease;
}

.InventoryCard:hover .InventoryCardMetaAction::after,
.InventoryCard:focus-visible .InventoryCardMetaAction::after{
  transform: translateX(.18vw);
}

.InventoryEmpty{
  padding: 3vw 2vw;
  border: 0.08vw dashed rgba(25, 44, 78, 0.2);
  background: rgba(255, 255, 255, 0.82);
  text-align: center;
}

.InventoryEmpty h3{
  margin: 0 0 .75vw;
  font: 700 1.42vw/1.15 "TASA Orbiter", sans-serif;
}

.InventoryEmpty p{
  margin: 0;
  font: 400 .98vw/1.6 "Rubik", sans-serif;
  color: var(--inventory-muted);
}

.InventoryEmptyCta{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.4vw;
  padding: .8vw 1.25vw;
  background: #ff0000;
  color: #fff;
  font: 700 .82vw/1.2 "Rubik", sans-serif;
  text-decoration: none;
  transition: background-color .2s ease, transform .2s ease;
}

.InventoryEmptyCta:hover,
.InventoryEmptyCta:focus-visible{
  background: #cf0000;
  transform: translateY(-2px);
}

.InventoryPagination{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .95vw;
  padding: 2vw 0 0;
}

.InventoryPageArrow{
  width: 3.1vw;
  height: 3.1vw;
  border: 0.12vw solid rgba(255, 0, 0, 0.55);
  border-radius: 50%;
  background: transparent;
  color: #ff0000;
  font: 700 1.7vw/1 "TASA Orbiter", sans-serif;
  cursor: pointer;
  transition: background-color .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}

.InventoryPageArrow:hover,
.InventoryPageArrow:focus-visible,
.InventoryPageButton:hover,
.InventoryPageButton:focus-visible{
  outline: none;
  transform: translateY(-0.08vw);
}

.InventoryPageArrow:hover,
.InventoryPageArrow:focus-visible{
  background: #ff0000;
  color: #ffffff;
  border-color: #ff0000;
}

.InventoryPageArrow:disabled{
  opacity: .35;
  cursor: default;
  transform: none;
}

.InventoryPageNumbers{
  display: flex;
  align-items: center;
  gap: .55vw;
}

.InventoryPageButton{
  min-width: 2.9vw;
  height: 2.9vw;
  padding: 0 .7vw;
  border: 0.08vw solid rgba(255, 0, 0, 0.18);
  background: rgba(255,255,255,.96);
  color: #c40000;
  font: 700 .98vw/1 "TASA Orbiter", sans-serif;
  cursor: pointer;
  transition: background-color .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}

.InventoryPageButton.is-active{
  background: #ff0000;
  border-color: #ff0000;
  color: #ffffff;
}

.InventoryPageDots{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2vw;
  color: #8c8c8c;
  font: 700 1.05vw/1 "TASA Orbiter", sans-serif;
}

body.dark-mode.InventoryPageBody{
  background:
    radial-gradient(circle at top left, rgba(55, 60, 68, 0.5), transparent 34%),
    linear-gradient(180deg, #111315 0%, #171a1d 100%);
  color: #f0f3f7;
}

body.dark-mode .InventoryIntro,
body.dark-mode .InventoryEyebrow,
body.dark-mode .InventoryEmpty p{
  color: #b4bcc9;
}

body.dark-mode .InventoryFilterCard,
body.dark-mode .InventoryCard,
body.dark-mode .InventoryEmpty,
body.dark-mode .InventoryActiveFilter,
body.dark-mode .InventoryPageButton{
  background: rgba(24, 28, 32, 0.94);
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.26);
}

body.dark-mode .InventorySearchInput{
  background: rgba(15, 18, 22, 0.96);
  border-color: rgba(255, 255, 255, 0.12);
  color: #f0f3f7;
}

body.dark-mode .InventorySearchInput::placeholder{
  color: #95a1b1;
}

body.dark-mode .InventoryClearBtn{
  color: #f0f3f7;
  border-color: rgba(255, 255, 255, 0.14);
}

body.dark-mode .InventoryFilterTitle,
body.dark-mode .InventorySearchLabel,
body.dark-mode .InventoryFilterGroup summary,
body.dark-mode .InventoryCheckbox{
  color: #f0f3f7;
}

body.dark-mode .InventoryFilterGroup{
  border-top-color: rgba(255, 255, 255, 0.14);
}

body.dark-mode .InventoryCheckbox input{
  border-color: rgba(255, 255, 255, 0.18);
}

body.dark-mode .InventoryCardMedia{
  background:
    radial-gradient(circle at top, rgba(79, 88, 100, 0.38), transparent 52%),
    linear-gradient(180deg, #1d2227 0%, #171b20 100%);
}

body.dark-mode .InventoryCardTitle,
body.dark-mode .InventoryTitle,
body.dark-mode .InventoryResultsText,
body.dark-mode .InventoryEmpty h3{
  color: #f8fafc;
}

body.dark-mode .InventoryEmptyCta{
  color: #fff;
}


body.dark-mode .InventoryBreadcrumb,
body.dark-mode .InventoryPageDots{
  color: #b4bcc9;
}

body.dark-mode .InventoryPageButton{
  color: #f0f3f7;
}

body.dark-mode .InventoryPageButton:hover,
body.dark-mode .InventoryPageButton:focus-visible{
  color: #ff8c8c;
  border-color: rgba(255, 0, 0, 0.4);
}

body.dark-mode .InventoryPageArrow{
  border-color: rgba(255, 0, 0, 0.55);
  color: #ff5a5a;
}

body.dark-mode .InventoryPageArrow:hover,
body.dark-mode .InventoryPageArrow:focus-visible,
body.dark-mode .InventoryPageButton.is-active{
  background: #ff0000;
  border-color: #ff0000;
  color: #ffffff;
}

@media only screen and (max-width: 700px){
  :root{
    --inventory-shell: calc(100vw - 13vw);
  }

  .InventoryMain{
    padding: 0 0 12vw;
  }

  .InventoryHero{
    padding-bottom: 0;
  }

  .InventoryHeroMedia,
  .InventoryHeroInner{
    min-height: 64vw;
  }

  .InventoryEyebrow{
    margin-bottom: 3vw;
    font-size: 3vw;
    letter-spacing: .52vw;
  }

  .InventoryTitle{
    font-size: 11vw;
    line-height: .98;
  }

  .InventoryIntro{
    max-width: 82vw;
    margin-top: 3.8vw;
    font-size: 3.9vw;
    line-height: 1.6;
  }

  .InventoryBreadcrumbSection{
    padding: 6vw 0 2.6vw;
  }

  .InventoryBreadcrumb{
    gap: 2vw;
    font-size: 3.3vw;
  }

  .InventoryLayout{
    grid-template-columns: 1fr;
    gap: 5vw;
  }

  .InventorySidebar{
    position: static;
  }

  .InventoryFilterCard{
    padding: 5vw 4.8vw;
  }

  .InventoryFilterTitle{
    margin-bottom: 4vw;
    font-size: 6vw;
  }

  .InventorySearchLabel,
  .InventoryFilterGroup summary{
    font-size: 4.2vw;
  }

  .InventorySearchInput{
    padding: 3.6vw 3.8vw;
    font-size: 4vw;
  }

  .InventoryCheckboxList{
    gap: 2.6vw;
    padding-top: 3vw;
  }

  .InventoryCheckbox{
    gap: 2.4vw;
    font-size: 4vw;
  }

  .InventoryCheckbox input{
    width: 4.6vw;
    height: 4.6vw;
  }

  .InventoryClearBtn{
    margin-top: 5vw;
    padding: 3.8vw 4vw;
    font-size: 3.7vw;
  }

  .InventoryResultsBar{
    padding: 0 0 4vw;
  }

  .InventoryResultsText{
    font-size: 5.2vw;
  }

  .InventoryActiveFilters{
    gap: 1.8vw;
    margin-top: 3vw;
  }

  .InventoryActiveFilter{
    padding: 1.8vw 2.6vw;
    font-size: 3.2vw;
  }

  .InventoryGrid{
    grid-template-columns: 1fr;
    gap: 3.4vw;
  }

  .InventoryCard{
    min-height: 0;
  }

  .InventoryCardMedia{
    min-height: 56vw;
    padding: 1.8vw;
  }

  .InventoryCardMedia img{
    width: 100%;
    height: 100%;
  }

  .InventoryCardBody{
    padding: 4vw 4.2vw 4.6vw;
  }

  .InventoryCardTitle{
    font-size: 5.2vw;
  }

  .InventoryEmpty{
    padding: 9vw 5vw;
  }

  .InventoryEmpty h3{
    font-size: 5vw;
  }

  .InventoryEmpty p{
    font-size: 3.8vw;
  }

  .InventoryEmptyCta{
    margin-top: 4vw;
    padding: 3vw 4.5vw;
    font-size: 3.5vw;
  }

  .InventoryPagination{
    gap: 2.8vw;
    padding-top: 6vw;
  }

  .InventoryPageArrow{
    width: 11vw;
    height: 11vw;
    border-width: 0.35vw;
    font-size: 6vw;
  }

  .InventoryPageNumbers{
    gap: 1.4vw;
  }

  .InventoryPageButton{
    min-width: 9.2vw;
    height: 9.2vw;
    padding: 0 2vw;
    font-size: 3.8vw;
  }

  .InventoryPageDots{
    min-width: 6vw;
    font-size: 4vw;
  }
}
