/* Monetization rail — products + bookable hotels. EVERYTHING is scoped under
   .otg-rail with explicit values so region-page.css's .otg-product-* rules can never
   leak in (higher specificity + explicit props). Compact, enterprise, responsive.
   (page-refinement refinement-2) */

.otg-rail { display: flex; flex-direction: column; gap: var(--otg-space-4); min-width: 0; }

.otg-rail .otg-rail-card {
  padding: var(--otg-space-4);
  background: var(--otg-surface);
  border: 1px solid var(--otg-border);
  border-radius: var(--otg-radius);
  min-width: 0;
}

.otg-rail .otg-rail-card__heading {
  margin: 0 0 var(--otg-space-3);
  padding-bottom: var(--otg-space-2);
  border-bottom: 1px solid var(--otg-border);
  font-size: 11px;
  font-weight: var(--otg-weight-semibold);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--otg-text-muted, var(--otg-text-secondary));
}

/* ---- Products: ultra-compact scannable rows ---- */
.otg-rail .otg-product-list {
  list-style: none; margin: 0 0 var(--otg-space-3); padding: 0;
  display: flex; flex-direction: column; gap: 0;        /* explicit: kill region's gap */
}
.otg-rail .otg-product-list > li { margin: 0; padding: 0; }
.otg-rail .otg-product-card {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--otg-space-3);
  padding: 5px 0;                                        /* ~tight row */
  min-width: 0;
  border-bottom: 1px solid var(--otg-border);
  text-decoration: none;
  color: var(--otg-text-primary);
  line-height: 1.3;
  transition: color var(--otg-duration-2) var(--otg-ease);
}
.otg-rail .otg-product-list > li:last-child .otg-product-card { border-bottom: 0; }
.otg-rail .otg-product-card:hover { color: var(--otg-accent, var(--otg-text-primary)); }
.otg-rail .otg-product-card:hover .otg-product-card__name { text-decoration: underline; }
.otg-rail .otg-product-card__name {
  min-width: 0; flex: 1 1 auto;
  font-size: 13px; font-weight: var(--otg-weight-medium); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.otg-rail .otg-product-card__price {
  flex: none;
  display: inline-flex; align-items: baseline; gap: var(--otg-space-2);
  white-space: nowrap; font-size: 13px; line-height: 1.3;
}
.otg-rail .otg-price-sale { font-weight: var(--otg-weight-semibold); color: var(--otg-text-primary); }
.otg-rail .otg-price-original { text-decoration: line-through; color: var(--otg-text-muted, var(--otg-text-secondary)); font-size: .85em; }

.otg-rail .otg-cta-button {
  width: 100%; justify-content: center;
  margin-top: var(--otg-space-2);
  font-size: 13px; padding: 9px 14px;
}

/* ---- Hotels: the WHOLE row is the booking link ---- */
.otg-rail .otg-rail-hotel-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
.otg-rail .otg-rail-hotel-list > li { margin: 0; padding: 0; border-bottom: 1px solid var(--otg-border); }
.otg-rail .otg-rail-hotel-list > li:last-child { border-bottom: 0; }
.otg-rail .otg-rail-hotel {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--otg-space-3);
  padding: var(--otg-space-2) var(--otg-space-2);
  min-width: 0;
  text-decoration: none; color: inherit;
  border-radius: var(--otg-radius-sm, 8px);
  transition: background var(--otg-duration-2) var(--otg-ease);
}
.otg-rail .otg-rail-hotel:hover { background: var(--otg-surface-sunken, var(--otg-surface)); }
.otg-rail .otg-rail-hotel:hover .otg-rail-hotel__name { color: var(--otg-accent, var(--otg-text-primary)); }
.otg-rail .otg-rail-hotel:hover .otg-rail-hotel__cta { background: var(--otg-accent, var(--otg-text-primary)); color: #fff; }
.otg-rail .otg-rail-hotel__info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.otg-rail .otg-rail-hotel__name {
  font-size: 13px; font-weight: var(--otg-weight-medium);
  color: var(--otg-text-primary); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.otg-rail .otg-rail-hotel__meta {
  font-size: 11px; color: var(--otg-text-muted, var(--otg-text-secondary)); line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.otg-rail .otg-rail-hotel__cta {
  flex: none; font-size: 12px; padding: 6px 12px;
}
.otg-rail .otg-rail-card__more {
  display: inline-block; margin-top: var(--otg-space-3);
  font-size: 13px; font-weight: var(--otg-weight-medium);
  color: var(--otg-accent, var(--otg-text-primary)); text-decoration: none;
}
.otg-rail .otg-rail-card__more:hover { text-decoration: underline; }