/* Companion equipment: dedicated sanctuary layout, loaded after the shared profile styles. */
.pet-inventory-page {
  --pet-equipment-gold: #f1d184;
  --pet-equipment-cream: #fff2c8;
  --pet-equipment-green: #5d9a58;
  position: relative !important;
  isolation: isolate;
  width: 100% !important;
  min-height: var(--cf-viewport-height, 100dvh) !important;
  background: #050d08 !important;
}

.pet-inventory-page::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0 auto 0 50%;
  width: min(100vw, 480px);
  transform: translateX(-50%);
  pointer-events: none;
  background-image:
    linear-gradient(180deg, rgba(3, 11, 7, .13), rgba(5, 15, 9, .45) 46%, rgba(3, 9, 5, .84)),
    url('/assets/pet-profile-background-v20261026-1.webp') !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  box-shadow: 0 0 56px rgba(0, 0, 0, .68);
}

.pet-inventory-page .inventory-frame {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: min(100%, 480px) !important;
  max-width: 480px !important;
  min-height: var(--cf-viewport-height, 100dvh) !important;
  margin-inline: auto;
  background: transparent !important;
}

.pet-inventory-page .inventory-content {
  box-sizing: border-box;
  height: calc(var(--cf-viewport-height, 100dvh) - 146px) !important;
  min-height: 0 !important;
  padding: 10px 11px max(22px, env(safe-area-inset-bottom)) !important;
  overflow: hidden !important;
}

.pet-inventory-page .inventory-top {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) 42px !important;
  align-items: stretch !important;
  gap: 8px !important;
  margin: 3px 0 10px !important;
  padding: 7px !important;
  border: 1px solid rgba(241, 209, 132, .52) !important;
  border-radius: 17px !important;
  background:
    radial-gradient(circle at 50% -20%, rgba(146, 190, 103, .22), transparent 58%),
    linear-gradient(145deg, rgba(15, 49, 31, .94), rgba(18, 24, 16, .96)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .13), 0 8px 20px rgba(0, 0, 0, .36) !important;
  backdrop-filter: blur(5px);
}

.pet-inventory-page .inventory-back-button,
.pet-inventory-page .inventory-refresh-button {
  min-height: 42px !important;
  margin: 0 !important;
  color: var(--pet-equipment-cream) !important;
  border: 1px solid rgba(242, 211, 137, .62) !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg, rgba(74, 124, 68, .98), rgba(24, 58, 39, .98)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .16), 0 4px 10px rgba(0, 0, 0, .31) !important;
  text-shadow: 0 1px 2px #000;
}

.pet-inventory-page .inventory-back-button {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  padding: 7px 9px !important;
  font-size: 0 !important;
}
.pet-inventory-page .inventory-back-button .cf-profile-back-icon {
  width: 29px !important;
  height: 29px !important;
  margin: 0 !important;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .42));
}
.pet-inventory-page .inventory-back-button::after {
  content: "Назад";
  font-size: 11px;
  font-weight: 900;
}

.pet-inventory-page .inventory-title-block {
  min-width: 0;
  display: grid !important;
  place-content: center;
  gap: 2px;
  padding: 3px 7px !important;
  text-align: center;
  border: 1px solid rgba(244, 215, 145, .18);
  border-radius: 11px;
  background: rgba(5, 19, 11, .30);
}
.pet-inventory-page .inventory-title {
  overflow: hidden;
  color: #ffe49d !important;
  font-size: clamp(15px, 4.4vw, 19px) !important;
  font-weight: 1000 !important;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 2px 3px rgba(0, 0, 0, .68);
}
.pet-inventory-page .inventory-capacity {
  color: rgba(255, 244, 211, .77) !important;
  font-size: 10px !important;
  font-weight: 800;
}
.pet-inventory-page .inventory-capacity::before { content: "Місця: "; }
.pet-inventory-page .inventory-refresh-button {
  width: 42px !important;
  padding: 0 !important;
  font-size: 22px !important;
  line-height: 1;
}

.pet-inventory-page .inventory-error,
.pet-inventory-page .inventory-loading,
.pet-inventory-page .inventory-empty {
  margin: 12px 0 !important;
  padding: 15px !important;
  border: 1px solid rgba(241, 211, 137, .35) !important;
  border-radius: 16px !important;
  color: #fff0c3 !important;
  text-align: center;
  background: linear-gradient(145deg, rgba(15, 45, 28, .91), rgba(25, 19, 12, .92)) !important;
  box-shadow: 0 7px 18px rgba(0, 0, 0, .32);
}
.pet-inventory-page .inventory-empty::before {
  content: "🐾";
  display: block;
  margin-bottom: 5px;
  font-size: 32px;
}

.pet-inventory-page .inventory-scroll {
  box-sizing: border-box;
  height: calc(100% - 72px) !important;
  min-height: 0 !important;
  padding: 1px 1px 20px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scrollbar-width: none !important;
  overscroll-behavior: contain;
}
.pet-inventory-page .inventory-scroll::-webkit-scrollbar { display: none !important; }

.pet-inventory-page .inventory-section {
  margin: 0 0 10px !important;
  padding: 10px !important;
  overflow: visible !important;
  border: 1px solid rgba(241, 210, 132, .39) !important;
  border-radius: 19px !important;
  background:
    radial-gradient(circle at 5% 0, rgba(139, 187, 98, .18), transparent 44%),
    linear-gradient(145deg, rgba(12, 43, 26, .92), rgba(25, 18, 11, .93)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .11), 0 9px 21px rgba(0, 0, 0, .34) !important;
  backdrop-filter: blur(5px);
}
.pet-inventory-page .inventory-section-title {
  display: flex !important;
  align-items: center;
  min-height: 32px;
  margin: -3px -3px 9px !important;
  padding: 6px 10px !important;
  color: #ffe6a1 !important;
  border: 1px solid rgba(242, 214, 145, .34) !important;
  border-radius: 11px !important;
  background: linear-gradient(100deg, rgba(79, 132, 69, .70), rgba(28, 62, 40, .60)) !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .64);
}
.pet-inventory-page .inventory-section-title::before {
  content: "🐾";
  margin-right: 7px;
  font-size: 14px;
}

