/* CK components — mobile first (375 → 768 → 1280). Colours, spacing, type and radius come from Automatic.css tokens only.
   Root font size is 62.5% (ACSS), so 1rem = 10px: 4.4rem is the 44px minimum touch target. */

:root {
	--ck-touch: 4.4rem;
	--ck-border: 1px solid var(--shade);
	--ck-surface: var(--white);
	--ck-muted: var(--neutral);
	--ck-rent: var(--secondary);
	--ck-sale: var(--tertiary);
	--ck-gold: var(--accent);
	--ck-ivory: var(--shade-ultra-light);
	--ck-shadow: var(--box-shadow-m);
	--ck-heading: Kanit, var(--heading-font-family, sans-serif);
}

body { font-size: max(1.6rem, var(--text-m)); }
.ck-icon { flex: none; width: 1.25em; height: 1.25em; }
.ck-muted { color: var(--ck-muted); font-size: var(--text-s); }
.ck-link { display: inline-flex; gap: .4em; align-items: center; color: var(--primary); font-weight: 600; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }

/* Buttons */
.ck-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	min-height: var(--ck-touch); padding: 0 var(--space-m);
	border-radius: var(--radius); border: 1px solid transparent;
	font-family: var(--ck-heading); font-weight: 600; font-size: var(--text-m); line-height: 1.1;
	text-decoration: none; cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
.ck-btn-primary { background: var(--primary); color: var(--white); }
.ck-btn-primary:hover { background: var(--primary-dark); color: var(--white); }
.ck-btn-accent { background: var(--ck-gold); color: var(--primary); }
.ck-btn-accent:hover { background: var(--accent-dark); color: var(--primary); }
.ck-btn-ghost { background: var(--ck-surface); color: var(--primary); border-color: var(--shade); }
.ck-btn-ghost:hover { border-color: var(--primary); }
.ck-btn-ghost-light { background: transparent; color: var(--white); border-color: var(--white-trans-50, var(--white)); }
.ck-btn-line { background: var(--success, var(--secondary)); color: var(--white); }
.ck-btn-block { width: 100%; }
.ck-btn[disabled] { opacity: .5; cursor: not-allowed; }
.ck-iconbtn { display: inline-grid; place-items: center; width: var(--ck-touch); height: var(--ck-touch); border-radius: var(--radius); background: transparent; border: 0; color: inherit; cursor: pointer; list-style: none; }
.ck-iconbtn::-webkit-details-marker { display: none; }
.ck-iconbtn:hover { background: var(--ck-ivory); }

/* Badges & pills */
.ck-badge { display: inline-flex; align-items: center; padding: .2em .7em; border-radius: var(--radius-s, var(--radius)); font-family: var(--ck-heading); font-weight: 600; font-size: var(--text-s); line-height: 1.4; color: var(--white); }
.ck-badge--rent { background: var(--ck-rent); }
.ck-badge--sale { background: var(--ck-sale); }
.ck-badge--accent { background: var(--ck-gold); color: var(--primary); }
.ck-badge--reserved { background: var(--primary); }
.ck-pill { display: inline-block; padding: .15em .75em; border-radius: 99em; font-size: var(--text-s); font-weight: 600; }
.ck-pill--pending { background: var(--warning-ultra-light, var(--ck-ivory)); color: var(--warning-dark, var(--base)); }
.ck-pill--active { background: var(--success-ultra-light, var(--ck-ivory)); color: var(--success-dark, var(--secondary)); }
.ck-pill--reserved { background: var(--primary-ultra-light); color: var(--primary); }
.ck-pill--closed, .ck-pill--expired { background: var(--neutral-ultra-light, var(--ck-ivory)); color: var(--neutral); }
.ck-pill--rejected { background: var(--danger-ultra-light, var(--ck-ivory)); color: var(--danger, var(--tertiary)); }

/* Grid of cards: 1 → 2 → 3 */
.ck-grid { display: grid; gap: var(--space-m); grid-template-columns: 1fr; }
@media (min-width: 768px) { .ck-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .ck-grid { grid-template-columns: repeat(3, 1fr); } }
.ck-grid--row { grid-template-columns: 1fr !important; gap: var(--space-s); }

