/* =====================================================================
   Ronelle Perfume — Recommendations & Personalization (Phase 12)
   Recently-viewed rail reuses .rui-section / .rui-grid--products as-is, so it
   needs almost nothing here. The bulk is the Frequently Bought Together picker.
   Tokens only; RTL-safe (logical properties); honours reduced motion.
   ===================================================================== */

/* Rail reveal: fade/slide in once recommendations.js injects + unhides it. */
.rec-rail[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .rec-rail:not([hidden]) { animation: rec-fade-in .4s ease both; }
}
@keyframes rec-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ----------------------------- Frequently Bought Together ----------------------------- */
.fbt__panel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rui-space-xl);
  padding: var(--rui-space-xl);
  border: var(--rui-border-width-1) solid var(--rui-border);
  border-radius: var(--rui-radius-xl);
  background: var(--rui-surface);
}

.fbt__items {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--rui-space-sm);
}

.fbt__plus {
  align-self: center;
  display: inline-flex;
  color: var(--rui-text-subtle);
}

.fbt__item {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto auto;
  justify-items: center;
  gap: 4px;
  inline-size: 130px;
  padding: var(--rui-space-sm);
  border: var(--rui-border-width-1) solid transparent;
  border-radius: var(--rui-radius-lg);
  cursor: pointer;
  transition: var(--rui-transition-colors), box-shadow .2s ease;
}
.fbt__item:hover { background: var(--rui-surface-sunken); }
.fbt__item:has(.fbt__check:focus-visible) { outline: 2px solid var(--rui-ring); outline-offset: 2px; }
.fbt__item:has(.fbt__check:checked) { border-color: var(--rui-accent); }
.fbt__item--main { cursor: default; }

/* The native checkbox is visually replaced by the check-mark badge on the media. */
.fbt__check {
  position: absolute;
  inset-block-start: 6px;
  inset-inline-start: 6px;
  inline-size: 20px;
  block-size: 20px;
  margin: 0;
  z-index: 2;
  accent-color: var(--rui-accent);
  cursor: pointer;
}
.fbt__item--main .fbt__check { cursor: not-allowed; }

.fbt__media {
  position: relative;
  inline-size: 100px;
  block-size: 132px;
  border-radius: var(--rui-radius-md);
  overflow: hidden;
  background: var(--rui-surface-sunken);
}
.fbt__media img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.fbt__media-empty {
  display: grid; place-items: center; block-size: 100%;
  color: var(--rui-text-subtle);
}
.fbt__check-mark {
  position: absolute;
  inset-block-end: 6px;
  inset-inline-end: 6px;
  display: grid; place-items: center;
  inline-size: 22px; block-size: 22px;
  border-radius: var(--rui-radius-pill);
  background: var(--rui-accent);
  color: var(--rui-on-accent);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .15s ease, transform .15s ease;
}
.fbt__item:has(.fbt__check:checked) .fbt__check-mark { opacity: 1; transform: none; }

.fbt__name {
  font-size: .82rem;
  line-height: var(--rui-line-snug);
  text-align: center;
  color: var(--rui-text);
  text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.fbt__name:hover { color: var(--rui-accent); }
.fbt__size { font-size: .72rem; color: var(--rui-text-muted); }
.fbt__price { font-weight: 700; font-size: .85rem; color: var(--rui-text); }

.fbt__summary {
  display: flex;
  flex-direction: column;
  gap: var(--rui-space-sm);
  min-inline-size: 200px;
}
.fbt__total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--rui-space-md); }
.fbt__total-label { color: var(--rui-text-muted); font-size: .9rem; }
.fbt__total-value { font-weight: 800; font-size: 1.3rem; color: var(--rui-text); }
.fbt__add { justify-content: center; }
.fbt__add[disabled] { opacity: .55; cursor: not-allowed; }

@media (max-width: 640px) {
  .fbt__panel { flex-direction: column; align-items: stretch; }
  .fbt__items { justify-content: center; }
  .fbt__summary { min-inline-size: 0; }
}