.pet-inventory-page .inventory-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 8px !important;
}
.pet-inventory-page .inventory-item {
  box-sizing: border-box !important;
  position: relative !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 80px !important;
  display: grid !important;
  grid-template-columns: 68px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 7px 10px 7px 7px !important;
  color: var(--pet-equipment-cream) !important;
  text-align: left !important;
  border: 1px solid rgba(244, 216, 145, .25) !important;
  border-radius: 15px !important;
  background:
    linear-gradient(105deg, rgba(247, 231, 187, .10), rgba(247, 231, 187, .025)),
    rgba(7, 27, 16, .67) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .09), 0 4px 10px rgba(0, 0, 0, .24) !important;
  transition: transform .14s ease, border-color .14s ease, background-color .14s ease;
}
.pet-inventory-page .inventory-item:hover,
.pet-inventory-page .inventory-item:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(255, 229, 163, .65) !important;
  background-color: rgba(25, 66, 38, .82) !important;
}
.pet-inventory-page .inventory-item-frame {
  width: 68px !important;
  height: 68px !important;
  min-width: 68px;
  margin: 0 !important;
  border-radius: 14px;
  filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .42));
}
.pet-inventory-page .inventory-item-icon {
  padding: 3px !important;
  object-fit: contain !important;
}
.pet-inventory-page .inventory-item-copy {
  min-width: 0 !important;
  display: grid !important;
  gap: 5px !important;
  text-align: left !important;
}
.pet-inventory-page .inventory-item-name {
  overflow: hidden;
  color: #ffe4a0 !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pet-inventory-page .inventory-item-description {
  display: -webkit-box !important;
  overflow: hidden !important;
  color: rgba(255, 244, 215, .77) !important;
  font-size: 10.5px !important;
  line-height: 1.3 !important;
  white-space: normal !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2 !important;
}

.pet-inventory-page .inventory-mode-simplified .inventory-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 7px !important;
}
.pet-inventory-page .inventory-mode-simplified .inventory-item {
  min-height: 0 !important;
  aspect-ratio: 1;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  place-items: center;
  padding: 4px !important;
  border-radius: 14px !important;
}
.pet-inventory-page .inventory-mode-simplified .inventory-item-frame {
  width: min(100%, 72px) !important;
  min-width: 0 !important;
  height: auto !important;
  aspect-ratio: 1;
}
.pet-inventory-page .inventory-mode-simplified .inventory-item-copy { display: none !important; }

.pet-inventory-page .inventory-mode-expanded .inventory-item {
  grid-template-columns: 74px minmax(0, 1fr) !important;
  align-items: start !important;
  min-height: 100px !important;
}
.pet-inventory-page .inventory-mode-expanded .inventory-item-description {
  display: block !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
}

.pet-inventory-page .inventory-modal-backdrop {
  box-sizing: border-box !important;
  position: fixed !important;
  z-index: 1100 !important;
  inset: 0 auto 0 50% !important;
  width: min(100vw, 480px) !important;
  max-width: 480px !important;
  height: 100dvh !important;
  transform: translateX(-50%) !important;
  padding: 14px !important;
  background: rgba(2, 8, 5, .77) !important;
  backdrop-filter: blur(7px);
}
.pet-inventory-page .inventory-details-panel,
.pet-inventory-page .inventory-sell-panel {
  box-sizing: border-box !important;
  width: min(100%, 380px) !important;
  max-width: 380px !important;
  max-height: calc(100dvh - 28px) !important;
  overflow-y: auto !important;
  scrollbar-width: none;
  color: var(--pet-equipment-cream) !important;
  border: 1px solid rgba(245, 216, 143, .55) !important;
  border-radius: 21px !important;
  background:
    radial-gradient(circle at 50% 0, rgba(122, 174, 88, .21), transparent 43%),
    linear-gradient(155deg, rgba(16, 51, 31, .98), rgba(23, 17, 11, .99)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .13), 0 18px 40px rgba(0, 0, 0, .58) !important;
}
.pet-inventory-page .inventory-details-panel::-webkit-scrollbar,
.pet-inventory-page .inventory-sell-panel::-webkit-scrollbar { display: none; }
.pet-inventory-page .inventory-details-name,
.pet-inventory-page .inventory-sell-name { color: #ffe19a !important; }
.pet-inventory-page .inventory-details-actions button,
.pet-inventory-page .inventory-sell-actions button {
  color: #fff1c4 !important;
  border: 1px solid rgba(244, 216, 145, .58) !important;
  border-radius: 12px !important;
  background: linear-gradient(145deg, #4c8248, #245038) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .16), 0 4px 10px rgba(0, 0, 0, .31) !important;
}

@media (max-width: 370px) {
  .pet-inventory-page .inventory-content { padding-inline: 7px !important; }
  .pet-inventory-page .inventory-top { gap: 5px !important; padding: 6px !important; }
  .pet-inventory-page .inventory-back-button { padding-inline: 7px !important; }
  .pet-inventory-page .inventory-back-button::after { display: none; }
  .pet-inventory-page .inventory-title { font-size: 14px !important; }
  .pet-inventory-page .inventory-mode-simplified .inventory-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .pet-inventory-page .inventory-item { transition: none; }
}