/* Listing card */
.ck-card { position: relative; display: flex; flex-direction: column; background: var(--ck-surface); border: var(--ck-border); border-radius: var(--radius); overflow: hidden; transition: box-shadow .2s, transform .2s; }
.ck-card:hover { box-shadow: var(--ck-shadow); }
.ck-card__link { position: absolute; inset: 0; z-index: 2; }
.ck-card__link:focus-visible { outline: 3px solid var(--ck-gold); outline-offset: -3px; border-radius: var(--radius); }
.ck-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--ck-ivory); }
.ck-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ck-card__img--empty { display: grid; place-items: center; color: var(--ck-muted); height: 100%; }
.ck-card__badges, .ck-card__flags { position: absolute; top: var(--space-xs); display: flex; gap: .4rem; }
.ck-card__badges { left: var(--space-xs); }
.ck-card__flags { right: var(--space-xs); }
.ck-card__body { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-s); flex: 1; }
.ck-card__prices { display: flex; flex-direction: column; }
.ck-card__price { font-family: var(--ck-heading); font-weight: 700; font-size: var(--h4); color: var(--primary); line-height: 1.2; }
.ck-card__price + .ck-card__price { font-size: var(--text-l); }
.ck-card__title { margin: 0; font-size: var(--text-m); font-weight: 600; font-family: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--base); }
.ck-card__specs { display: flex; flex-wrap: wrap; gap: .4rem var(--space-s); margin: 0; padding: 0; list-style: none; font-size: var(--text-s); color: var(--base); }
.ck-card__specs li { display: inline-flex; align-items: center; gap: .3em; }
.ck-card__specs .ck-icon { color: var(--ck-muted); }
.ck-card__foot { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-xs); margin-top: auto; font-size: var(--text-xs, var(--text-s)); color: var(--ck-muted); }
.ck-card__meta { display: inline-flex; align-items: center; gap: .3em; flex-wrap: wrap; }
.ck-card__code { font-family: var(--ck-heading); font-weight: 600; color: var(--primary); white-space: nowrap; }
.ck-card--featured { border: 2px solid var(--ck-gold); }
.ck-card--row { flex-direction: row; }
.ck-card--row .ck-card__media { width: 38%; max-width: 16rem; aspect-ratio: auto; min-height: 10rem; flex: none; }
.ck-card--row .ck-card__price { font-size: var(--text-l); }
.ck-card--skeleton .ck-card__media, .ck-card--skeleton span { background: linear-gradient(90deg, var(--ck-ivory), var(--shade-light, var(--shade)), var(--ck-ivory)); background-size: 200% 100%; animation: ck-shimmer 1.2s infinite; }
.ck-card--skeleton span { display: block; height: 1.4rem; border-radius: var(--radius-s, var(--radius)); }
.ck-card--skeleton span:nth-child(2) { width: 70%; }
.ck-card--skeleton span:nth-child(3) { width: 45%; }
@keyframes ck-shimmer { to { background-position: -200% 0; } }

/* Project card */
.ck-pcard { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--ck-surface); border: var(--ck-border); }
.ck-pcard__media { aspect-ratio: 16 / 10; background: var(--ck-ivory); }
.ck-pcard__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ck-pcard__body { padding: var(--space-s); }
.ck-pcard__title { margin: 0; font-size: var(--text-l); }
.ck-pcard__en, .ck-pcard__meta { margin: .2em 0 0; color: var(--ck-muted); font-size: var(--text-s); display: flex; align-items: center; gap: .3em; }
.ck-pcard__meta strong { color: var(--primary); }

/* Zones */
.ck-zones { display: flex; gap: var(--space-xs); overflow-x: auto; scrollbar-width: none; padding-bottom: .2rem; }
.ck-zones__item { display: inline-flex; align-items: center; gap: .4em; min-height: var(--ck-touch); padding: 0 var(--space-s); border-radius: 99em; background: var(--ck-surface); border: var(--ck-border); color: var(--primary); font-weight: 600; text-decoration: none; white-space: nowrap; }
.ck-zones__item:hover { border-color: var(--primary); }

/* Segmented control */
.ck-seg { display: inline-flex; padding: .3rem; gap: .3rem; background: var(--ck-ivory); border: var(--ck-border); border-radius: var(--radius); }
.ck-seg--block { display: flex; }
.ck-seg--block .ck-seg__opt { flex: 1; }
.ck-seg__opt { position: relative; cursor: pointer; }
.ck-seg__opt input { position: absolute; opacity: 0; pointer-events: none; }
.ck-seg__opt span, .ck-seg__btn { display: flex; align-items: center; justify-content: center; min-height: calc(var(--ck-touch) - .6rem); padding: 0 var(--space-s); border-radius: calc(var(--radius) - .3rem); font-weight: 600; color: var(--base); background: transparent; border: 0; font: inherit; cursor: pointer; }
.ck-seg__opt input:checked + span, .ck-seg__btn[aria-selected="true"] { background: var(--primary); color: var(--white); }
.ck-seg__opt input:focus-visible + span { outline: 2px solid var(--ck-gold); }

/* Search bar */
.ck-search { position: relative; background: var(--ck-surface); border-radius: var(--radius); padding: var(--space-xs); box-shadow: var(--ck-shadow); }
.ck-search__top { display: grid; grid-template-columns: auto 1fr; gap: var(--space-xs); align-items: center; }
.ck-search__q { display: flex; align-items: center; gap: .5em; min-height: var(--ck-touch); padding: 0 var(--space-s); border: var(--ck-border); border-radius: var(--radius); background: var(--white); color: var(--ck-muted); }
.ck-search__q input { border: 0; outline: 0; width: 100%; font: inherit; color: var(--base); background: transparent; min-height: calc(var(--ck-touch) - .2rem); }
.ck-search__filter-btn { grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: .5em; min-height: var(--ck-touch); border: var(--ck-border); border-radius: var(--radius); background: var(--white); font: inherit; font-weight: 600; color: var(--primary); cursor: pointer; }
.ck-search__submit { display: none; }
.ck-search__filters { display: none; }
.ck-search__filters.is-open { display: flex; flex-direction: column; gap: var(--space-s); position: fixed; inset: auto 0 0 0; z-index: 1000; max-height: 85vh; overflow: auto; padding: var(--space-m); background: var(--white); border-radius: var(--radius-l, var(--radius)) var(--radius-l, var(--radius)) 0 0; box-shadow: var(--box-shadow-xl, var(--ck-shadow)); }
.ck-sheet__head, .ck-sheet__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); }
.ck-sheet__foot .ck-btn { flex: 1; }
.ck-sheet-backdrop { position: fixed; inset: 0; background: var(--black-trans-50); z-index: 999; }
@media (min-width: 1024px) {
	.ck-search__top { grid-template-columns: auto 1fr auto; }
	.ck-search__filter-btn { display: none; }
	.ck-search__submit { display: inline-flex; }
	.ck-search__filters, .ck-search__filters.is-open { position: static; display: grid; grid-template-columns: repeat(4, 1fr) auto; align-items: end; gap: var(--space-xs); max-height: none; padding: var(--space-xs) 0 0; box-shadow: none; border-radius: 0; }
	.ck-sheet__head, .ck-sheet__foot { display: none; }
}

