/* Cabin Extras (cabin-extras.js). Same colors and card style as styles.css. */
.ce-grid { display: grid; gap: 14px; margin: 0 0 14px; }

.ce-item {
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  scroll-margin-top: 16px;
}
.ce-item.ce-focus { outline: 2px solid var(--primary); outline-offset: 2px; }
.ce-pic { position: relative; aspect-ratio: 16 / 9; background: var(--primary-soft); display: grid; place-items: center; }
.ce-pic img { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; }
.ce-pic-icon { color: var(--primary); opacity: .5; }
.ce-pic-icon svg { width: 40px; height: 40px; }

.ce-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1; }
.ce-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ce-name { margin: 0; font-size: 18px; color: var(--primary); line-height: 1.25; }
.ce-price { font-weight: 700; font-size: 17px; color: var(--ink); white-space: nowrap; }
.ce-badge {
  align-self: flex-start; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--accent); background: #F3ECE5; border-radius: 999px; padding: 3px 9px;
}
.ce-blurb { margin: 0; color: var(--ink); }
.ce-note { display: flex; gap: 8px; margin: 2px 0 0; font-size: 13px; color: var(--muted); line-height: 1.4; }
.ce-note svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.ce-body .ce-btn { flex: none; margin-top: auto; align-self: stretch; justify-content: center; }
.ce-body > :nth-last-child(2) { margin-bottom: 8px; }

.ce-secure { display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; color: var(--muted); margin: 4px 0 16px; }
.ce-secure svg { width: 14px; height: 14px; }

.ce-promo { display: flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; margin-top: 14px; }
.ce-promo .nav-title, .ce-promo .nav-sub { margin: 0; }