/* =============================================================================
 * ACCB — Previous Purchases: COMPACT + token-first base styling
 * Paste this AFTER your current ACCB Compact Flex UI CSS.
 * Targets the markup you showed:
 *   .accb-prev (scroll container)
 *   .accb-prev-grid (list)
 *   .accb-prev-item (button row)
 *   .accb-prev-item__thumb / __meta / __title / __sub / __price
 * ============================================================================= */

/* --- Scroll container: tighter + matches your panels/cards --- */
.accb-browse__col--previous .accb-prev{
  /* tune */
  --accb-prev-max: 300px;     /* desktop */
  --accb-prev-max-sm: 220px;  /* mobile */

  max-height: var(--accb-prev-max);
  overflow: auto;
  padding: 8px 8px;

  border: 1px solid color-mix(in srgb, var(--accb-border) 90%, transparent);
  border-radius: var(--accb-radius);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accb-surface2) 86%, transparent), color-mix(in srgb, var(--accb-surface) 86%, transparent));
  box-shadow: none; /* keep it flatter inside a column */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 900px){
  .accb-browse__col--previous .accb-prev{
    max-height: var(--accb-prev-max-sm);
  }
}

/* --- Make it a tight vertical list --- */
.accb-browse__col--previous .accb-prev-grid{
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  margin: 0;
}

/* --- Row button: compact "card row" using your base tokens --- */
.accb-browse__col--previous .accb-prev-item{
  width: 100%;
  text-align: left;
  cursor: pointer;

  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 8px;
  align-items: center;

  padding: 7px 8px;
  border-radius: var(--accb-radius-sm);

  border: 1px solid color-mix(in srgb, var(--accb-border) 85%, transparent);
  background: color-mix(in srgb, var(--accb-surface2) 70%, transparent);
  color: var(--accb-text);

  /* normalize button look */
  appearance: none;
  -webkit-appearance: none;
  outline: none;
}

.accb-browse__col--previous .accb-prev-item:hover{
  background: color-mix(in srgb, var(--accb-surface2) 88%, transparent);
  border-color: color-mix(in srgb, var(--accb-border) 105%, transparent);
}

.accb-browse__col--previous .accb-prev-item:focus-visible{
  box-shadow: 0 0 0 3px var(--accb-ring);
  border-color: color-mix(in srgb, var(--accb-accent) 35%, var(--accb-border));
}

/* --- Thumb: small + tidy --- */
.accb-browse__col--previous .accb-prev-item__thumb{
  width: 40px;
  height: 40px;
  border-radius: 10px;
  overflow: hidden;
  flex: none;
  border: 1px solid color-mix(in srgb, var(--accb-border) 80%, transparent);
  background: color-mix(in srgb, var(--accb-bg) 55%, #000 45%);
}

.accb-browse__col--previous .accb-prev-item__thumb img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Text: compact typography + ellipsis --- */
.accb-browse__col--previous .accb-prev-item__meta{
  min-width: 0; /* enable ellipsis */
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}

.accb-browse__col--previous .accb-prev-item__title{
  font-size: 12px;
  font-weight: 650;
  color: var(--accb-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.accb-browse__col--previous .accb-prev-item__sub{
  font-size: 11px;
  color: var(--accb-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Make the separator dot subtler */
.accb-browse__col--previous .accb-prev-item__dot{
  opacity: .55;
  margin: 0 4px;
}

/* --- Price: smaller + aligned; also tames tiered pricing wrapper --- */
.accb-browse__col--previous .accb-prev-item__price{
  text-align: right;
  white-space: nowrap;
  font-size: 12px;
  color: var(--accb-text);
  line-height: 1.05;
}

/* Remove extra vertical growth from injected <br> in tiered pricing */
.accb-browse__col--previous .accb-prev-item__price br{
  display: none;
}

/* “You save …” line becomes a small muted helper */
.accb-browse__col--previous .accb-prev-item__price small{
  display: block;
  margin-top: 2px;
  font-size: 10.5px;
  color: var(--accb-muted);
  opacity: .9;
}

/* --- Optional: sticky hint inside the scroller, compact --- */
.accb-browse__col--previous .accb-prev-hint{
  position: sticky;
  bottom: 0;
  margin: 6px -8px -8px;
  padding: 7px 8px;
  font-size: 11px;

  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--accb-surface2) 92%, transparent),
    color-mix(in srgb, var(--accb-surface2) 55%, transparent)
  );
  border-top: 1px solid color-mix(in srgb, var(--accb-border) 85%, transparent);
  border-bottom-left-radius: var(--accb-radius);
  border-bottom-right-radius: var(--accb-radius);
}

/* --- Optional: thinner scrollbars --- */
.accb-browse__col--previous .accb-prev{
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accb-border) 90%, transparent) transparent;
}
.accb-browse__col--previous .accb-prev::-webkit-scrollbar{ width: 10px; }
.accb-browse__col--previous .accb-prev::-webkit-scrollbar-thumb{
  border-radius: 999px;
  background: color-mix(in srgb, var(--accb-border) 85%, transparent);
  border: 3px solid transparent;
  background-clip: padding-box;
}