/* Form fields */
.ck-form { display: flex; flex-direction: column; gap: var(--space-s); max-width: 60rem; }
.ck-field { display: flex; flex-direction: column; gap: .4rem; border: 0; padding: 0; margin: 0; min-width: 0; }
.ck-field > span, .ck-field > legend { font-weight: 600; font-size: var(--text-s); color: var(--base); }
.ck-field b { color: var(--danger, var(--tertiary)); }
.ck-field small { color: var(--ck-muted); font-size: var(--text-s); }
.ck-field input, .ck-field select, .ck-field textarea { width: 100%; min-height: var(--ck-touch); padding: .6rem var(--space-s); font: inherit; color: var(--base); background: var(--white); border: var(--ck-border); border-radius: var(--radius); }
.ck-field input:focus, .ck-field select:focus, .ck-field textarea:focus { outline: 2px solid var(--ck-gold); border-color: var(--primary); }
.ck-check { display: flex; align-items: flex-start; gap: .6em; min-height: var(--ck-touch); cursor: pointer; }
.ck-check input { width: 2rem; height: 2rem; margin-top: .3rem; accent-color: var(--primary); flex: none; }
.ck-check--terms { font-size: var(--text-s); }
.ck-note { padding: var(--space-s); border-radius: var(--radius); background: var(--primary-ultra-light); color: var(--base); border-left: .4rem solid var(--primary); }
.ck-note .ck-btn { margin-top: var(--space-xs); }
.ck-note--error { background: var(--danger-ultra-light, var(--ck-ivory)); border-color: var(--danger, var(--tertiary)); }
.ck-note--ok { background: var(--success-ultra-light, var(--ck-ivory)); border-color: var(--success, var(--secondary)); }
.ck-steps-note { font-size: var(--text-s); color: var(--ck-muted); margin-bottom: var(--space-s); }
.ck-login-box { max-width: 44rem; margin-inline: auto; padding: var(--space-l) var(--space-m); text-align: center; background: var(--white); border: var(--ck-border); border-radius: var(--radius); }
.ck-empty { padding: var(--space-l) var(--space-m); text-align: center; background: var(--ck-surface); border: 1px dashed var(--shade); border-radius: var(--radius); }
.ck-empty .ck-btn { margin: var(--space-xs) .2rem 0; }

/* Results header + pagination */
.ck-results__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-s); margin: var(--space-m) 0 var(--space-s); }
.ck-results__title { margin: 0; font-size: var(--h3); }
.ck-results__count { color: var(--ck-muted); white-space: nowrap; }
.ck-pagination { display: flex; justify-content: center; gap: .4rem; margin-top: var(--space-l); }
.ck-pagination .page-numbers { display: grid; place-items: center; min-width: var(--ck-touch); height: var(--ck-touch); border-radius: var(--radius); background: var(--white); border: var(--ck-border); text-decoration: none; color: var(--primary); font-weight: 600; }
.ck-pagination .current { background: var(--primary); color: var(--white); border-color: var(--primary); }

