:root {
--cusu-text: currentColor;
--cusu-muted: color-mix(in oklab, currentColor 55%, transparent);
--cusu-border: color-mix(in oklab, currentColor 14%, transparent);
--cusu-border-strong: color-mix(in oklab, currentColor 22%, transparent);
--cusu-surface: #fff;
--cusu-surface-strong: #f6f7f9;
--cusu-shadow: 0 8px 30px color-mix(in oklab, currentColor 12%, transparent);
--cusu-shadow-soft: 0 6px 18px color-mix(in oklab, currentColor 10%, transparent);
--cusu-radius-sm: 8px;
--cusu-radius-md: 10px;
--cusu-radius-lg: 12px;
--cusu-space-2xs: 4px;
--cusu-space-xs: 8px;
--cusu-space-sm: 12px;
--cusu-space-md: 18px;
--cusu-space-lg: 26px;
--cusu-space-xl: 36px;
--cusu-cta-font-size: 1em;
--cusu-cta-padding: 0.75em 1.5em;
--cusu-cta-radius: 0.6em;
--cusu-cta-weight: 600;
--cusu-motion-fast: 140ms;
--cusu-motion-std: 220ms;
--cusu-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
--cusu-card-image-ratio: 4 / 3;
--cusu-highlight-ratio: 16 / 9;
--cusu-filter-pill-radius: 999px;
--cusu-filter-gap: 10px;
--cusu-focus-ring: 0 0 0 3px color-mix(in oklab, currentColor 18%, transparent);
--cusu-ok: #22c55e;
--cusu-primary: #0f2d73;
--cusu-primary-contrast: #fff;
--cusu-review-bg: var(--cusu-surface-strong);
--cusu-review-card-bg: var(--cusu-surface);
--cusu-review-text: var(--cusu-text);
--cusu-review-muted: var(--cusu-muted);
--cusu-review-border: var(--cusu-border);
--cusu-review-link: var(--cusu-primary);
--cusu-review-star-bg: color-mix(in oklab, currentColor 18%, transparent);
--cusu-review-star-fill: #f59e0b;
--cusu-review-btn-bg: var(--cusu-primary);
--cusu-review-btn-text: var(--cusu-primary-contrast);
--cusu-review-backdrop: rgba(15, 23, 42, 0.45);
--cusu-review-radius: var(--cusu-radius-lg);
--cusu-review-summary-bg: var(--cusu-review-card-bg);
--cusu-review-summary-border: var(--cusu-review-border);
--cusu-review-summary-value: var(--cusu-review-text);
--cusu-review-image-note: var(--cusu-review-muted);
--cusu-review-image-chip-bg: var(--cusu-review-btn-bg);
--cusu-review-image-chip-text: var(--cusu-review-btn-text);
--cusu-review-badge-bg: color-mix(in oklab, currentColor 12%, transparent);
--cusu-review-badge-text: var(--cusu-text);
--cusu-review-filter-bg: var(--cusu-review-card-bg);
--cusu-review-filter-border: var(--cusu-review-border);
--cusu-review-error: #b91c1c;
--cusu-btn-primary-bg: var(--cusu-primary);
--cusu-btn-primary-text: var(--cusu-primary-contrast);
--cusu-btn-primary-border: transparent;
--cusu-btn-secondary-bg: transparent;
--cusu-btn-secondary-text: var(--cusu-primary);
--cusu-btn-secondary-border: color-mix(in oklab, var(--cusu-primary) 40%, var(--cusu-border));
--cusu-btn-details-bg: transparent;
--cusu-btn-details-text: var(--cusu-text);
--cusu-btn-details-border: var(--cusu-border);
--cusu-review-empty-bg: color-mix(in oklab, var(--cusu-review-card-bg) 88%, var(--cusu-review-text) 12%);
--cusu-review-empty-border: var(--cusu-review-border);
--cusu-review-empty-text: var(--cusu-review-muted);
--cusu-actions-chip-bg: transparent;
--cusu-actions-chip-border: var(--cusu-border);
--cusu-actions-chip-text: var(--cusu-text);
--cusu-item-title-weight: 600;
--cusu-actions-btn-min: 108px;
--cusu-media-grid-gap: var(--cusu-space-sm);
--cusu-media-min-width: 160px;
--cusu-media-item-radius: var(--cusu-radius-md);
--cusu-media-item-shadow: var(--cusu-shadow-soft);
--cusu-media-item-bg: var(--cusu-surface);
--cusu-media-empty-bg: var(--cusu-surface-strong);
--cusu-media-empty-border: var(--cusu-border);
--cusu-review-dialog-bg: var(--cusu-review-card-bg);
--cusu-review-dialog-shadow: 0 30px 90px color-mix(in oklab, currentColor 16%, transparent);
--cusu-review-dialog-radius: calc(var(--cusu-review-radius) + 2px);
--cusu-review-dialog-padding: clamp(16px, 3vw, 28px);
--cusu-review-dialog-head-gap: var(--cusu-space-sm);
--cusu-review-dialog-title-size: 1.375rem;
--cusu-review-dialog-title-margin: 0;
--cusu-review-dialog-section-gap: var(--cusu-space-sm);
--cusu-review-dialog-subhead-size: 1.25rem;
--cusu-review-dialog-close-bg: transparent;
--cusu-review-dialog-close-border: var(--cusu-review-border);
--cusu-review-dialog-close-text: inherit;
--cusu-stars-size: 1rem;
--cusu-stars-spacing: 0.08rem;
--cusu-review-grid-gap: var(--cusu-space-md);
--cusu-review-grid-cols: 2;
--cusu-meta-label-color: var(--cusu-muted);
--cusu-meta-value-color: var(--cusu-text);
--cusu-meta-mini-gap: var(--cusu-space-xs);
--cusu-meta-mini-label-weight: 600;
--cusu-meta-mini-label-color: var(--cusu-text);
--cusu-review-list-media-width: 200px;
--cusu-meta-cta-gap: var(--cusu-space-xs);
--cusu-meta-cta-justify: flex-start;
--cusu-actions-bar-list-gap: var(--cusu-space-xs);
--cusu-capacity-icon-size: 1em;
--cusu-capacity-icon-gap: 0.4em;
--cusu-capacity-adult-icon: url('data:image/svg+xml,');
--cusu-capacity-child-icon: url('data:image/svg+xml,');
--cusu-capacity-optional-opacity: 0.4;
--cusu-capacity-block-gap: var(--cusu-space-xs);
--cusu-capacity-block-label-size: 0.75em;
--cusu-capacity-block-label-color: var(--cusu-muted);
--cusu-capacity-tooltip-bg: rgba(15, 23, 42, 0.92);
--cusu-capacity-tooltip-color: #fff;
--cusu-capacity-tooltip-radius: 0.5rem;
--cusu-capacity-tooltip-shadow: 0 10px 24px rgba(15, 23, 42, 0.22);
--cusu-capacity-tooltip-padding: 0.35em 0.6em;
--cusu-capacity-tooltip-font-size: 0.7rem;
--cusu-capacity-tooltip-offset: 0.55rem;
--cusu-archive-gap: clamp(1rem, 1.8vw, 1.4rem);
--fa-chevron-left: url('data:image/svg+xml,');
--fa-xmark: url('data:image/svg+xml,');
}
* {
box-sizing: border-box;
}
.cusu-frontend {
color: var(--cusu-text);
line-height: 1.55;
}
.cusu-frontend a {
color: inherit;
}
.cusu-container {
max-width: 1200px;
margin: 0 auto;
padding: clamp(16px, 3vw, 36px);
display: grid;
gap: var(--cusu-space-lg);
}
.cusu-section {
display: grid;
gap: var(--cusu-space-md);
}
.cusu-eyebrow {
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.75em;
color: var(--cusu-muted);
}
.cusu-heading {
margin: 0;
font-size: clamp(1.6rem, 3vw, 2.4rem);
}
.cusu-subheading {
margin: 0;
color: var(--cusu-muted);
}
.cusu-cta-row {
display: flex;
flex-wrap: wrap;
gap: var(--cusu-space-sm);
}
.cusu-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
padding: var(--cusu-cta-padding);
font-size: var(--cusu-cta-font-size);
font-weight: var(--cusu-cta-weight);
border-radius: var(--cusu-cta-radius);
text-decoration: none;
cursor: pointer;
text-align: center;
text-decoration: none;
transition:
transform var(--cusu-motion-fast) var(--cusu-ease),
box-shadow var(--cusu-motion-fast) var(--cusu-ease),
background var(--cusu-motion-fast) var(--cusu-ease);
}
.cusu-btn:not(.button):not(.wp-element-button) {
border: 1px solid var(--cusu-border);
background: transparent;
color: inherit;
}
.cusu-btn:focus-visible {
outline: none;
box-shadow: var(--cusu-focus-ring);
}
.cusu-btn--primary:not(.button):not(.wp-element-button) {
background: var(--cusu-btn-primary-bg);
color: var(--cusu-btn-primary-text);
border-color: var(--cusu-btn-primary-border);
order: 1;
}
.cusu-btn--secondary:not(.button):not(.wp-element-button) {
border-color: var(--cusu-btn-secondary-border);
color: var(--cusu-btn-secondary-text);
background: var(--cusu-btn-secondary-bg);
}
.cusu-btn--details:not(.button):not(.wp-element-button) {
border-color: var(--cusu-btn-details-border);
color: var(--cusu-btn-details-text);
background: var(--cusu-btn-details-bg);
}
.cusu-btn--sm {
padding: 0.45em 0.95em;
font-size: 0.9em;
border-radius: 0.55em;
}
.cusu-btn--ghost {
background: color-mix(in oklab, currentColor 4%, transparent);
}
.cusu-btn--ghost:hover,
.cusu-btn--primary:hover {
transform: translateY(-1px);
box-shadow: var(--cusu-shadow-soft);
}
.cusu-btn--cosmetic {
user-select: none;
}
.cusu-item__card:hover .cusu-btn--cosmetic {
transform: translateY(-1px);
box-shadow: var(--cusu-shadow-soft);
}
.cusu-card {
background: var(--cusu-surface);
border: 1px solid var(--cusu-border);
border-radius: var(--cusu-radius-lg);
overflow: hidden;
display: flex;
flex-direction: column;
gap: var(--cusu-space-sm);
padding: var(--cusu-space-md);
box-shadow: var(--cusu-shadow-soft);
}
.cusu-card__media {
position: relative;
border-radius: calc(var(--cusu-radius-lg) - 2px) calc(var(--cusu-radius-lg) - 2px) 0 0;
overflow: hidden;
background: var(--cusu-surface-strong);
aspect-ratio: var(--cusu-card-image-ratio);
margin: calc(-1 * var(--cusu-space-md));
margin-bottom: var(--cusu-space-sm);
}
.cusu-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.cusu-card__badge {
position: absolute;
top: 10px;
left: 10px;
padding: 0.35em 0.7em;
border-radius: 999px;
background: color-mix(in oklab, currentColor 12%, transparent);
color: inherit;
font-size: 0.75em;
}
.cusu-card__title {
margin: 0;
font-size: 1.1rem;
}
.cusu-card__meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
color: var(--cusu-muted);
font-size: 0.9em;
align-items: center;
}
.cusu-card__meta .cusu-meta-dot {
display: inline-flex;
align-items: center;
justify-content: center;
width: 6px;
height: 6px;
border-radius: 999px;
background: color-mix(in oklab, currentColor 50%, transparent);
}
.cusu-card__desc {
margin: 0;
color: var(--cusu-muted);
}
.cusu-card__actions {
display: flex;
flex-wrap: wrap;
gap: var(--cusu-space-xs);
margin-top: auto;
justify-content: flex-end;
}
/* Archive + cards mapping */
.cusu-archive,
.cusu-search-results,
.cusu-sc-cards {
color: var(--cusu-text);
}
.cusu-archive__wrap {
--cusu-archive-gap: clamp(14px, 2.6vw, 26px);
display: grid;
gap: var(--cusu-archive-gap);
width: min(1600px, calc(100% - 2rem));
margin-inline: auto;
padding-inline: clamp(10px, 1.6vw, 18px);
}
.cusu-archive__header {
display: grid;
gap: var(--cusu-space-sm);
}
.cusu-archive__hero {
border-radius: var(--cusu-radius-lg);
overflow: hidden;
background: var(--cusu-surface);
}
.cusu-archive__hero img {
width: 100%;
height: auto;
display: block;
}
.cusu-archive__title {
margin: 0;
font-size: clamp(1.4rem, 2.6vw, 2rem);
}
.cusu-archive__intro,
.cusu-archive__outro {
color: var(--cusu-muted);
}
.cusu-archive__filter-wrap {
display: grid;
gap: var(--cusu-space-sm);
}
.cusu-archive__filter-head {
display: flex;
align-items: center;
justify-content: space-between;
}
.cusu-archive__filter-title {
font-weight: 600;
}
.cusu-archive__filter-toggle {
border: 1px solid var(--cusu-border);
background: var(--cusu-surface);
color: inherit;
border-radius: 999px;
padding: 0.4em 1em;
font-size: 0.9em;
cursor: pointer;
}
.cusu-archive__filter {
display: grid;
gap: var(--cusu-space-sm);
padding: var(--cusu-space-md);
border: 1px solid var(--cusu-border);
border-radius: var(--cusu-radius-lg);
background: var(--cusu-surface);
}
.cusu-archive__filter-row {
display: flex;
flex-wrap: wrap;
gap: var(--cusu-filter-gap);
align-items: flex-end;
}
.cusu-archive__filter-grid {
display: flex;
flex-wrap: wrap;
gap: var(--cusu-filter-gap);
align-items: flex-end;
}
.cusu-archive__filter-label,
.cusu-archive__filter-grid > label,
.cusu-archive__filter-row > label {
display: grid;
gap: 6px;
min-width: 200px;
flex: 1 1 220px;
}
.cusu-archive__filter-k {
font-size: 0.78em;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--cusu-muted);
}
.cusu-archive__filter-input {
width: 100%;
border: 1px solid var(--cusu-border);
border-radius: var(--cusu-radius-md);
padding: 0.6em 0.75em;
background: var(--cusu-surface);
color: inherit;
}
.cusu-archive__filter-input:focus {
outline: none;
box-shadow: var(--cusu-focus-ring);
}
.cusu-archive__filter-actions {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--cusu-space-md);
flex-wrap: wrap;
}
.cusu-archive__filter-note {
color: var(--cusu-muted);
font-size: 0.85em;
}
.cusu-search-widget {
display: grid;
gap: var(--cusu-space-md);
padding: var(--cusu-space-md);
border: 1px solid var(--cusu-border);
border-radius: var(--cusu-radius-lg);
background: var(--cusu-surface);
}
.cusu-search-widget__grid {
display: flex;
flex-wrap: wrap;
gap: var(--cusu-filter-gap);
align-items: flex-end;
}
.cusu-search-widget__dates {
flex: 2 1 420px;
}
.cusu-search-widget__field {
display: grid;
gap: 6px;
min-width: 160px;
flex: 1 1 160px;
}
.cusu-search-widget input,
.cusu-search-widget select {
width: 100%;
border: 1px solid var(--cusu-border);
border-radius: var(--cusu-radius-md);
padding: 0.6em 0.75em;
background: var(--cusu-surface);
color: inherit;
}
.cusu-search-widget input:focus,
.cusu-search-widget select:focus {
outline: none;
box-shadow: var(--cusu-focus-ring);
}
.cusu-search-widget__submit {
align-self: flex-end;
padding: var(--cusu-cta-padding);
font-size: var(--cusu-cta-font-size);
font-weight: var(--cusu-cta-weight);
border-radius: var(--cusu-cta-radius);
border: 1px solid transparent;
background: var(--cusu-primary);
color: var(--cusu-primary-contrast);
cursor: pointer;
transition:
transform var(--cusu-motion-fast) var(--cusu-ease),
box-shadow var(--cusu-motion-fast) var(--cusu-ease);
}
.cusu-search-widget__submit:hover {
transform: translateY(-1px);
box-shadow: var(--cusu-shadow-soft);
}
.cusu-search-widget--box {
max-width: min(520px, 100%);
}
.cusu-search-widget--box .cusu-search-widget__grid {
flex-direction: column;
align-items: stretch;
}
.cusu-search-results__empty {
display: grid;
gap: var(--cusu-space-md);
padding: var(--cusu-space-md);
border: 1px dashed var(--cusu-border);
border-radius: var(--cusu-radius-lg);
background: var(--cusu-surface-strong);
}
.cusu-search-results__empty-card {
display: grid;
gap: 6px;
}
.cusu-search-results__empty-title {
font-weight: 600;
}
.cusu-search-results__empty-sub {
color: var(--cusu-muted);
}
.cusu-search-results__alts {
display: grid;
gap: var(--cusu-space-md);
}
.cusu-search-results__alts-col {
display: grid;
gap: var(--cusu-space-sm);
}
.cusu-search-results__alts-h {
font-weight: 600;
}
.cusu-search-results__alts-grid {
display: grid;
gap: var(--cusu-space-sm);
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.cusu-search-results__highlights {
display: grid;
gap: var(--cusu-space-md);
}
.cusu-search-results__highlights-title {
font-size: 1.1rem;
font-weight: 600;
}
.cusu-search-results__highlights-grid {
display: grid;
gap: var(--cusu-space-md);
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.cusu-search-results__highlight-slot {
display: grid;
gap: var(--cusu-space-sm);
}
.cusu-search-results__section {
display: grid;
gap: var(--cusu-space-md);
}
.cusu-search-results__h2 {
margin: 0;
font-size: clamp(1.3rem, 2.4vw, 1.8rem);
}
.cusu-archive__list {
display: grid;
gap: var(--cusu-archive-gap);
}
.cusu-archive__list--cards,
.cusu-archive__list--cards_filter,
.cusu-archive__list--cards_overlay {
--cusu-card-min-width: min(var(--cusu-card-width, 320px), 320px);
grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--cusu-card-min-width)), 1fr));
}
.cusu-archive__list--list_filter {
grid-template-columns: 1fr;
}
.cusu-item {
display: grid;
position: relative;
}
.cusu-item__tap {
position: absolute;
inset: 0;
z-index: 1;
border-radius: var(--cusu-radius-lg);
}
.cusu-item__card {
background: var(--cusu-surface);
border: 1px solid var(--cusu-border);
border-radius: var(--cusu-radius-lg);
overflow: hidden;
display: grid;
grid-template-rows: auto 1fr;
padding: var(--cusu-space-md);
gap: var(--cusu-space-sm);
box-shadow: var(--cusu-shadow-soft);
min-height: 100%;
position: relative;
z-index: 0;
transition:
transform var(--cusu-motion-fast) var(--cusu-ease),
box-shadow var(--cusu-motion-fast) var(--cusu-ease);
}
.cusu-item__tap:hover + .cusu-item__card,
.cusu-item__tap:focus-visible + .cusu-item__card,
.cusu-item__card:hover {
transform: translateY(-2px);
box-shadow: var(--cusu-shadow);
}
.cusu-item__media {
border-radius: calc(var(--cusu-radius-lg) - 2px) calc(var(--cusu-radius-lg) - 2px) 0 0;
overflow: hidden;
background: var(--cusu-surface-strong);
aspect-ratio: var(--cusu-card-ratio, var(--cusu-card-image-ratio));
margin: calc(-1 * var(--cusu-space-md));
margin-bottom: var(--cusu-space-sm);
}
.cusu-item__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.cusu-item__media--empty {
min-height: 120px;
}
.cusu-item__title {
margin: 0;
font-size: 1.1rem;
font-weight: var(--cusu-item-title-weight);
}
.cusu-item__title a {
text-decoration: none;
color: inherit;
}
.cusu-item__body {
display: flex;
flex-direction: column;
gap: var(--cusu-space-xs);
}
.cusu-item__body a,
.cusu-item__excerpt a,
.cusu-item__actions a,
.cusu-item__actions button {
position: relative;
z-index: 2;
text-decoration: none;
}
.cusu-card__actions a,
.cusu-actions-bar__ctas a,
.cusu-actions__ctas a {
text-decoration: none;
}
.cusu-item__price,
.cusu-item__facts,
.cusu-item__excerpt {
color: var(--cusu-muted);
}
.cusu-item__facts {
display: flex;
flex-wrap: wrap;
gap: 8px;
font-size: 0.9em;
}
.cusu-item__fact {
display: inline-flex;
align-items: center;
gap: 8px;
}
.cusu-item__fact::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: color-mix(in oklab, currentColor 45%, transparent);
display: inline-block;
}
:where(.cusu-item--overlay) .cusu-item__fact::before {
background: currentColor;
}
.cusu-item__fact:first-child::before {
display: none;
}
.cusu-archive__term-switch {
display: grid;
gap: 6px;
min-width: 220px;
flex: 1 1 240px;
}
.cusu-term-switch {
border: 1px solid var(--cusu-border);
border-radius: var(--cusu-radius-md);
background: var(--cusu-surface);
position: relative;
}
.cusu-term-switch__summary {
list-style: none;
padding: 0.6em 0.8em;
cursor: pointer;
font-weight: 600;
}
.cusu-term-switch__summary::-webkit-details-marker {
display: none;
}
.cusu-term-switch__menu {
position: absolute;
left: 0;
right: 0;
top: calc(100% + 6px);
background: var(--cusu-surface);
border: 1px solid var(--cusu-border);
border-radius: var(--cusu-radius-md);
box-shadow: var(--cusu-shadow-soft);
z-index: 20;
max-height: 240px;
overflow: auto;
padding: 6px;
display: grid;
gap: 4px;
}
.cusu-term-switch__item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 0.45em 0.65em;
border-radius: 8px;
text-decoration: none;
color: inherit;
}
.cusu-term-switch__item:hover {
background: var(--cusu-surface-strong);
}
.cusu-term-switch__item.is-current {
background: color-mix(in oklab, var(--cusu-primary) 14%, transparent);
}
.cusu-term-switch__count {
font-size: 0.8em;
color: var(--cusu-muted);
}
.cusu-remember {
display: none;
font-size: 0.9em;
color: var(--cusu-muted);
}
.cusu-remember.is-visible {
display: block;
}
.cusu-item__actions {
display: flex;
flex-wrap: wrap;
gap: var(--cusu-space-xs);
margin-top: auto;
justify-content: flex-end;
margin-top: auto;
}
.cusu-item__actions .cusu-btn {
min-width: var(--cusu-actions-btn-min);
}
.cusu-item--list .cusu-item__card {
display: flex;
flex-direction: row;
align-items: stretch;
gap: var(--cusu-space-md);
grid-template-rows: none;
}
.cusu-item--list .cusu-item__media {
margin: 0;
border-radius: var(--cusu-radius-lg);
width: clamp(140px, 22vw, 220px);
aspect-ratio: var(--cusu-card-ratio, var(--cusu-card-image-ratio));
flex: 0 0 auto;
}
.cusu-item--list .cusu-item__body {
display: flex;
flex-direction: column;
gap: var(--cusu-space-xs);
}
.cusu-item--list .cusu-item__actions {
margin-top: auto;
justify-content: flex-start;
}
.cusu-item--overlay .cusu-item__card {
padding: 0;
position: relative;
color: #fff;
grid-template-rows: 1fr;
}
.cusu-item--overlay .cusu-item__media {
margin: 0;
border-radius: 0;
aspect-ratio: var(--cusu-card-ratio, var(--cusu-highlight-ratio));
}
.cusu-item--overlay .cusu-item__body {
position: absolute;
inset: auto 0 0 0;
padding: var(--cusu-space-md);
background: linear-gradient(180deg, transparent 0%, color-mix(in oklab, #000 55%, transparent) 100%);
display: grid;
gap: 6px;
}
.cusu-item--overlay .cusu-item__price,
.cusu-item--overlay .cusu-item__facts,
.cusu-item--overlay .cusu-item__excerpt {
color: rgba(255, 255, 255, 0.78);
}
.cusu-item--overlay .cusu-item__actions {
justify-content: flex-start;
display: none;
}
.cusu-is-highlight .cusu-item__card,
.cusu-sc-cards > .cusu-item.cusu-is-highlight .cusu-item__card {
border-color: color-mix(in oklab, var(--cusu-primary) 35%, var(--cusu-border));
box-shadow: 0 16px 40px color-mix(in oklab, var(--cusu-primary) 15%, transparent);
}
.cusu-archive__pagination {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
}
.cusu-archive__pagination a,
.cusu-archive__pagination span {
border: 1px solid var(--cusu-border);
border-radius: 999px;
padding: 0.35em 0.8em;
text-decoration: none;
color: inherit;
font-size: 0.9em;
}
.cusu-archive__pagination .current {
background: currentColor;
color: #fff;
border-color: transparent;
}
.cusu-archive__empty {
padding: var(--cusu-space-md);
border: 1px dashed var(--cusu-border);
border-radius: var(--cusu-radius-md);
}
/* Shortcode list container (uses shared .cusu-item card contract) */
.cusu-sc-cards {
display: grid;
gap: var(--cusu-archive-gap);
--cusu-card-min-width: min(var(--cusu-card-width, 320px), 320px);
grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--cusu-card-min-width)), 1fr));
}
.cusu-sc-cards--list_filter {
grid-template-columns: 1fr;
}
.cusu-sc-cards > .cusu-item[hidden] {
display: none;
}
@media (max-width: 720px) {
.cusu-item--list .cusu-item__card {
flex-direction: column;
}
.cusu-item--list .cusu-item__media {
width: 100%;
}
}
.cusu-card__actions .cusu-btn {
min-width: 108px;
}
.cusu-grid {
display: grid;
gap: var(--cusu-space-md);
}
.cusu-grid--cards {
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.cusu-card--highlight-full {
grid-column: 1 / -1;
padding: var(--cusu-space-lg);
border-color: var(--cusu-border-strong);
background: color-mix(in oklab, currentColor 4%, transparent);
}
.cusu-card--highlight-full .cusu-card__media {
aspect-ratio: var(--cusu-highlight-ratio);
}
.cusu-card--highlight-wide {
grid-column: span 2;
border-color: var(--cusu-border-strong);
}
@media (max-width: 900px) {
.cusu-card--highlight-wide {
grid-column: auto;
}
}
.cusu-card--highlight-compact {
border-color: var(--cusu-border-strong);
}
.cusu-card--highlight-subtle {
border-color: var(--cusu-border-strong);
box-shadow: var(--cusu-shadow);
}
.cusu-card--highlight-tint {
border-color: var(--cusu-border-strong);
background: color-mix(in oklab, currentColor 6%, transparent);
}
.cusu-card--overlay {
position: relative;
padding: 0;
color: #fff;
background: #0b0f1a;
overflow: hidden;
}
.cusu-card--overlay .cusu-card__media {
margin: 0;
border-radius: inherit;
aspect-ratio: 4 / 5;
}
.cusu-card--overlay .cusu-card__media::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.65));
}
.cusu-card--overlay .cusu-card__media img {
filter: saturate(0.95);
}
.cusu-card--overlay .cusu-card__title {
font-size: 1.05rem;
color: #fff;
}
.cusu-card--overlay .cusu-card__badge {
position: absolute;
top: 14px;
left: 14px;
z-index: 2;
background: rgba(255, 255, 255, 0.18);
color: #fff;
}
.cusu-card__overlay {
position: absolute;
inset: auto 0 0 0;
padding: var(--cusu-space-md);
display: grid;
gap: var(--cusu-space-xs);
}
.cusu-card__overlay .cusu-card__meta {
color: rgba(255, 255, 255, 0.75);
}
.cusu-card--overlay .cusu-card__desc {
color: rgba(255, 255, 255, 0.78);
}
.cusu-card__overlay .cusu-btn {
border-color: rgba(255, 255, 255, 0.3);
color: #fff;
background: transparent;
}
.cusu-card__overlay .cusu-btn--primary {
background: #fff;
color: color-mix(in oklab, #0b2b7b 80%, #0b0f1a);
}
.cusu-card__overlay--panel {
max-width: 420px;
background: rgba(0, 0, 0, 0.35);
border-radius: var(--cusu-radius-md);
padding: var(--cusu-space-md);
margin: var(--cusu-space-md);
}
@media (max-width: 639px) {
:where(.cusu-card__overlay--panel) .cusu-card__desc {
display: none;
}
}
.cusu-card--overlay-compact {
aspect-ratio: 4/5;
}
.cusu-card--overlay-compact .cusu-card__overlay {
gap: 6px;
}
.cusu-card--overlay-wide {
grid-column: span 2;
min-height: 320px;
}
.cusu-card--overlay-wide .cusu-card__media {
aspect-ratio: 8 / 5;
}
.cusu-grid--overlay-2 > .cusu-card--overlay-wide:only-child .cusu-card__media,
.cusu-grid--overlay-3 > .cusu-card--overlay-wide:only-child .cusu-card__media {
aspect-ratio: 2 / 1;
}
@media (max-width: 900px) {
.cusu-card--overlay-wide {
grid-column: auto;
}
}
.cusu-card--overlay-highlight {
grid-column: 1 / -1;
min-height: 360px;
}
.cusu-card--overlay-highlight .cusu-card__overlay {
margin: var(--cusu-space-md);
}
.cusu-card--overlay-highlight .cusu-card__title {
font-size: 1.2rem;
}
.cusu-card--overlay-highlight .cusu-card__media {
aspect-ratio: 2 / 1;
}
.cusu-grid--overlay-2 > .cusu-card--overlay-compact .cusu-card__media,
.cusu-grid--overlay-3 > .cusu-card--overlay-compact .cusu-card__media {
min-height: 100%;
aspect-ratio: auto;
}
.cusu-grid--overlay-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.cusu-grid--overlay-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cusu-grid--overlay-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 1100px) {
.cusu-grid--overlay-4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 767px) {
.cusu-grid--overlay-4 {
grid-template-columns: 1fr;
}
}
@media (max-width: 820px) {
.cusu-grid--overlay-3,
.cusu-grid--overlay-2 {
grid-template-columns: 1fr;
}
.cusu-card--overlay-wide,
.cusu-card--overlay-highlight {
min-height: 320px;
}
.cusu-card--overlay .cusu-card__media {
aspect-ratio: 4 / 5;
}
.cusu-card--overlay .cusu-card__overlay {
margin: var(--cusu-space-md);
}
}
.cusu-filterbar {
display: flex;
flex-wrap: wrap;
gap: var(--cusu-filter-gap);
align-items: end;
}
.cusu-filter {
display: grid;
gap: var(--cusu-space-2xs);
font-size: 0.9em;
flex: 1 1 180px;
min-width: 180px;
}
.cusu-filter label {
color: var(--cusu-muted);
}
.cusu-filter input,
.cusu-filter select {
border: 1px solid var(--cusu-border);
border-radius: var(--cusu-radius-sm);
padding: 0.55em 0.7em;
background: var(--cusu-surface);
color: inherit;
}
.cusu-filter input:focus,
.cusu-filter select:focus {
outline: none;
box-shadow: var(--cusu-focus-ring);
}
.cusu-date-range {
display: grid;
gap: var(--cusu-space-xs);
position: relative;
flex: 2 1 420px;
min-width: fit-content;
}
.cusu-date-range__flex {
flex: 1 1 180px;
min-width: 180px;
}
.cusu-date-range__row {
display: flex;
align-items: end;
gap: var(--cusu-space-xs);
flex-wrap: wrap;
}
.cusu-date-range__field {
flex: 1 1 140px;
min-width: 140px;
}
.cusu-date-range__sep {
color: var(--cusu-muted);
font-weight: 700;
padding: 0 2px 10px;
}
.cusu-date-range__input {
width: 100%;
border: 1px solid var(--cusu-border);
border-radius: var(--cusu-radius-sm);
padding: 0.55em 0.7em;
background: var(--cusu-surface);
color: inherit;
}
.cusu-date-range__input:focus {
outline: none;
box-shadow: var(--cusu-focus-ring);
}
.cusu-date-range__popover {
position: absolute;
top: calc(100% + 10px);
left: 0;
z-index: 20;
width: min(360px, 100%);
}
.cusu-date-range__clear {
border: 1px solid var(--cusu-border);
border-radius: 999px;
padding: 0.45em 0.9em;
background: transparent;
color: inherit;
cursor: pointer;
font-size: 0.85em;
}
.cusu-cal {
border-radius: var(--cusu-radius-lg);
background: var(--cusu-surface);
box-shadow: var(--cusu-shadow);
padding: var(--cusu-space-xs);
}
.cusu-cal__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--cusu-space-xs);
padding: 2px 2px 10px;
}
.cusu-cal__title {
font-weight: 700;
}
.cusu-cal__nav {
border: 0;
background: color-mix(in oklab, var(--cusu-text), transparent 94%);
border-radius: 999px;
width: 32px;
height: 32px;
display: grid;
place-items: center;
font-weight: 700;
cursor: pointer;
}
.cusu-cal__nav[disabled] {
opacity: 0.35;
cursor: not-allowed;
}
.cusu-cal__nav:hover {
background: color-mix(in oklab, var(--cusu-text), transparent 90%);
}
.cusu-cal__grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 6px;
padding: 2px;
}
.cusu-cal__months {
display: grid;
grid-template-columns: 1fr;
gap: var(--cusu-space-sm);
}
.cusu-cal__month-title {
font-weight: 700;
color: var(--cusu-muted);
padding: 4px 6px 8px;
}
.cusu-cal__w {
font-size: 0.7em;
color: var(--cusu-muted);
font-weight: 700;
text-align: center;
padding: 2px 0 6px;
}
.cusu-cal__cell.is-empty {
height: 32px;
}
.cusu-cal__day {
border: 0;
background: color-mix(in oklab, var(--cusu-text), transparent 96%);
color: inherit;
border-radius: 10px;
height: 32px;
cursor: pointer;
font-weight: 700;
}
.cusu-cal__day.is-allowed {
background: color-mix(in oklab, var(--cusu-ok), transparent 92%);
color: color-mix(in oklab, var(--cusu-text), var(--cusu-ok) 18%);
}
.cusu-cal__day:hover {
background: color-mix(in oklab, var(--cusu-text), transparent 92%);
}
.cusu-cal__day.is-allowed:hover {
background: color-mix(in oklab, var(--cusu-ok), transparent 86%);
}
.cusu-cal__day.is-in-range {
background: color-mix(in oklab, var(--cusu-ok), transparent 86%);
}
.cusu-cal__day.is-preview {
background: color-mix(in oklab, var(--cusu-ok), transparent 88%);
}
.cusu-cal__day.is-dim {
opacity: 0.45;
}
.cusu-cal__day.is-from,
.cusu-cal__day.is-to {
background: color-mix(in oklab, var(--cusu-primary), transparent 78%);
color: color-mix(in oklab, var(--cusu-text), var(--cusu-primary) 24%);
}
.cusu-cal__day.is-disabled {
opacity: 0.35;
cursor: not-allowed;
}
@media (min-width: 960px) {
.cusu-date-range__field {
max-width: 190px;
}
.cusu-date-range__flex {
max-width: 220px;
}
.cusu-date-range__popover {
width: 720px;
}
.cusu-cal__months {
grid-template-columns: 1fr 1fr;
gap: var(--cusu-space-sm);
}
}
.cusu-list {
display: grid;
gap: var(--cusu-space-md);
}
.cusu-list-item {
display: grid;
gap: var(--cusu-space-sm);
grid-template-columns: 200px minmax(0, 1fr) auto;
border-bottom: 1px solid var(--cusu-border);
padding-bottom: var(--cusu-space-sm);
}
.cusu-list-item__media {
border-radius: var(--cusu-radius-md);
overflow: hidden;
aspect-ratio: 4 / 3;
background: var(--cusu-surface-strong);
}
.cusu-list-item__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.cusu-list-item__actions {
display: grid;
gap: var(--cusu-space-xs);
}
.cusu-list-item__actions .cusu-btn {
min-width: 120px;
width: 100%;
}
.cusu-list-item__title {
margin: 0;
}
.cusu-list-item__teaser {
margin: 0;
color: var(--cusu-muted);
}
.cusu-list-item__meta {
color: var(--cusu-muted);
font-size: 0.9em;
}
@media (max-width: 760px) {
.cusu-list-item {
grid-template-columns: 1fr;
}
.cusu-list-item__actions {
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
}
@media (min-width: 761px) {
.cusu-list-item__actions {
grid-auto-flow: column;
grid-auto-columns: minmax(120px, 1fr);
align-self: center;
}
}
.cusu-highlight-stack {
display: grid;
gap: var(--cusu-space-md);
}
.cusu-highlight-stack .cusu-card {
padding: var(--cusu-space-lg);
}
.cusu-card-slider {
position: relative;
display: grid;
gap: var(--cusu-space-sm);
}
.cusu-card-slider__track {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(240px, 1fr);
gap: var(--cusu-space-md);
overflow: hidden;
scroll-behavior: smooth;
}
.cusu-card-slider__nav {
display: flex;
gap: 8px;
justify-content: flex-end;
}
.cusu-card-slider__dots {
display: flex;
gap: 6px;
justify-content: center;
}
.cusu-card-slider__dot {
width: 10px;
height: 10px;
border-radius: 999px;
border: 1px solid var(--cusu-border);
background: color-mix(in oklab, currentColor 6%, transparent);
cursor: pointer;
}
.cusu-card-slider__dot.is-active {
background: currentColor;
}
.cusu-card-slider--two .cusu-card-slider__track {
grid-auto-columns: minmax(320px, 1fr);
}
.cusu-card-slider--three .cusu-card-slider__track {
grid-auto-columns: minmax(280px, 1fr);
}
.cusu-card-slider .cusu-btn {
font-size: 0.9em;
padding: 0.6em 1.2em;
}
.cusu-card-slider__btn {
border: 1px solid var(--cusu-border);
background: color-mix(in oklab, currentColor 4%, transparent);
color: inherit;
border-radius: 999px;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.cusu-card--highlight-horizontal {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
align-items: stretch;
gap: var(--cusu-space-md);
min-height: 320px;
}
.cusu-card--highlight-horizontal .cusu-card__media {
margin: 0;
border-radius: calc(var(--cusu-radius-lg) - 2px);
aspect-ratio: auto;
height: 100%;
}
.cusu-card--highlight-horizontal .cusu-card__media img {
height: 100%;
}
.cusu-card--highlight-horizontal > :last-child {
display: grid;
gap: var(--cusu-space-sm);
}
.cusu-card--highlight-horizontal .cusu-card__actions {
margin-top: auto;
}
@media (max-width: 900px) {
.cusu-card--highlight-horizontal {
grid-template-columns: 1fr;
}
}
.cusu-slider {
position: relative;
overflow: hidden;
border-radius: var(--cusu-radius-lg);
border: 1px solid var(--cusu-border);
background: var(--cusu-surface);
}
.cusu-slider__track {
display: flex;
transition: transform var(--cusu-motion-std) var(--cusu-ease);
will-change: transform;
}
.cusu-slide {
min-width: 100%;
padding: var(--cusu-space-lg);
display: grid;
gap: var(--cusu-space-md);
}
.cusu-slide__media {
border-radius: var(--cusu-radius-md);
overflow: hidden;
aspect-ratio: var(--cusu-highlight-ratio);
background: var(--cusu-surface-strong);
}
.cusu-slide__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.cusu-slider__nav {
position: absolute;
inset: auto 20px 20px auto;
display: flex;
gap: 8px;
}
.cusu-slider__btn {
border: 1px solid var(--cusu-border);
background: color-mix(in oklab, currentColor 5%, transparent);
color: inherit;
border-radius: 999px;
width: 36px;
height: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.cusu-slider__dots {
display: flex;
gap: 6px;
position: absolute;
left: 20px;
bottom: 20px;
}
.cusu-slider__dot {
width: 10px;
height: 10px;
border-radius: 999px;
border: 1px solid var(--cusu-border);
background: color-mix(in oklab, currentColor 6%, transparent);
cursor: pointer;
}
.cusu-slider__dot.is-active {
background: currentColor;
}
.cusu-lightbox {
position: fixed;
inset: 0;
border: none;
padding: 0;
background: transparent;
width: 100%;
height: 100%;
display: grid;
place-items: center;
z-index: 999999;
}
.cusu-lightbox:not([open]) {
display: none;
}
.cusu-lightbox::backdrop {
background: rgba(9, 12, 20, 0.82);
}
.cusu-lightbox__frame {
margin: auto;
width: 100%;
max-width: min(1180px, calc(100vw - 1.5rem));
max-height: none;
background: transparent;
border-radius: var(--cusu-radius-lg);
border: 0;
padding: 10px;
display: grid;
grid-template-rows: auto 1fr auto;
gap: 10px;
position: relative;
box-shadow: none;
}
.cusu-lightbox__top {
display: flex;
justify-content: flex-end;
padding-inline: 10px;
}
.cusu-lightbox__media {
position: relative;
display: grid;
place-items: center;
}
.cusu-lightbox__img-wrap {
position: relative;
z-index: 0;
display: grid;
place-items: center;
width: 100%;
max-width: 100%;
background-color: rgba(0, 0, 0, 0.25);
border-radius: var(--cusu-radius-md);
transition: all 0.3s ease;
}
.cusu-lightbox__img {
width: 100%;
max-width: 100%;
max-height: 70vh;
border-radius: var(--cusu-radius-md);
box-shadow: var(--cusu-shadow-soft);
object-fit: contain;
opacity: 1;
transition: opacity 220ms ease;
}
.cusu-lightbox__img--loading {
opacity: 0;
}
/* Critical overlay controls: hard reset to resist theme/global button CSS. */
.cusu-lightbox__close,
.cusu-lightbox__nav,
.cusu-lightbox__dot {
all: unset;
box-sizing: border-box;
appearance: none;
-webkit-appearance: none;
margin: 0;
font: inherit;
font-family: inherit;
line-height: 1;
text-transform: none;
letter-spacing: normal;
text-decoration: none;
text-indent: 0;
text-shadow: none;
white-space: nowrap;
vertical-align: middle;
background-image: none;
min-width: 0;
min-height: 0;
}
.cusu-lightbox__close {
background: rgb(0 0 0 / 33%);
color: #fff;
border: 1.5px solid rgba(255, 255, 255, 0.92);
border-radius: 999px;
width: 48px;
height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 0;
font-weight: 300;
backdrop-filter: blur(3px);
box-shadow: 0 8px 20px rgba(2, 6, 23, 0.28);
transition:
transform 0.2s ease,
opacity 0.2s ease,
background-color 0.2s ease;
z-index: 3;
}
.cusu-lightbox__close::before {
content: '';
width: 54%;
aspect-ratio: 1;
background: var(--fa-xmark) center / contain no-repeat;
display: block;
}
.cusu-lightbox__close:not([disabled]):hover,
.cusu-lightbox__close:not([disabled]):focus,
.cusu-lightbox__close:not([disabled]):focus-visible {
outline: none;
transform: scale(1.1);
opacity: 1;
}
.cusu-lightbox__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 48px;
height: 48px;
border-radius: 999px;
border: 1.5px solid rgba(255, 255, 255, 0.92);
cursor: pointer;
color: #fff;
display: grid;
place-items: center;
opacity: 0.88;
background: rgb(0 0 0 / 33%);
backdrop-filter: blur(3px);
transition:
transform 0.2s ease,
opacity 0.2s ease,
background-color 0.2s ease;
z-index: 2;
}
.cusu-lightbox__nav::before {
content: '';
width: 56%;
aspect-ratio: 1;
background: var(--fa-chevron-left) center / contain no-repeat;
display: block;
}
.cusu-lightbox__nav:not([disabled]):hover,
.cusu-lightbox__nav:not([disabled]):focus-visible {
opacity: 1;
transform: translateY(-50%) scale(1.1);
background: rgb(0 0 0 / 42%);
outline: none;
}
.cusu-lightbox__nav[disabled] {
opacity: 0.32;
cursor: default;
}
.cusu-lightbox__nav--prev {
left: 10px;
}
.cusu-lightbox__nav--prev::before {
transform: none;
}
.cusu-lightbox__nav--next {
right: 10px;
}
.cusu-lightbox__nav--next::before {
transform: rotate(180deg);
}
.cusu-lightbox__dots {
display: flex;
gap: 10px;
justify-content: center;
flex-wrap: wrap;
padding-block: 2px 6px;
}
.cusu-lightbox__dot {
width: 9px;
height: 9px;
border-radius: 999px;
border: 0;
cursor: pointer;
background: rgba(255, 255, 255, 0.42);
padding: 0;
transition: all 0.25s ease-out;
}
.cusu-lightbox__dot[aria-current='true'],
.cusu-lightbox__dot:hover {
background: #fff;
transform: scale(1.25);
}
.cusu-lightbox__close:focus-visible,
.cusu-lightbox__nav:focus-visible,
.cusu-lightbox__dot:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
}
@media (max-width: 700px) {
.cusu-lightbox__nav {
width: 42px;
height: 42px;
}
.cusu-lightbox__close {
width: 42px;
height: 42px;
}
.cusu-lightbox__close {
width: 40px;
height: 40px;
font-size: 1.45rem;
}
.cusu-lightbox__frame {
padding: 6px;
}
}
.cusu-meta-bar {
display: grid;
gap: var(--cusu-space-xs);
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.cusu-meta-bar__item {
display: grid;
gap: 4px;
padding: 0.6em 0.8em;
border: 1px solid var(--cusu-border);
border-radius: var(--cusu-radius-md);
background: transparent;
}
.cusu-meta-bar__label {
font-size: 0.75em;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--cusu-muted);
margin: 0;
display: inline-flex;
align-items: center;
font-weight: 400;
gap: var(--cusu-capacity-icon-gap);
}
.cusu-meta-bar__value {
font-weight: 600;
margin: 0;
}
.cusu-meta-actions {
display: grid;
gap: var(--cusu-space-md);
}
.cusu-chip {
border: 1px solid var(--cusu-border);
border-radius: 999px;
padding: 0.35em 0.75em;
font-size: 0.85em;
background: transparent;
}
.cusu-divider {
height: 1px;
background: var(--cusu-border);
border: none;
margin: 0;
}
.cusu-detail {
display: grid;
gap: var(--cusu-space-lg);
}
.cusu-detail-layout {
display: grid;
gap: var(--cusu-space-lg);
container-type: inline-size;
container-name: cusu-detail;
}
.cusu-detail-layout > * {
margin: 0;
}
.cusu-detail__hero {
display: grid;
gap: var(--cusu-space-md);
}
.cusu-shortcode-media__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--cusu-media-min-width)), 1fr));
gap: var(--cusu-media-grid-gap);
}
.cusu-lightbox-link {
display: block;
width: 100%;
height: 100%;
text-decoration: none;
color: inherit;
}
.cusu-shortcode-media[data-use='detail_strip'] .cusu-shortcode-media__grid,
.cusu-shortcode-media[data-use='detail_gallery'] .cusu-shortcode-media__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cusu-shortcode-media[data-use='detail_strip'] .cusu-shortcode-media__item,
.cusu-shortcode-media[data-use='detail_gallery'] .cusu-shortcode-media__item {
aspect-ratio: var(--cusu-media-ratio, 4/3);
overflow: hidden;
border-radius: var(--cusu-media-item-radius);
background: var(--cusu-media-item-bg);
box-shadow: var(--cusu-media-item-shadow);
}
.cusu-shortcode-media[data-use='detail_strip'] .cusu-shortcode-media__item--empty,
.cusu-shortcode-media[data-use='detail_gallery'] .cusu-shortcode-media__item--empty {
aspect-ratio: var(--cusu-media-ratio, 4/3);
border-radius: var(--cusu-media-item-radius);
background: var(--cusu-media-empty-bg);
box-shadow: inset 0 0 0 1px var(--cusu-media-empty-border);
display: none;
}
.cusu-shortcode-media[data-use='detail_strip'] .cusu-shortcode-media__item:first-child {
grid-column: 1 / -1;
}
@container cusu-detail (min-width: 720px) {
.cusu-shortcode-media[data-use='detail_gallery'] .cusu-shortcode-media__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@container cusu-detail (min-width: 960px) {
.cusu-shortcode-media[data-use='detail_strip'] .cusu-shortcode-media__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cusu-shortcode-media[data-use='detail_strip'] .cusu-shortcode-media__item:first-child {
grid-column: auto;
}
}
.cusu-shortcode-media[data-use='detail_gallery'] {
clear: both;
}
.cusu-shortcode-media {
margin-block: 1em;
}
.cusu-shortcode-media__item img,
.cusu-shortcode-media img {
width: 100%;
height: auto;
display: block;
border-radius: var(--cusu-media-item-radius);
border: 0;
box-shadow: var(--cusu-media-item-shadow);
}
.cusu-shortcode-media[data-use='detail_strip'] img,
.cusu-shortcode-media[data-use='detail_gallery'] img {
height: 100%;
object-fit: cover;
border-radius: 0;
box-shadow: none;
}
.cusu-detail__hero-media {
border-radius: var(--cusu-radius-lg);
overflow: hidden;
aspect-ratio: 16 / 9;
background: var(--cusu-surface-strong);
}
.cusu-detail__hero-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.cusu-detail__split {
display: grid;
gap: var(--cusu-space-lg);
grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
}
@media (max-width: 900px) {
.cusu-detail__split {
grid-template-columns: 1fr;
}
}
.cusu-meta-chip {
border: 1px solid var(--cusu-border);
border-radius: var(--cusu-radius-md);
padding: 0.6em 0.8em;
font-size: 0.9em;
background: transparent;
}
.cusu-meta-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: var(--cusu-space-xs) var(--cusu-space-xl);
}
.cusu-meta-row {
display: flex;
justify-content: space-between;
gap: var(--cusu-space-sm);
font-size: 0.95em;
padding: 0.2em 0;
border-bottom: 1px dashed var(--cusu-border);
}
.cusu-meta-row span:last-child {
font-weight: 600;
}
.cusu-meta-row__label {
color: var(--cusu-meta-label-color);
display: inline-flex;
align-items: center;
gap: var(--cusu-capacity-icon-gap);
}
.cusu-meta-row__value {
color: var(--cusu-meta-value-color);
}
.cusu-meta-mini {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: var(--cusu-meta-mini-gap);
}
.cusu-meta-mini span {
font-size: 0.85rem;
color: var(--cusu-muted);
}
.cusu-meta-mini__item strong {
color: var(--cusu-meta-mini-label-color);
font-weight: var(--cusu-meta-mini-label-weight);
display: inline-flex;
align-items: center;
gap: var(--cusu-capacity-icon-gap);
}
.cusu-meta-bar__ctas,
.cusu-meta-list__ctas,
.cusu-meta-mini__ctas {
display: flex;
flex-wrap: wrap;
gap: var(--cusu-meta-cta-gap);
justify-content: var(--cusu-meta-cta-justify);
}
.cusu-meta-mini__ctas {
align-items: start;
}
.cusu-actions-bar__k {
display: inline-flex;
align-items: center;
gap: var(--cusu-capacity-icon-gap);
}
.cusu-capacity-icon {
width: var(--cusu-capacity-icon-size);
height: var(--cusu-capacity-icon-size);
display: inline-block;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
.cusu-capacity-icon[data-tooltip] {
position: relative;
}
.cusu-capacity-icon[data-tooltip]::after,
.cusu-capacity-icon[data-tooltip]::before {
position: absolute;
left: 50%;
bottom: 100%;
opacity: 0;
pointer-events: none;
transition:
opacity 0.2s ease,
transform 0.2s ease;
}
.cusu-capacity-icon[data-tooltip]::after {
content: attr(data-tooltip);
transform: translate(-50%, calc(-1 * var(--cusu-capacity-tooltip-offset)));
padding: var(--cusu-capacity-tooltip-padding);
background: var(--cusu-capacity-tooltip-bg);
color: var(--cusu-capacity-tooltip-color);
border-radius: var(--cusu-capacity-tooltip-radius);
box-shadow: var(--cusu-capacity-tooltip-shadow);
font-size: var(--cusu-capacity-tooltip-font-size);
line-height: 1.2;
white-space: nowrap;
z-index: 3;
}
.cusu-capacity-icon[data-tooltip]::before {
content: '';
transform: translate(-50%, 0.25rem);
border: 0.3rem solid transparent;
border-top-color: var(--cusu-capacity-tooltip-bg);
z-index: 2;
}
@media (hover: hover) {
.cusu-capacity-icon[data-tooltip]:hover::after,
.cusu-capacity-icon[data-tooltip]:hover::before {
opacity: 1;
}
}
.cusu-meta-row[data-tooltip],
.cusu-meta-mini__item[data-tooltip],
.cusu-meta-bar__item[data-tooltip],
.cusu-actions-bar__chip[data-tooltip] {
position: relative;
}
.cusu-meta-row[data-tooltip]::after,
.cusu-meta-mini__item[data-tooltip]::after,
.cusu-meta-bar__item[data-tooltip]::after,
.cusu-actions-bar__chip[data-tooltip]::after,
.cusu-meta-row[data-tooltip]::before,
.cusu-meta-mini__item[data-tooltip]::before,
.cusu-meta-bar__item[data-tooltip]::before,
.cusu-actions-bar__chip[data-tooltip]::before {
position: absolute;
left: 50%;
bottom: 100%;
opacity: 0;
pointer-events: none;
transition:
opacity 0.2s ease,
transform 0.2s ease;
}
.cusu-meta-row[data-tooltip]::after,
.cusu-meta-mini__item[data-tooltip]::after,
.cusu-meta-bar__item[data-tooltip]::after,
.cusu-actions-bar__chip[data-tooltip]::after {
content: attr(data-tooltip);
transform: translate(-50%, calc(-1 * var(--cusu-capacity-tooltip-offset)));
padding: var(--cusu-capacity-tooltip-padding);
background: var(--cusu-capacity-tooltip-bg);
color: var(--cusu-capacity-tooltip-color);
border-radius: var(--cusu-capacity-tooltip-radius);
box-shadow: var(--cusu-capacity-tooltip-shadow);
font-size: var(--cusu-capacity-tooltip-font-size);
line-height: 1.2;
white-space: nowrap;
z-index: 3;
}
.cusu-meta-row[data-tooltip]::before,
.cusu-meta-mini__item[data-tooltip]::before,
.cusu-meta-bar__item[data-tooltip]::before,
.cusu-actions-bar__chip[data-tooltip]::before {
content: '';
transform: translate(-50%, 0.25rem);
border: 0.3rem solid transparent;
border-top-color: var(--cusu-capacity-tooltip-bg);
z-index: 2;
}
@media (hover: hover) {
.cusu-meta-row[data-tooltip]:hover::after,
.cusu-meta-mini__item[data-tooltip]:hover::after,
.cusu-meta-bar__item[data-tooltip]:hover::after,
.cusu-actions-bar__chip[data-tooltip]:hover::after,
.cusu-meta-row[data-tooltip]:hover::before,
.cusu-meta-mini__item[data-tooltip]:hover::before,
.cusu-meta-bar__item[data-tooltip]:hover::before,
.cusu-actions-bar__chip[data-tooltip]:hover::before {
opacity: 1;
}
}
.cusu-price-value {
font-weight: 600;
}
.cusu-price-type {
font-size: 0.85em;
color: var(--cusu-muted);
white-space: nowrap;
}
.cusu-capacity-icon--adult {
background-image: var(--cusu-capacity-adult-icon);
}
.cusu-capacity-icon--child {
background-image: var(--cusu-capacity-child-icon);
}
.cusu-capacity-icon.is-optional {
opacity: var(--cusu-capacity-optional-opacity);
}
.cusu-meta-row[data-key^='capacity_']:not([data-key='capacity_icons']) .cusu-capacity-icon,
.cusu-meta-mini__item[data-key^='capacity_']:not([data-key='capacity_icons']) .cusu-capacity-icon,
.cusu-meta-bar__item[data-key^='capacity_']:not([data-key='capacity_icons']) .cusu-capacity-icon,
.cusu-actions-bar__chip[data-key^='capacity_']:not([data-key='capacity_icons']) .cusu-capacity-icon {
display: none;
}
.cusu-capacity-icons {
display: grid;
gap: var(--cusu-capacity-block-gap);
margin-top: 0.35em;
}
.cusu-capacity-icons__row {
display: flex;
align-items: center;
gap: var(--cusu-capacity-icon-gap);
flex-wrap: wrap;
}
.cusu-capacity-icons__k {
font-size: var(--cusu-capacity-block-label-size);
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--cusu-capacity-block-label-color);
}
.cusu-capacity-icons__v {
display: inline-flex;
gap: var(--cusu-capacity-icon-gap);
flex-wrap: wrap;
}
.cusu-capacity-icons-inline {
display: none;
gap: var(--cusu-capacity-icon-gap);
flex-wrap: wrap;
}
.cusu-actions-bar--list .cusu-actions-bar__chips {
display: grid;
gap: var(--cusu-actions-bar-list-gap);
}
.cusu-actions-bar--list .cusu-actions-bar__chip {
width: 100%;
}
.cusu-actions-bar--mini .cusu-actions-bar__chips {
display: flex;
flex-wrap: wrap;
gap: var(--cusu-space-xs);
}
.cusu-actions {
display: grid;
gap: var(--cusu-space-sm);
padding: var(--cusu-space-md);
border: 1px solid var(--cusu-border);
border-radius: var(--cusu-radius-lg);
background: var(--cusu-surface);
}
.cusu-actions-bar {
display: grid;
gap: var(--cusu-space-sm);
padding: var(--cusu-space-md);
border: 1px solid var(--cusu-border);
border-radius: var(--cusu-radius-lg);
background: var(--cusu-surface);
}
.cusu-actions-bar__chips {
display: grid;
gap: var(--cusu-space-sm) var(--cusu-space-xl);
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--cusu-space-xs);
}
.cusu-actions-bar__chip {
display: grid;
gap: 4px;
padding: 0.55em 0.7em;
border-radius: var(--cusu-radius-md);
border: 1px solid var(--cusu-actions-chip-border);
background: var(--cusu-actions-chip-bg);
font-size: 0.9em;
color: var(--cusu-actions-chip-text);
}
.cusu-actions-bar__k {
font-size: 0.75em;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--cusu-muted);
}
.cusu-actions-bar__v {
font-weight: 600;
}
.cusu-actions-bar__ctas {
display: flex;
flex-wrap: wrap;
gap: var(--cusu-space-xs);
justify-content: flex-end;
}
@media (max-width: 720px) {
.cusu-actions-bar__chips {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.cusu-actions-bar__ctas {
justify-content: flex-start;
}
}
.cusu-actions__price {
font-size: 1.3rem;
font-weight: 600;
}
.cusu-actions__hint {
color: var(--cusu-muted);
font-size: 0.9em;
}
.cusu-actions__inline {
font-size: 0.95em;
color: var(--cusu-muted);
}
.cusu-review-summary {
display: grid;
gap: var(--cusu-space-sm);
padding: var(--cusu-space-md);
border: 1px solid var(--cusu-border);
border-radius: var(--cusu-radius-lg);
background: var(--cusu-surface);
}
.cusu-review-summary__score {
display: flex;
align-items: center;
gap: var(--cusu-space-sm);
font-size: 1.4rem;
font-weight: 600;
}
.cusu-review-summary__stars {
display: inline-flex;
gap: 4px;
}
.cusu-review-summary__stars span {
width: 16px;
height: 16px;
background: color-mix(in oklab, currentColor 18%, transparent);
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.cusu-review-summary__stars span.is-filled {
background: currentColor;
}
.cusu-review-list {
display: grid;
gap: var(--cusu-space-md);
}
.cusu-widget {
display: grid;
gap: var(--cusu-space-md);
padding: var(--cusu-space-md);
border-radius: var(--cusu-radius-lg);
border: 1px solid var(--cusu-border);
background: var(--cusu-surface);
}
@media (max-width: 720px) {
.cusu-review-card--media {
grid-template-columns: 1fr;
}
}
@media (prefers-reduced-motion: reduce) {
.cusu-slider__track,
.cusu-btn {
transition: none;
}
}
/* Reviews (ported from frontend.css) */
.cusu-reviews {
display: grid;
gap: var(--cusu-space-md);
background: transparent;
border-radius: var(--cusu-review-radius);
padding: clamp(16px, 2.6vw, 28px);
}
.cusu-reviews__head h2 {
margin: 0 0 6px;
}
.cusu-reviews__empty {
margin: 0;
color: var(--cusu-review-empty-text);
padding: 0.8em 1em;
border-radius: var(--cusu-radius-md);
border: 1px dashed var(--cusu-review-empty-border);
background: var(--cusu-review-empty-bg);
}
.cusu-reviews__score {
display: flex;
align-items: center;
gap: var(--cusu-space-sm);
font-size: 1.4rem;
font-weight: 600;
}
.cusu-reviews__score-val {
font-weight: 700;
}
.cusu-reviews__score-stars {
display: inline-flex;
gap: 4px;
color: var(--cusu-review-star-bg);
}
.cusu-reviews__score-stars span.is-filled {
color: var(--cusu-review-star-fill);
}
.cusu-reviews__criteria {
display: grid;
gap: var(--cusu-space-xs);
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.cusu-reviews__criteria-title {
font-weight: 600;
color: var(--cusu-review-text);
}
.cusu-reviews__criterion {
border: 1px solid var(--cusu-review-border);
border-radius: var(--cusu-review-radius);
padding: 0.6em 0.75em;
display: grid;
gap: 4px;
background: transparent;
}
.cusu-reviews__filters {
display: flex;
flex-wrap: wrap;
gap: var(--cusu-space-sm);
}
.cusu-reviews__filter {
display: grid;
gap: 6px;
color: var(--cusu-review-muted);
}
.cusu-reviews__filter select {
border: 1px solid var(--cusu-review-filter-border);
background: var(--cusu-review-filter-bg);
border-radius: var(--cusu-review-radius);
padding: 0.5em 0.7em;
color: inherit;
}
.cusu-reviews__list {
display: grid;
gap: var(--cusu-review-grid-gap);
grid-template-columns: repeat(var(--cusu-review-grid-cols), minmax(0, 1fr));
}
.cusu-reviews--list .cusu-reviews__list {
gap: var(--cusu-space-sm);
grid-template-columns: 1fr;
}
.cusu-reviews--list .cusu-review-card {
grid-template-columns: minmax(140px, var(--cusu-review-list-media-width)) 1fr;
align-items: start;
}
.cusu-reviews--list .cusu-review-card__media {
aspect-ratio: 4 / 3;
width: 100%;
max-width: var(--cusu-review-list-media-width);
}
.cusu-reviews--list .cusu-review-card__more--button {
justify-self: flex-start;
}
.cusu-reviews--single .cusu-reviews__list {
grid-template-columns: 1fr;
}
:where(.cusu-detail-layout) :is(img, video) {
max-width: 100%;
height: auto;
}
@media (max-width: 980px) {
.cusu-reviews__list {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.cusu-reviews__list {
grid-template-columns: 1fr;
}
}
.cusu-review-card {
background: var(--cusu-review-card-bg);
border: 1px solid var(--cusu-review-border);
border-radius: var(--cusu-review-radius);
padding: var(--cusu-space-md);
display: grid;
gap: var(--cusu-space-sm);
}
.cusu-review-card__body {
color: var(--cusu-review-text);
}
.cusu-review-card[hidden],
.cusu-review-card.is-hidden {
display: none;
}
.cusu-review-card__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--cusu-space-sm);
}
.cusu-review-score-badge {
background: transparent;
color: inherit;
padding: 0.2em 0.55em;
font-weight: 600;
font-size: 0.85em;
}
.cusu-review-card__author {
font-weight: 600;
}
.cusu-review-card__author time {
color: var(--cusu-review-muted);
font-weight: 400;
}
.cusu-review-card__title {
font-weight: 600;
}
.cusu-review-card__media {
border-radius: var(--cusu-review-radius);
overflow: hidden;
aspect-ratio: 4/3;
}
.cusu-review-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.cusu-review-card__text {
color: var(--cusu-review-text);
font-size: 0.9375em;
margin-block: 1em;
display: -webkit-box;
-webkit-line-clamp: 5;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cusu-review-card__debug {
color: var(--cusu-review-muted);
font-size: 0.85em;
}
.cusu-review-card__debug ul {
margin: 0;
padding-left: 1.2em;
}
.cusu-review-picker {
border-radius: var(--cusu-review-radius);
background: var(--cusu-review-card-bg);
box-shadow: 0 0 0 1px var(--cusu-review-border);
padding: var(--cusu-space-md);
display: grid;
gap: var(--cusu-space-sm);
}
.cusu-review-picker label {
color: var(--cusu-review-muted);
}
.cusu-review-picker select {
border-radius: var(--cusu-review-radius);
border: 1px solid var(--cusu-review-border);
background: var(--cusu-review-bg);
color: var(--cusu-review-text);
padding: 0.5em 0.7em;
}
.cusu-review-picker__cta {
border-radius: var(--cusu-review-radius);
background: transparent;
color: inherit;
padding: 0.65em 1.1em;
border: 1px solid var(--cusu-review-border);
cursor: pointer;
}
.cusu-review-picker__note {
color: var(--cusu-review-muted);
}
.cusu-review-card__more {
color: var(--cusu-review-link);
text-decoration: none;
}
.cusu-review-card__more--button {
background: transparent;
color: inherit;
border: 1px solid var(--cusu-review-border);
border-radius: 999px;
padding: 0.45em 0.85em;
cursor: pointer;
}
.cusu-review-image__remove {
background: transparent;
color: inherit;
border: 1px solid var(--cusu-review-border);
border-radius: 999px;
padding: 0.35em 0.6em;
cursor: pointer;
}
.cusu-review-image {
all: unset;
position: relative;
border: 1px solid var(--cusu-review-border);
border-radius: var(--cusu-review-radius);
padding: var(--cusu-space-sm);
background: var(--cusu-review-card-bg);
display: grid;
gap: var(--cusu-space-xs);
}
.cusu-review-image:hover,
.cusu-review-image:focus {
background: var(--cusu-review-card-bg);
}
.cusu-reviews__lock {
color: var(--cusu-review-muted);
}
.cusu-reviews__cta,
.cusu-reviews__more {
background: transparent;
color: inherit;
border: 1px solid var(--cusu-review-border);
border-radius: 999px;
padding: 0.65em 1.2em;
cursor: pointer;
}
.cusu-reviews__divider {
border-top: 1px solid var(--cusu-review-border);
}
.cusu-reviews__cta-head {
font-weight: 600;
}
.cusu-review-dialog {
border: none;
padding: 0;
max-width: min(860px, 92vw);
width: 100%;
background: var(--cusu-review-dialog-bg);
border-radius: var(--cusu-review-dialog-radius);
box-shadow: var(--cusu-review-dialog-shadow);
scrollbar-width: none;
position: fixed;
}
.cusu-review-dialog::backdrop {
background: var(--cusu-review-backdrop);
}
.cusu-review-dialog__head {
padding: var(--cusu-review-dialog-padding);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--cusu-review-dialog-head-gap);
}
.cusu-review-dialog > h3 {
margin: var(--cusu-review-dialog-title-margin);
padding: var(--cusu-review-dialog-padding);
font-size: var(--cusu-review-dialog-title-size);
}
.cusu-review-dialog__subhead {
margin: 1em 0;
font-size: var(--cusu-review-dialog-subhead-size);
}
.cusu-review-dialog__text {
margin-block: 1em;
color: var(--cusu-review-text);
}
.cusu-review-dialog__subhead,
.cusu-review-dialog__text,
.cusu-review-dialog__scores,
.cusu-review-dialog__media {
padding: 0 var(--cusu-review-dialog-padding);
}
.cusu-review-dialog__scores,
.cusu-review-dialog__media {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
margin-bottom: var(--cusu-review-dialog-section-gap);
}
.cusu-review-dialog__scores {
display: grid;
gap: var(--cusu-space-xs);
}
.cusu-review-dialog__scores ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 6px;
}
.cusu-review-dialog__scores li {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.cusu-review-dialog__scores li > span {
font-size: 0.8em;
}
.cusu-review-dialog__stars {
display: flex;
align-items: center;
gap: 6px;
}
.cusu-review-score-inline {
color: var(--cusu-review-muted);
font-size: 0.9em;
}
.cusu-stars {
position: relative;
display: inline-block;
font-size: var(--cusu-stars-size);
line-height: 1;
letter-spacing: var(--cusu-stars-spacing);
color: var(--cusu-review-star-bg);
width: max-content;
}
.cusu-stars::before {
content: '★★★★★';
}
.cusu-stars__fill {
position: absolute;
inset: 0;
width: calc((var(--rating, 0) / 5) * 100%);
overflow: hidden;
color: var(--cusu-review-star-fill);
}
.cusu-stars__fill::before {
content: '★★★★★';
}
:where(.cusu-review-score-badge) .cusu-stars {
min-width: none;
margin-left: 0.5em;
}
.cusu-review-dialog__media {
display: grid;
gap: var(--cusu-space-sm);
}
.cusu-review-dialog__media figure {
margin: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.cusu-review-dialog__media img {
width: 100%;
border-radius: var(--cusu-media-item-radius);
display: block;
}
.cusu-review-dialog__media figcaption {
color: var(--cusu-review-muted);
font-size: 0.85em;
}
.cusu-review-dialog__close {
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
background: color-mix(in oklab, var(--cusu-review-dialog-close-bg) 35%, #fff 65%);
color: var(--cusu-review-dialog-close-text);
padding: 0;
border: none;
cursor: pointer;
z-index: 2;
}
.cusu-review-dialog__close span {
font-size: 1.5rem;
line-height: 1;
margin-top: -2px;
}
.cusu-review-dialog__close:hover,
.cusu-review-dialog__close:focus-visible {
color: var(--cusu-review-dialog-close-text);
outline: none;
}
.cusu-review-dialog__close:focus {
outline: none;
}
.cusu-review-modal::backdrop {
background: rgba(9, 12, 20, 0.72);
backdrop-filter: blur(2px);
}
.cusu-review-modal {
border: none;
border-radius: calc(var(--cusu-review-radius) + 4px);
max-width: min(760px, 94vw);
width: 100%;
margin: auto;
padding: 0;
background: transparent;
box-shadow: 0 30px 90px rgba(2, 6, 23, 0.34);
scrollbar-width: none;
animation: review-modal-into 0.3s ease;
}
@keyframes review-modal-into {
from {
opacity: 0;
scale: 1.025;
}
to {
opacity: 1;
scale: 1;
}
}
.cusu-review-modal__inner {
border-radius: inherit;
border: 1px solid color-mix(in oklab, var(--cusu-review-border) 85%, transparent);
background: linear-gradient(
180deg,
color-mix(in oklab, var(--cusu-review-card-bg) 98%, #fff 4%) 0%,
color-mix(in oklab, var(--cusu-review-card-bg) 96%, var(--cusu-review-text) 8%) 100%
);
padding: clamp(18px, 2.8vw, 30px);
display: grid;
gap: var(--cusu-space-md);
}
@media (max-width: 700px) {
.cusu-review-modal {
position: fixed;
left: 10px;
right: 10px;
top: auto;
bottom: 10px;
width: auto;
max-width: none;
margin: 0;
}
.cusu-review-modal__inner {
margin-inline: 0;
max-height: calc(100dvh - 20px);
overflow-y: auto;
}
}
.cusu-review-step {
display: grid;
gap: var(--cusu-space-sm);
}
.cusu-review-step[hidden] {
display: none !important;
}
.cusu-review-step > h3 {
margin: 1em 0 0;
font-size: clamp(1.2rem, 2.2vw, 1.6rem);
line-height: 1.2;
}
.cusu-review-step--fade-in {
animation: cusu-review-step-fade-in 170ms ease both;
}
.cusu-review-step--fade-out {
animation: cusu-review-step-fade-out 170ms ease both;
}
@keyframes cusu-review-step-fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes cusu-review-step-fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.cusu-review-field {
display: grid;
gap: 6px;
padding: 10px 12px;
border-radius: 12px;
border: 1px solid color-mix(in oklab, var(--cusu-review-border) 80%, transparent);
background: color-mix(in oklab, var(--cusu-review-card-bg) 95%, transparent);
}
@media (min-width: 900px) {
.cusu-review-step--item,
.cusu-review-step--hotel {
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: var(--cusu-space-md);
}
.cusu-review-step--item > *,
.cusu-review-step--hotel > * {
grid-column: 1 / -1;
}
.cusu-review-step--item > .cusu-review-field,
.cusu-review-step--hotel > .cusu-review-field {
grid-column: auto;
}
}
@media (min-width: 1280px) {
.cusu-review-step--item,
.cusu-review-step--hotel {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.cusu-review-form label {
display: grid;
gap: 6px;
}
.cusu-review-field > label {
font-size: 0.85em;
transition: color 0.2s;
}
.cusu-review-field:not(:hover):not(:focus-within) > label {
color: var(--cusu-review-muted);
}
.cusu-review-form input[type='text'],
.cusu-review-form input[type='email'],
.cusu-review-form textarea {
border: 1px solid var(--cusu-review-border);
border-radius: var(--cusu-review-radius);
padding: 0.6em 0.75em;
background: var(--cusu-review-card-bg);
color: var(--cusu-review-text);
}
.cusu-review-honeypot {
position: absolute;
opacity: 0;
pointer-events: none;
height: 1px;
width: 1px;
}
.cusu-review-stars {
display: inline-flex;
gap: 4px;
flex-direction: row-reverse;
justify-content: flex-end;
align-items: center;
isolation: isolate;
}
.cusu-review-stars input {
position: absolute;
opacity: 0;
}
.cusu-review-stars label {
color: var(--cusu-review-star-bg);
cursor: pointer;
font-size: 1.28rem;
line-height: 1;
transition:
transform 120ms ease,
color 120ms ease;
}
.cusu-review-stars label:hover {
transform: translateY(-1px);
}
.cusu-review-stars input:checked ~ label,
.cusu-review-stars label:hover,
.cusu-review-stars label:hover ~ label {
color: var(--cusu-review-star-fill);
}
.cusu-review-stars input:focus-visible + label {
outline: 2px solid color-mix(in oklab, var(--cusu-review-star-fill) 65%, #fff 35%);
outline-offset: 2px;
border-radius: 4px;
}
.cusu-review-hotel-summary {
border-radius: var(--cusu-review-radius);
background: var(--cusu-review-summary-bg);
border: 1px solid var(--cusu-review-summary-border);
padding: var(--cusu-space-sm);
display: grid;
gap: 4px;
}
.cusu-review-hotel-summary__label {
color: var(--cusu-review-muted);
font-size: 0.85em;
}
.cusu-review-hotel-summary__value {
color: var(--cusu-review-summary-value);
font-weight: 600;
}
.cusu-review-actions {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--cusu-space-sm);
}
.cusu-review-actions button {
border-radius: 999px;
padding: 0.55em 1em;
}
.cusu-review-nav {
display: flex;
justify-content: space-between;
gap: var(--cusu-space-sm);
margin-top: var(--cusu-space-xs);
}
.cusu-review-nav button,
.cusu-review-actions button {
border-radius: 999px;
padding: 0.62em 1.1em;
cursor: pointer;
transition:
transform 150ms ease,
opacity 150ms ease,
filter 150ms ease;
}
.cusu-review-next {
margin-left: auto;
}
.cusu-review-nav button:hover,
.cusu-review-actions button:hover {
transform: translateY(-1px);
filter: brightness(1.03);
}
.cusu-review-nav button:disabled,
.cusu-review-actions button:disabled {
opacity: 0.58;
cursor: not-allowed;
transform: none;
}
.cusu-review-actions button:not([type='submit']),
.cusu-review-nav .cusu-review-back {
background: transparent;
color: inherit;
border: 1px solid var(--cusu-review-border);
}
.cusu-review-dropzone {
border: 1px dashed color-mix(in oklab, var(--cusu-review-border) 88%, transparent);
border-radius: var(--cusu-review-radius);
background: color-mix(in oklab, var(--cusu-review-card-bg) 97%, transparent);
padding: 16px;
display: grid;
gap: 6px;
justify-items: center;
text-align: center;
cursor: pointer;
transition:
border-color 140ms ease,
background-color 140ms ease;
}
.cusu-review-dropzone.is-dragover {
border-color: color-mix(in oklab, var(--cusu-review-btn-bg) 56%, var(--cusu-review-border));
background: color-mix(in oklab, var(--cusu-review-card-bg) 90%, var(--cusu-review-btn-bg) 10%);
}
.cusu-review-dropzone__input {
position: absolute;
width: 1px;
height: 1px;
opacity: 0;
pointer-events: none;
}
.cusu-review-dropzone__title {
font-weight: 600;
color: var(--cusu-review-text);
}
.cusu-review-dropzone__subtitle {
color: var(--cusu-review-muted);
font-size: 0.9rem;
}
.cusu-review-dropzone__button {
border: 1px solid color-mix(in oklab, var(--cusu-review-border) 88%, transparent);
border-radius: 999px;
background: color-mix(in oklab, var(--cusu-review-card-bg) 94%, transparent);
color: var(--cusu-review-text);
padding: 0.5em 0.95em;
cursor: pointer;
}
.cusu-review-images {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(70vw, 250px), 1fr));
gap: var(--cusu-space-sm);
font-size: 0.85rem;
}
.cusu-review-images__note {
color: var(--cusu-review-image-note);
font-size: 0.9em;
}
.cusu-review-image.is-main {
background-color: #fff;
box-shadow: 0 0 1em rgba(0, 0, 0, 0.33);
}
.cusu-review-image {
display: grid;
gap: 8px;
text-align: left;
border: 1px solid color-mix(in oklab, var(--cusu-review-border) 90%, transparent);
border-radius: var(--cusu-review-radius);
padding: 10px;
background: color-mix(in oklab, var(--cusu-review-card-bg) 96%, transparent);
}
.cusu-review-image img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: var(--cusu-review-radius);
}
.cusu-review-image span {
color: var(--cusu-review-text);
background: color-mix(in oklab, var(--cusu-review-card-bg) 88%, var(--cusu-review-text) 12%);
border-radius: 999px;
padding: 0.28em 0.62em;
font-size: 0.74rem;
line-height: 1;
justify-self: start;
}
.cusu-review-image__meta {
display: grid;
gap: 6px;
}
.cusu-review-image__meta select,
.cusu-review-image__meta input {
border: 1px solid var(--cusu-review-border);
border-radius: var(--cusu-review-radius);
padding: 0.45em 0.6em;
color: var(--cusu-review-text);
background: var(--cusu-review-card-bg);
font-size: 1em;
}
.cusu-review-image__meta select:hover,
.cusu-review-image__meta input:hover {
border-color: color-mix(in oklab, var(--cusu-review-border) 74%, var(--cusu-review-text) 26%);
}
.cusu-review-image__meta select:focus-visible,
.cusu-review-image__meta input:focus-visible {
outline: none;
border-color: color-mix(in oklab, var(--cusu-review-btn-bg) 46%, var(--cusu-review-border));
box-shadow: 0 0 0 3px color-mix(in oklab, var(--cusu-review-btn-bg) 16%, transparent);
}
.cusu-review-image__remove {
position: absolute;
top: 0;
right: 0;
background-color: #fff;
border: 1px solid color-mix(in oklab, var(--cusu-review-border) 88%, transparent);
border-radius: 999px 0 999px 999px;
background: transparent;
color: var(--cusu-review-muted);
width: 30px;
height: 30px;
display: inline-grid;
place-items: center;
cursor: pointer;
justify-self: end;
}
.cusu-review-image__remove:hover {
color: var(--cusu-review-text);
border-color: color-mix(in oklab, var(--cusu-review-border) 68%, var(--cusu-review-text) 32%);
}
.cusu-review-charcount {
text-align: right;
margin-top: -4px;
font-size: 0.82rem;
color: var(--cusu-review-muted);
}
.cusu-review-charcount.is-valid {
color: color-mix(in oklab, var(--cusu-review-text) 76%, #16a34a 24%);
}
.cusu-review-form.is-loading {
opacity: 0.72;
pointer-events: none;
}
.cusu-review-loading {
color: var(--cusu-review-muted);
}
.cusu-review-status {
color: var(--cusu-review-muted);
}
.cusu-review-status[data-state='error'] {
color: var(--cusu-review-error, #b91c1c);
}
.cusu-review-spinner {
border: 2px solid var(--cusu-review-border);
border-top-color: var(--cusu-review-btn-bg);
border-radius: 999px;
width: 18px;
height: 18px;
animation: cusu-spin 1s linear infinite;
}
@keyframes cusu-spin {
to {
transform: rotate(360deg);
}
}
.cusu-review-privacy {
color: var(--cusu-review-muted);
font-size: 0.85em;
}
.cusu-pm-hotel-detail {
display: grid;
gap: clamp(1.6rem, 2.2vw, 2.4rem);
}
.cusu-pm-hotel-section {
display: grid;
gap: 1rem;
}
.cusu-pm-hotel-section__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 0.8rem;
}
.cusu-pm-hotel-section__title {
margin: 0;
}
.cusu-pm-hotel-section__actions {
display: inline-flex;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
}
.cusu-pm-hotel-section__action {
display: inline-flex;
align-items: center;
border-radius: 999px;
padding: 0.36rem 0.76rem;
text-decoration: none;
font-size: 0.84rem;
line-height: 1.2;
color: inherit;
background: color-mix(in oklab, currentColor 8%, transparent);
}
.cusu-pm-hotel-section__body .cusu-pm-related-list .cusu-sc-cards {
gap: clamp(1rem, 1.8vw, 1.4rem);
}
.cusu-pm-related-groups {
display: grid;
gap: clamp(1rem, 1.6vw, 1.3rem);
}
.cusu-pm-related-group {
display: grid;
gap: 0.7rem;
}
.cusu-pm-related-group__title {
margin: 0;
font-size: clamp(1rem, 1.1vw, 1.15rem);
}
.cusu-pm-more-wrap {
margin: 1rem 0 0;
}
.cusu-pm-more-btn.button.button-secondary {
border: 0;
border-radius: 999px;
padding: 0.46rem 0.92rem;
line-height: 1.2;
font-size: 0.84rem;
}
.cusu-pm-hotel-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
gap: clamp(0.8rem, 1.5vw, 1.2rem);
}
.cusu-pm-hotel-gallery__item {
margin: 0;
border-radius: 14px;
overflow: hidden;
position: relative;
}
.cusu-pm-hotel-gallery__item img {
display: block;
width: 100%;
height: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
transition: transform 220ms ease;
}
.cusu-pm-hotel-gallery__link {
display: block;
height: 100%;
color: inherit;
text-decoration: none;
}
.cusu-pm-hotel-gallery__link:hover img,
.cusu-pm-hotel-gallery__link:focus-visible img {
transform: scale(1.02);
}
.cusu-pm-hotel-gallery__more {
position: absolute;
inset: 0;
margin: 0;
display: grid;
place-items: center;
background: rgba(15, 23, 42, 0.42);
}
.cusu-pm-hotel-gallery__more-btn {
border: 0;
border-radius: 999px;
padding: 0.42rem 0.86rem;
font: inherit;
font-size: 0.86rem;
color: #fff;
background: rgba(15, 23, 42, 0.56);
cursor: pointer;
}
.cusu-pm-detail-hotel-info {
margin: 2rem 0 0;
padding: clamp(1rem, 1.8vw, 1.3rem);
border-radius: 16px;
background: color-mix(in oklab, #fff 92%, #f8fafc);
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}
.cusu-pm-detail-hotel-info__title {
margin: 0 0 0.8rem;
font-size: 1.2rem;
line-height: 1.3;
}
.cusu-pm-detail-hotel-info__title a,
.cusu-pm-detail-hotel-info__name a {
text-decoration: none;
}
.cusu-pm-detail-hotel-info__grid {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 1rem;
align-items: start;
}
.cusu-pm-detail-hotel-info__column {
min-width: 0;
}
.cusu-pm-detail-hotel-info__column--main,
.cusu-pm-detail-hotel-info__column--contact {
border: 0;
border-radius: 14px;
padding: 1rem;
background: color-mix(in oklab, #fff 94%, #f8fafc);
box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.05);
}
.cusu-pm-detail-hotel-info__brand-media {
position: relative;
margin: 0 0 0.7rem;
border-radius: 10px;
overflow: hidden;
border: 1px solid #dbe1e8;
}
.cusu-pm-detail-hotel-info__hero-media {
display: block;
}
.cusu-pm-detail-hotel-info__hero-image {
display: block;
width: 100%;
height: auto;
min-height: 190px;
object-fit: cover;
}
.cusu-pm-detail-hotel-info__brand-logo {
position: absolute;
top: 10px;
right: 10px;
z-index: 2;
}
.cusu-pm-detail-hotel-info__name {
margin: 0 0 0.5rem;
font-weight: 700;
}
.cusu-pm-detail-hotel-info__logo {
margin: 0 0 0.5rem;
}
.cusu-pm-detail-hotel-info__logo-image {
display: block;
width: 200px;
max-width: 100%;
height: 60px;
object-fit: contain;
object-position: left center;
}
.cusu-pm-detail-hotel-info__teaser p {
margin: 0 0 0.6rem;
}
.cusu-pm-detail-hotel-info__microcopy {
margin: 0 0 0.7rem;
font-size: 0.9rem;
color: #475569;
}
.cusu-pm-detail-hotel-info__prices {
margin-top: 0.5rem;
font-size: 0.95rem;
}
.cusu-pm-detail-hotel-info__price-note {
display: block;
margin-top: 0.35rem;
font-size: 0.82rem;
color: #64748b;
}
.cusu-pm-detail-hotel-info__actions {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
margin-top: 0.8rem;
}
.cusu-pm-detail-hotel-info__button {
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid #d1d5db;
border-radius: 999px;
padding: 0.38rem 0.78rem;
font-size: 0.82rem;
text-decoration: none;
background: #fff;
}
.cusu-pm-detail-hotel-info__button--primary {
border-color: #0f172a;
background: #0f172a;
color: #fff;
}
.cusu-pm-detail-hotel-info__contact {
margin-top: 0.5rem;
font-size: 0.95rem;
}
.cusu-pm-detail-hotel-info__contact-section,
.cusu-pm-detail-hotel-info__map-section {
margin-top: 1rem;
}
.cusu-pm-detail-hotel-info__section-title {
margin: 0 0 0.45rem;
font-size: 1rem;
line-height: 1.25;
}
.cusu-pm-detail-hotel-info__section-intro p,
.cusu-pm-detail-hotel-info__section-outro p {
margin: 0 0 0.5rem;
font-size: 0.92rem;
color: #475569;
}
.cusu-pm-detail-hotel-info__line {
margin: 0 0 0.35rem;
}
.cusu-pm-detail-hotel-info__line--hotel {
margin-bottom: 0.55rem;
}
.cusu-pm-detail-hotel-info__line--address .cusu-pm-detail-hotel-info__value {
display: block;
white-space: pre-line;
}
@media (max-width: 740px) {
.cusu-pm-hotel-section__head {
flex-direction: column;
align-items: flex-start;
}
.cusu-pm-detail-hotel-info__grid {
grid-template-columns: 1fr;
}
}
@media (min-width: 980px) {
.cusu-pm-detail-hotel-info__grid {
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
}