/* Shared layout for server-rendered and instant-search result cards.
 * Loaded separately so browsers can cache it while the full CSS loads async.
 * When changing these rules, bump the filename version and its link in
 * views/css_includes.mustache; keep previous versions for cached pages.
 * Explicit transforms do not depend on Tailwind reset variables.
 */
.cruise-card .cs-card-layout, .cruise-card .cs-card-main { display: flex; flex-direction: column; min-width: 0; }
.cruise-card .cs-card-main { flex: 1 1 0%; }
.cruise-card .cs-card-thumbnail-layout { position: relative; flex: 0 0 auto; width: 100%; height: 160px; }
.cruise-card .cruise-card-details { flex: 1 1 0%; min-width: 0; }
.cruise-card .cruise-card-price { box-sizing: border-box; flex: 0 0 auto; width: 100%; }
.cruise-card .cruise-card-stripe { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 100%; height: 32px; }
.cruise-card .cruise-card-stripe span { white-space: nowrap; }
/* Inventory snapshots may still serve the previous two-stripe template. */
.cruise-card .cruise-class-stripe.md\:hidden { display: flex; flex: 0 0 auto; width: 100%; height: 32px; }
/* Outrank the legacy .cruise-card > .flex > .flex wrapper reset. */
.cruise-card > .flex > .cruise-class-stripe.md\:hidden { min-height: 32px; }
.cruise-card .cruise-class-stripe.md\:flex { display: none; }
@media (min-width: 768px) {
    .cruise-card .cs-card-layout, .cruise-card .cs-card-main { flex-direction: row; }
    .cruise-card .cs-card-thumbnail-layout { width: 180px; }
    .cruise-card .cruise-card-price { width: 160px; }
    .cruise-card .cruise-card-stripe { width: 40px; height: auto; }
    .cruise-card .cruise-card-stripe span { transform: rotate(90deg); }
    .cruise-card .cruise-class-stripe.md\:hidden { display: none; }
    .cruise-card .cruise-class-stripe.md\:flex { display: flex; flex: 0 0 40px; width: 40px; }
    .cruise-card .cruise-class-stripe.md\:flex span { transform: rotate(90deg); }
}