/* Dashboard */
.ck-dash__head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-s); flex-wrap: wrap; margin-bottom: var(--space-m); }
.ck-dash__title { margin: 0; font-size: var(--h2); }
.ck-dash__quota { margin: .3em 0 0; color: var(--ck-muted); }
.ck-dash__list { display: flex; flex-direction: column; gap: var(--space-xs); }
.ck-dash__row { position: relative; display: grid; grid-template-columns: 8rem 1fr auto; grid-template-areas: "thumb main menu" "thumb meta meta"; gap: .4rem var(--space-s); padding: var(--space-xs); background: var(--white); border: var(--ck-border); border-radius: var(--radius); align-items: center; }
.ck-dash__row--head { display: none; }
.ck-dash__thumb { grid-area: thumb; align-self: start; display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--radius-s, var(--radius)); overflow: hidden; background: var(--ck-ivory); color: var(--ck-muted); }
.ck-dash__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ck-dash__main { grid-area: main; display: flex; flex-direction: column; min-width: 0; }
.ck-dash__name { font-weight: 600; color: var(--base); text-decoration: none; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ck-dash__price { color: var(--primary); font-family: var(--ck-heading); font-weight: 600; font-size: var(--text-s); }
.ck-dash__reason { color: var(--danger, var(--tertiary)); font-size: var(--text-s); }
.ck-dash__code, .ck-dash__status, .ck-dash__exp, .ck-dash__views { font-size: var(--text-s); color: var(--ck-muted); display: inline-flex; align-items: center; gap: .3em; }
.ck-dash__code { font-family: var(--ck-heading); font-weight: 600; color: var(--primary); }
.ck-dash__row > .ck-dash__code, .ck-dash__row > .ck-dash__status, .ck-dash__row > .ck-dash__exp, .ck-dash__row > .ck-dash__views { grid-area: auto; }
.ck-dash__row { grid-template-areas: "thumb main menu" "thumb code code" "thumb status status" ; }
.ck-dash__row .ck-dash__code { grid-area: code; }
.ck-dash__row .ck-dash__status { grid-area: status; flex-wrap: wrap; }
.ck-dash__row .ck-dash__exp, .ck-dash__row .ck-dash__views { display: none; }
.ck-dash__exp em { color: var(--warning-dark, var(--tertiary)); font-style: normal; }
.ck-dash__menu { grid-area: menu; align-self: start; }
@media (min-width: 1024px) {
	.ck-dash__row, .ck-dash__row--head { display: grid; grid-template-columns: 6.4rem minmax(0, 1fr) 9rem 10rem 11rem 7rem var(--ck-touch); grid-template-areas: none; }
	.ck-dash__row > * { grid-area: auto !important; }
	.ck-dash__row .ck-dash__exp, .ck-dash__row .ck-dash__views { display: inline-flex; }
	.ck-dash__row--head { background: transparent; border: 0; padding-block: 0; font-size: var(--text-s); color: var(--ck-muted); font-weight: 600; }
}

/* Owner action menu */
.ck-menu { position: relative; }
.ck-menu__list { position: absolute; right: 0; top: 100%; z-index: 20; min-width: 20rem; display: flex; flex-direction: column; padding: .4rem; background: var(--white); border: var(--ck-border); border-radius: var(--radius); box-shadow: var(--ck-shadow); }
.ck-menu__form { margin: 0; }
.ck-menu__item { display: flex; align-items: center; gap: .5em; width: 100%; min-height: var(--ck-touch); padding: 0 var(--space-s); background: none; border: 0; border-radius: calc(var(--radius) - .2rem); text-align: left; font: inherit; color: var(--base); text-decoration: none; cursor: pointer; }
.ck-menu__item:hover { background: var(--ck-ivory); }
.ck-menu__item--accent { color: var(--primary); font-weight: 600; }
.ck-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.ck-actions .ck-menu__item { width: auto; border: var(--ck-border); background: var(--white); }
.ck-actions .ck-menu__form { display: contents; }

/* Modal */
.ck-modal { width: min(56rem, calc(100vw - 3.2rem)); max-height: calc(100vh - 3.2rem); padding: 0; border: 0; border-radius: var(--radius); box-shadow: var(--box-shadow-xl, var(--ck-shadow)); color: var(--base); }
.ck-modal::backdrop { background: var(--black-trans-50); }
.ck-modal__head, .ck-modal__foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-s); padding: var(--space-s) var(--space-m); }
.ck-modal__head { border-bottom: var(--ck-border); }
.ck-modal__head h2 { margin: 0; font-size: var(--h4); }
.ck-modal__body { padding: var(--space-m); display: flex; flex-direction: column; gap: var(--space-m); overflow: auto; }
.ck-modal__foot { border-top: var(--ck-border); flex-direction: column; align-items: stretch; background: var(--ck-ivory); }
.ck-rules { margin: 0; font-size: var(--text-s); color: var(--base); }
.ck-copyblock { display: flex; flex-direction: column; gap: var(--space-xs); }
.ck-copyblock__label { display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
.ck-copyblock pre { margin: 0; padding: var(--space-s); white-space: pre-wrap; word-break: break-word; font: inherit; font-size: var(--text-s); background: var(--ck-ivory); border: var(--ck-border); border-radius: var(--radius); }
.ck-copyimgs { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4rem; }
.ck-copyimgs img { aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-s, var(--radius)); width: 100%; }

