/* Detail-page layout fixes — restore Fragment's two-column grid */

/* Right-align the in-header "Subscribe to updates" so it sits at the far
   right of the title row at desktop, while flex-grow on the title pushes
   it there. */
.tm-auction-section .tm-section-header > .tm-section-subscribe {
  margin-left: auto;
}

/* Bid-info card: three-stat row (Highest / Step / Minimum). The card
   itself already has display:flex; flex-direction:column from auction.css —
   this row is just one of the children. */
.tm-bid-info-stats {
  display: flex;
  flex-direction: row;
  gap: 12px;
  padding: 14px 16px 8px;
}

/* Inner card padding on the right (auction-info) so it visually matches
   the bid-info card's vertical rhythm. */
.tm-section-auction-info {
  padding: 4px 0;
}

/* Countdown wrap on desktop: align label + reels horizontally with some
   breathing room from the bottom. */
@media (min-width: 768px) {
  .tm-section-countdown-wrap {
    align-self: center;
  }
}

/* Gifts sidebar (collections rail) — collapsed by default at narrow widths
   so it doesn't push the grid below the fold. The header acts as a tap
   target on mobile; at >=768px we force it open. */
.tm-main-catalog-filters .tm-main-filters-header {
  display: flex;
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  cursor: pointer;
}
.tm-main-catalog-filters .tm-main-filters-box.closed .tm-main-filters-content {
  display: none;
}
@media (min-width: 768px) {
  .tm-main-catalog-filters .tm-main-filters-header {
    cursor: default;
    pointer-events: none;
  }
  /* Always open at desktop, even if React state says "closed". */
  .tm-main-catalog-filters .tm-main-filters-box.closed .tm-main-filters-content {
    display: block;
  }
}

/* Gifts catalog header — Fragment's .tm-section-header is display:flex with
   no justify-content. We make the title grow so the dropdowns + view toggle
   fall to the right of the row. */
.tm-main-catalog-content .tm-section-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.tm-main-catalog-content .tm-section-header > .tm-section-header-text {
  flex-grow: 1;
  margin: 0;
}

/* Dropdown menus inside the catalog header. Fragment's auction.css doesn't
   ship the open/close behavior — we drive it via React state and need the
   absolute positioning + appearance here. */
.tm-main-catalog-content .tm-dropdown {
  position: relative;
}
.tm-main-catalog-content .tm-dropdown .dropdown-menu {
  display: block;
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 50;
  min-width: 180px;
  margin-top: 4px;
  padding: 6px 0;
  border-radius: 8px;
  background: var(--field-bg-color);
  list-style: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}
.tm-main-catalog-content .tm-dropdown .dropdown-menu li {
  list-style: none;
}
.tm-main-catalog-content .tm-dropdown .dropdown-menu-item {
  display: block;
  padding: 8px 16px;
  font-size: 14px;
  color: #fff;
  text-decoration: none;
}
.tm-main-catalog-content .tm-dropdown .dropdown-menu-item:hover {
  background: rgba(255, 255, 255, 0.06);
}
.tm-main-catalog-content .tm-dropdown .dropdown-menu li.selected .dropdown-menu-item {
  color: var(--accent-color);
}
.tm-main-catalog-content .tm-btn-group .btn.selected {
  background: var(--accent-color);
  color: #fff;
}

/* List-view variant: a vertical stack of full-width items. */
.tm-catalog-list {
  display: flex !important;
  flex-direction: column;
}
.tm-catalog-list .tm-grid-item {
  width: 100%;
  flex-direction: row;
  align-items: center;
  padding: 8px 12px;
}
.tm-catalog-list .tm-grid-item-thumb {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  margin-right: 12px;
}
.tm-catalog-list .tm-grid-item-content {
  flex: 1;
}