/* Listing page */
.ck-breadcrumb { display: flex; flex-wrap: wrap; gap: .4em; font-size: var(--text-s); color: var(--ck-muted); margin-bottom: var(--space-xs); }
.ck-breadcrumb a { color: var(--ck-muted); }
.ck-gallery { position: relative; border-radius: var(--radius); overflow: hidden; background: var(--base); margin-inline: calc(var(--gutter, 1.6rem) * -1); }
@media (min-width: 768px) { .ck-gallery { margin-inline: 0; } }
.ck-gallery__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.ck-gallery__track::-webkit-scrollbar { display: none; }
.ck-gallery__slide { flex: 0 0 100%; margin: 0; scroll-snap-align: center; aspect-ratio: 4 / 3; }
.ck-gallery__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ck-gallery__count { position: absolute; right: var(--space-xs); bottom: var(--space-xs); padding: .2em .7em; border-radius: 99em; background: var(--black-trans-60); color: var(--white); font-size: var(--text-s); }
.ck-gallery__badges { position: absolute; left: var(--space-xs); top: var(--space-xs); display: flex; gap: .4rem; }
.ck-gallery__nav { position: absolute; top: 50%; translate: 0 -50%; width: var(--ck-touch); height: var(--ck-touch); border-radius: 50%; border: 0; background: var(--white-trans-80, var(--white)); color: var(--base); font-size: var(--h4); cursor: pointer; display: none; }
.ck-gallery__nav--prev { left: var(--space-xs); }
.ck-gallery__nav--next { right: var(--space-xs); }
@media (hover: hover) { .ck-gallery__nav { display: grid; place-items: center; } }
.ck-lightbox { position: fixed; inset: 0; z-index: 2000; background: var(--black); display: flex; flex-direction: column; }
.ck-lightbox .ck-gallery__track { flex: 1; height: 100%; }
.ck-lightbox .ck-gallery__slide { aspect-ratio: auto; height: 100%; display: grid; place-items: center; }
.ck-lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ck-lightbox__close { position: absolute; top: var(--space-xs); right: var(--space-xs); z-index: 2; color: var(--white); }
.ck-lhead { display: flex; flex-direction: column; gap: .4rem; margin-top: var(--space-s); }
.ck-lhead__badges { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }
.ck-lhead__zone { display: inline-flex; gap: .3em; align-items: center; color: var(--ck-muted); font-size: var(--text-s); }
.ck-lhead__price { margin: 0; font-family: var(--ck-heading); font-weight: 700; font-size: var(--h2); color: var(--primary); line-height: 1.15; }
.ck-lhead__price small { font-size: var(--text-m); color: var(--ck-muted); font-weight: 600; }
.ck-lhead__price + .ck-lhead__price { font-size: var(--h4); }
.ck-lhead__title { margin: 0; font-size: var(--h4); font-family: inherit; font-weight: 600; color: var(--base); }
.ck-lhead__updated { margin: 0; font-size: var(--text-s); color: var(--ck-muted); }
.ck-code { align-self: flex-start; display: inline-flex; align-items: center; gap: .4em; min-height: var(--ck-touch); padding: 0 var(--space-s); border: 1px dashed var(--primary); border-radius: var(--radius); background: var(--primary-ultra-light); color: var(--primary); font: inherit; cursor: pointer; }
.ck-code.is-copied::after { content: "คัดลอกแล้ว"; font-size: var(--text-s); color: var(--ck-rent); }
.ck-specbox { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-xs); margin: var(--space-m) 0; }
.ck-specbox__item { display: flex; flex-direction: column; align-items: center; gap: .2rem; padding: var(--space-xs) .4rem; background: var(--white); border: var(--ck-border); border-radius: var(--radius); text-align: center; }
.ck-specbox__item .ck-icon { color: var(--primary); }
.ck-specbox__item strong { font-family: var(--ck-heading); font-size: var(--text-m); }
.ck-specbox__item span { font-size: var(--text-xs, var(--text-s)); color: var(--ck-muted); }
.ck-sec { padding: var(--space-m) 0; border-top: var(--ck-border); }
.ck-sec__title { margin: 0 0 var(--space-s); font-size: var(--h4); }
.ck-dl { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-xs) var(--space-m); margin: 0; }
.ck-dl dt { font-size: var(--text-s); color: var(--ck-muted); }
.ck-dl dd { margin: 0; font-weight: 600; }
.ck-clamp__text { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.ck-clamp.is-open .ck-clamp__text { display: block; }
.ck-clamp__text p { margin: 0 0 .6em; }
.ck-iconlist { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xs); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .ck-iconlist { grid-template-columns: repeat(3, 1fr); } }
.ck-iconlist li { display: flex; align-items: center; gap: .5em; }
.ck-iconlist .ck-icon { color: var(--ck-rent); }
.ck-iconlist--sm { font-size: var(--text-s); margin: var(--space-s) 0; }
.ck-embed { position: relative; aspect-ratio: 16 / 9; margin-bottom: var(--space-s); border-radius: var(--radius); overflow: hidden; background: var(--primary) center / cover no-repeat; }
.ck-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ck-embed__play { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-xs); width: 100%; border: 0; background: var(--black-trans-40); color: var(--white); font: inherit; font-weight: 600; cursor: pointer; }
.ck-embed__play .ck-icon { width: 4.8rem; height: 4.8rem; }
.ck-projbox__card { position: relative; display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; text-decoration: none; }
.ck-projbox__card img, .ck-projbox__card .ck-pcard__img { width: 100%; height: 100%; object-fit: cover; }
.ck-projbox__name { position: absolute; inset: auto 0 0 0; padding: var(--space-s); background: linear-gradient(transparent, var(--black-trans-70)); color: var(--white); font-family: var(--ck-heading); font-weight: 600; font-size: var(--text-l); display: flex; flex-direction: column; }
.ck-projbox__name small { font-family: inherit; font-weight: 400; font-size: var(--text-s); opacity: .85; }
.ck-nearby { margin: var(--space-s) 0 0; padding: 0; list-style: none; }
.ck-nearby li { display: flex; justify-content: space-between; padding: .6rem 0; border-bottom: var(--ck-border); }
.ck-lister { display: flex; gap: var(--space-s); align-items: center; }
.ck-lister__avatar img { border-radius: 50%; display: block; }
.ck-lister strong, .ck-lister span { display: block; }
.ck-safety { padding: var(--space-s); border-radius: var(--radius); background: var(--warning-ultra-light, var(--ck-ivory)); border: 1px solid var(--warning-light, var(--ck-gold)); font-size: var(--text-s); }
.ck-safety__title { display: flex; align-items: center; gap: .4em; margin: 0 0 .4em; font-weight: 700; color: var(--base); }
.ck-safety ul { margin: 0 0 .6em; padding-left: 1.2em; }
.ck-safety__small { margin: 0; color: var(--ck-muted); }
.ck-report { margin: var(--space-m) 0; font-size: var(--text-s); }
.ck-report summary { cursor: pointer; color: var(--ck-muted); min-height: var(--ck-touch); display: flex; align-items: center; }
.ck-report form { display: flex; flex-direction: column; gap: var(--space-xs); max-width: 44rem; }

/* Contact: sticky bottom bar on mobile, sticky card in the right column on desktop */
.ck-contact { position: fixed; inset: auto 0 0 0; z-index: 900; padding: var(--space-xs) var(--space-s) calc(var(--space-xs) + env(safe-area-inset-bottom)); background: var(--white); border-top: var(--ck-border); box-shadow: var(--ck-shadow); }
.ck-contact__price, .ck-contact__who { display: none; }
.ck-contact__btns { display: flex; gap: var(--space-xs); }
.ck-contact__btns .ck-btn { flex: 1; }
body:has(.ck-contact) { padding-bottom: calc(var(--ck-touch) + var(--space-m)); }
@media (min-width: 1024px) {
	body:has(.ck-contact) { padding-bottom: 0; }
	.ck-contact { position: sticky; top: var(--space-l); inset: auto; padding: 0; border: 0; box-shadow: none; background: transparent; }
	.ck-contact__card { padding: var(--space-m); background: var(--white); border: var(--ck-border); border-radius: var(--radius); box-shadow: var(--ck-shadow); }
	.ck-contact__price { display: block; margin: 0; font-family: var(--ck-heading); font-weight: 700; font-size: var(--h3); color: var(--primary); }
	.ck-contact__who { display: block; margin: .2em 0 var(--space-s); color: var(--ck-muted); }
	.ck-contact__btns { flex-direction: column; }
}
.ck-ownerbar { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-s); margin-bottom: var(--space-s); background: var(--primary-ultra-light); border: 1px solid var(--primary-light); border-radius: var(--radius); }
.ck-ownerbar__info { display: flex; flex-wrap: wrap; gap: var(--space-s); align-items: center; font-size: var(--text-s); }
.ck-ownerbar__info span { display: inline-flex; align-items: center; gap: .3em; }

/* Project page */
.ck-phero { position: relative; min-height: 38vh; display: flex; align-items: flex-end; color: var(--white); border-radius: var(--radius); overflow: hidden; background: var(--primary); }
.ck-phero > img, .ck-phero > .ck-pcard__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ck-phero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 30%, var(--primary-trans-80)); }
.ck-phero__text { position: relative; z-index: 1; padding: var(--space-m); display: flex; flex-direction: column; gap: .4rem; align-items: flex-start; }
.ck-phero__text h1 { margin: 0; color: var(--white); font-size: var(--h1); }
.ck-phero__en { margin: 0; opacity: .9; }
.ck-phero__zone { display: inline-flex; gap: .3em; align-items: center; color: var(--white); text-decoration: none; }
.ck-ptabs { display: flex; flex-direction: column; gap: var(--space-m); }
.ck-pgallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-xs); margin-bottom: var(--space-s); }
@media (min-width: 768px) { .ck-pgallery { grid-template-columns: repeat(4, 1fr); } }
.ck-pgallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-s, var(--radius)); display: block; }

/* Closed listing */
.ck-gone { padding: var(--space-xl) var(--gutter, 1.6rem); max-width: 128rem; margin-inline: auto; }
.ck-gone__box { text-align: center; padding: var(--space-l); background: var(--white); border-radius: var(--radius); border: var(--ck-border); margin-bottom: var(--space-l); }

/* Map */
.ck-map { position: relative; --ck-map-h: 36rem; }
.ck-map__canvas { height: var(--ck-map-h); border-radius: var(--radius); overflow: hidden; background: var(--ck-ivory); z-index: 0; }
.ck-map--single .ck-map__canvas { --ck-map-h: 24rem; margin-bottom: var(--space-xs); }
.ck-map--mini .ck-map__cover { position: absolute; inset: 0; display: grid; place-items: center; z-index: 500; background: var(--white-trans-10, transparent); }
.ck-map--full { display: flex; flex-direction: column; height: calc(100dvh - var(--ck-header-h, 6.4rem)); }
.ck-map--full .ck-map__canvas { flex: 1; height: auto; border-radius: 0; }
.ck-map__bar { padding: var(--space-xs); display: flex; flex-direction: column; gap: var(--space-xs); background: var(--white); border-bottom: var(--ck-border); z-index: 600; }
.ck-map__bar .ck-search { box-shadow: none; padding: 0; }
.ck-map__tools { display: flex; gap: var(--space-xs); }
.ck-map__tools .ck-btn { flex: 1; font-size: var(--text-s); }
.ck-map__panel { position: absolute; z-index: 700; inset: auto 0 0 0; height: 50%; background: var(--white); border-radius: var(--radius-l, var(--radius)) var(--radius-l, var(--radius)) 0 0; box-shadow: var(--box-shadow-xl, var(--ck-shadow)); display: flex; flex-direction: column; transition: height .25s; }
.ck-map__panel.is-full { height: calc(100% - var(--space-xl)); }
.ck-map__grip { flex: none; height: 2.4rem; display: grid; place-items: center; cursor: grab; }
.ck-map__grip::before { content: ""; width: 4rem; height: .5rem; border-radius: 99em; background: var(--shade); }
.ck-map__panel-body { overflow: auto; padding: 0 var(--space-s) var(--space-s); display: flex; flex-direction: column; gap: var(--space-s); }
.ck-map__panel-head img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; border-radius: var(--radius); }
.ck-map__panel-head h3 { margin: var(--space-xs) 0 0; }
.ck-map__panel-foot { display: flex; gap: var(--space-xs); }
.ck-map__panel-foot .ck-btn { flex: 1; }
@media (min-width: 1024px) {
	.ck-map__bar { flex-direction: row; align-items: center; }
	.ck-map__bar .ck-search { flex: 1; }
	.ck-map__tools .ck-btn { flex: none; }
	.ck-map__panel { inset: 0 0 0 auto; width: 40rem; height: auto !important; border-radius: 0; }
	.ck-map__grip { display: none; }
}
.ck-pin { display: inline-flex; align-items: center; justify-content: center; min-width: 4.4rem; padding: .3rem .9rem; border-radius: 99em; background: var(--primary); color: var(--white); font: 600 1.3rem/1.2 var(--ck-heading); white-space: nowrap; box-shadow: var(--box-shadow-m); border: 2px solid var(--white); transform: translate(-50%, -50%); transition: transform .15s, background-color .15s; }
.ck-pin--featured { background: var(--ck-gold); color: var(--primary); }
.ck-pin.is-active { background: var(--ck-rent); color: var(--white); transform: translate(-50%, -50%) scale(1.15); }
.ck-pin-icon, .ck-landmark-icon { background: none; border: 0; }
.ck-landmark { display: inline-block; padding: .1rem .6rem; border-radius: var(--radius-s, var(--radius)); background: var(--white-trans-80, var(--white)); color: var(--ck-muted); font-size: 1.2rem; white-space: nowrap; transform: translate(-50%, -50%); pointer-events: none; }
.ck-cluster { display: grid; place-items: center; width: 4.4rem; height: 4.4rem; border-radius: 50%; background: var(--primary); color: var(--white); font: 700 1.4rem var(--ck-heading); border: 3px solid var(--white); box-shadow: var(--box-shadow-m); }

/* WS Form listing form — reads ACSS tokens */
.ck-listing-form, .wsf-form.ck-listing-form { --wsf-color-primary: var(--primary); }
.ck-listing-form .wsf-tabs { display: flex; gap: .4rem; counter-reset: ck-step; overflow-x: auto; border: 0 !important; margin-bottom: var(--space-m) !important; }
.ck-listing-form .wsf-tabs > li { flex: 1; min-width: 7rem; }
.ck-listing-form .wsf-tabs > li > a { display: flex !important; flex-direction: column; align-items: center; gap: .3rem; padding: .6rem .2rem !important; border: 0 !important; border-top: .4rem solid var(--shade) !important; background: none !important; font-size: var(--text-xs, var(--text-s)); color: var(--ck-muted) !important; text-align: center; }
.ck-listing-form .wsf-tabs > li.wsf-tab-active > a, .ck-listing-form .wsf-tabs > li > a.wsf-tab-active { border-top-color: var(--primary) !important; color: var(--primary) !important; font-weight: 600; }
.ck-listing-form input[type=text], .ck-listing-form input[type=number], .ck-listing-form input[type=url], .ck-listing-form input[type=date], .ck-listing-form select, .ck-listing-form textarea { min-height: var(--ck-touch); border-radius: var(--radius) !important; border-color: var(--shade) !important; font-size: max(1.6rem, var(--text-m)) !important; }
.ck-listing-form button.wsf-button-primary, .ck-listing-form .wsf-button-primary { min-height: var(--ck-touch); background: var(--primary) !important; border-color: var(--primary) !important; border-radius: var(--radius) !important; font-family: var(--ck-heading); font-weight: 600; }
.ck-listing-form button[type=submit] { background: var(--ck-gold) !important; border-color: var(--ck-gold) !important; color: var(--primary) !important; }
.ck-listing-form .wsf-button { min-height: var(--ck-touch); border-radius: var(--radius) !important; }
.ck-listing-form .ck-deal-radio + label, .ck-listing-form .ck-deal-radio label { font-weight: 600; }
@media (max-width: 767px) {
	.ck-listing-form .wsf-field-wrapper[data-type="tab_next"], .ck-listing-form .wsf-field-wrapper[data-type="submit"] { position: sticky; bottom: 0; z-index: 5; padding: var(--space-xs) 0 calc(var(--space-xs) + env(safe-area-inset-bottom)); background: var(--white); }
	.ck-listing-form .wsf-field-wrapper[data-type="tab_next"] button, .ck-listing-form .wsf-field-wrapper[data-type="submit"] button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .ck-card, .ck-pin, .ck-map__panel { transition: none; } .ck-card--skeleton * { animation: none; } }

/* Header account menu */
.ck-usermenu__login { display: inline-flex; align-items: center; min-height: var(--ck-touch); padding: 0 var(--space-xs); color: var(--primary); font-weight: 600; text-decoration: none; white-space: nowrap; }
.ck-usermenu__btn { display: inline-flex; align-items: center; gap: .5em; min-height: var(--ck-touch); padding: 0 var(--space-xs); border-radius: var(--radius); cursor: pointer; list-style: none; font-weight: 600; color: var(--primary); }
.ck-usermenu__btn::-webkit-details-marker { display: none; }
.ck-usermenu__btn img { border-radius: 50%; width: 3.2rem; height: 3.2rem; }
.ck-usermenu__login { gap: .4em; }
@media (max-width: 767px) { .ck-usermenu__btn span, .ck-usermenu__login span { display: none; } .ck-usermenu__login { width: var(--ck-touch); justify-content: center; } }
/* ACSS auto-radius rounds every <img>; map tiles and markers must stay square. */
.ck-map img, .leaflet-container img { border-radius: 0 !important; }
.ck-sec__title { text-align: start; }
/* The hidden attribute must win over component display rules. */
[class*="ck-"][hidden], [data-ck-panel][hidden], .ck-map__panel[hidden] { display: none !important; }

/* Narrow phones: deal switch on its own full-width row so the search field keeps its placeholder. */
@media (max-width: 479px) { .ck-search__top { grid-template-columns: 1fr; } .ck-search .ck-seg { display: flex; } .ck-search .ck-seg__opt { flex: 1; } }

/* Views + 7-day sparkline (owner dashboard, owner bar) */
.ck-views { display: inline-flex; align-items: center; gap: .4em; color: var(--ck-muted); font-size: var(--text-s); white-space: nowrap; }
.ck-views strong { color: var(--base); }
.ck-views small { font-size: var(--text-xs, var(--text-s)); }
.ck-spark { flex: none; overflow: visible; }
.ck-spark__line { fill: none; stroke: var(--primary); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.ck-spark__area { fill: var(--primary-ultra-light); stroke: none; }
.ck-spark__dot { fill: var(--accent); }
@media (max-width: 1023px) {
	.ck-dash__row { grid-template-areas: "thumb main menu" "thumb code code" "thumb status status" "thumb views views"; }
	.ck-dash__row .ck-dash__views { display: inline-flex; grid-area: views; }
}
@media (min-width: 1024px) {
	.ck-dash__row, .ck-dash__row--head { grid-template-columns: 6.4rem minmax(0, 1fr) 9rem 10rem 11rem 19rem var(--ck-touch); }
}
/* News */
.ck-ncard { position: relative; display: flex; flex-direction: column; background: var(--ck-surface); border: var(--ck-border); border-radius: var(--radius); overflow: hidden; transition: box-shadow .2s; }
.ck-ncard:hover { box-shadow: var(--ck-shadow); }
.ck-ncard__media { aspect-ratio: 16 / 9; background: var(--ck-ivory); }
.ck-ncard__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ck-ncard__body { display: flex; flex-direction: column; gap: .4rem; padding: var(--space-s); flex: 1; }
.ck-ncard__cat { align-self: flex-start; font-size: var(--text-xs, var(--text-s)); font-weight: 600; color: var(--ck-rent); }
.ck-ncard__title { margin: 0; font-size: var(--text-l); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ck-ncard__excerpt { margin: 0; color: var(--ck-muted); font-size: var(--text-s); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ck-ncard__meta { margin-top: auto; font-size: var(--text-xs, var(--text-s)); color: var(--ck-muted); }
.ck-chips { display: flex; gap: var(--space-xs); overflow-x: auto; scrollbar-width: none; margin-bottom: var(--space-m); }
.ck-chips__item { display: inline-flex; align-items: center; min-height: var(--ck-touch); padding: 0 var(--space-s); border-radius: 99em; border: var(--ck-border); background: var(--white); color: var(--base); text-decoration: none; white-space: nowrap; font-weight: 600; }
.ck-chips__item.is-active { background: var(--primary); border-color: var(--primary); color: var(--white); }
.ck-nhead { display: flex; flex-direction: column; gap: var(--space-xs); margin-bottom: var(--space-m); }
.ck-nhead__title { margin: 0; font-size: var(--h2); line-height: 1.25; }
.ck-nhead__meta { margin: 0; color: var(--ck-muted); font-size: var(--text-s); }
.ck-nhead__cover { margin: var(--space-s) 0 0; }
.ck-nhead__cover img { width: 100%; height: auto; border-radius: var(--radius); display: block; }
.ck-nhead__cover figcaption { margin-top: .4rem; font-size: var(--text-s); color: var(--ck-muted); }
.ck-toc { margin: 0 0 var(--space-m); padding: var(--space-s) var(--space-m); background: var(--white); border: var(--ck-border); border-radius: var(--radius); }
.ck-toc summary { cursor: pointer; font-weight: 700; min-height: var(--ck-touch); display: flex; align-items: center; }
.ck-toc ol { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: .4rem; }
.ck-sec__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-s); }
.ck-sec__row .ck-sec__title { margin-bottom: var(--space-s); }
.ck-article { font-size: max(1.7rem, var(--text-m)); line-height: 1.8; }
.ck-article h2 { font-size: var(--h3); margin: var(--space-l) 0 var(--space-xs); scroll-margin-top: 8rem; }
.ck-article h3 { font-size: var(--h4); margin: var(--space-m) 0 var(--space-xs); }
.ck-article img { max-width: 100%; height: auto; border-radius: var(--radius); }
.ck-article blockquote { margin: var(--space-s) 0; padding: var(--space-s) var(--space-m); background: var(--white); border-left: .4rem solid var(--accent); border-radius: var(--radius); }