/* Treasure Sync: structure only. Each theme sets the --ts-* colours and adds its own personality. */
:root {
	--ts-gap: clamp(12px, 2vw, 22px);
	--ts-radius: 10px;
	--ts-surface: #fff;
	--ts-surface-2: #f4f4f2;
	--ts-text: #1b1b1b;
	--ts-muted: #6b6b6b;
	--ts-border: rgba(0,0,0,.12);
	--ts-accent: #b8860b;
	--ts-accent-ink: #fff;
	--ts-sold: #c0262d;
	--ts-pending: #d98a00;
	--ts-new: #1f7a4d;
	--ts-display: inherit;
	--ts-sidebar: 270px;
}

.ts-shop__wrap, .ts-item__wrap { width: min(1320px, 100% - 2 * var(--ts-gap)); margin-inline: auto; }
.ts-shop__wrap { display: grid; grid-template-columns: var(--ts-sidebar) minmax(0, 1fr); gap: calc(var(--ts-gap) * 1.6); padding-block: calc(var(--ts-gap) * 1.5) calc(var(--ts-gap) * 3); align-items: start; }
.ts-sidebar, .ts-results, .ts-item__info, .ts-gallery { min-width: 0; } /* long chip rows must scroll, not stretch the page */

/* Sidebar (Marketplace-style) */
.ts-sidebar { position: sticky; top: calc(var(--ts-sticky-top, 90px)); max-height: calc(100vh - var(--ts-sticky-top, 90px) - 16px); overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 4px; }
.ts-sidebar__title { font-size: 1rem; margin: 18px 0 8px; letter-spacing: .02em; }
.ts-search { position: relative; }
.ts-search__icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); opacity: .6; pointer-events: none; }
.ts-search input { width: 100%; padding: 11px 14px 11px 40px; border-radius: 999px; border: 1px solid var(--ts-border); background: var(--ts-surface-2); color: var(--ts-text); font: inherit; }
.ts-cats__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ts-cat { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 7px 10px 7px 6px; border-radius: 8px; color: var(--ts-text); text-decoration: none; line-height: 1.2; }
.ts-cat__icon { width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: var(--ts-surface-2); }
.ts-cat__count { font-size: .8rem; color: var(--ts-muted); font-variant-numeric: tabular-nums; }
.ts-cat:hover, .ts-cat:focus-visible { background: var(--ts-surface-2); }
.ts-cat.is-active { background: var(--ts-surface-2); font-weight: 700; }
.ts-cat.is-active .ts-cat__icon { background: var(--ts-accent); color: var(--ts-accent-ink); }

.ts-filter-box { margin-top: 16px; border-top: 1px solid var(--ts-border); padding-top: 12px; }
.ts-filter-box summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.ts-filter-box summary::after { content: "+"; font-size: 1.3em; line-height: 1; }
.ts-filter-box[open] summary::after { content: "–"; }
.ts-filter-box summary::-webkit-details-marker { display: none; }
.ts-filters { display: grid; gap: 12px; margin-top: 12px; }
.ts-filters fieldset { border: 0; padding: 0; margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ts-filters legend { font-size: .85rem; color: var(--ts-muted); margin-bottom: 6px; padding: 0; width: 100%; }
.ts-filters input[type=number], .ts-filters select { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--ts-border); background: var(--ts-surface); color: var(--ts-text); font: inherit; }
.ts-filters__price label { flex: 1; min-width: 0; }
.ts-filters__check { display: flex; align-items: center; gap: 8px; }
.ts-filters__sort { display: grid; gap: 6px; font-size: .85rem; color: var(--ts-muted); }
.ts-filters__actions { display: flex; align-items: center; gap: 14px; }
.ts-filters__reset { color: var(--ts-muted); }

/* Results */
.ts-results__head { margin-bottom: calc(var(--ts-gap) * 1.2); }
.ts-results__title { font-family: var(--ts-display); margin: .2em 0 .25em; line-height: 1.05; }
.ts-results__intro { max-width: 70ch; color: var(--ts-muted); }
.ts-results__intro p { margin: 0 0 .6em; }
.ts-results__count { font-size: .9rem; color: var(--ts-muted); margin: .4em 0 0; }
.ts-notice { padding: 10px 14px; border-radius: 8px; background: var(--ts-surface-2); border-left: 4px solid var(--ts-accent); }

.ts-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: .82rem; color: var(--ts-muted); }
.ts-crumbs li + li::before { content: "›"; margin-right: 6px; opacity: .6; }
.ts-crumbs a { color: inherit; }

/* Grid + cards */
.ts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: var(--ts-gap); }
.ts-grid--four { grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.ts-card { position: relative; min-width: 0; }
.ts-card__link { display: block; color: inherit; text-decoration: none; height: 100%; }
.ts-card__media { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--ts-radius); background: var(--ts-surface-2); }
.ts-card__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2,.7,.2,1), filter .4s; }
.ts-card__link:hover .ts-card__img, .ts-card__link:focus-visible .ts-card__img { transform: scale(1.05); }
.ts-card--sold .ts-card__img { filter: grayscale(.65) brightness(.85); }
.ts-card__body { padding: 9px 2px 4px; }
.ts-card__price { font-weight: 800; font-size: 1.08rem; }
.ts-card__title { font-size: .98rem; font-weight: 500; margin: 2px 0 0; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ts-card__meta { margin: 3px 0 0; font-size: .8rem; color: var(--ts-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ts-price--sold { text-decoration: line-through; text-decoration-thickness: 2px; opacity: .65; }

.ts-noimg { display: grid; place-items: center; width: 100%; height: 100%; color: var(--ts-muted); }
.ts-noimg__icon { width: 34%; height: 34%; opacity: .5; }
.ts-noimg--large { aspect-ratio: 1; gap: 10px; align-content: center; }

/* Badges: themes restyle these (stamps, ribbons, tape…) */
.ts-badge { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 4px 10px; border-radius: 6px; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--ts-new); pointer-events: none; }
.ts-badge--sold { background: var(--ts-sold); }
.ts-badge--pending { background: var(--ts-pending); }

/* Buttons */
.ts-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 999px; border: 2px solid var(--ts-accent); background: var(--ts-accent); color: var(--ts-accent-ink); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; line-height: 1.1; transition: transform .15s, box-shadow .2s, background .2s, color .2s; }
.ts-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,0,0,.18); }
.ts-btn--ghost { background: transparent; color: var(--ts-text); border-color: var(--ts-border); }
.ts-btn--small { padding: 8px 16px; font-size: .9rem; }
.ts-btn--fb { background: #1877f2; border-color: #1877f2; color: #fff; }
.ts-linkbtn { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; }

/* Single item */
.ts-item__wrap { padding-block: calc(var(--ts-gap) * 1.2) calc(var(--ts-gap) * 3); }
.ts-item__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: calc(var(--ts-gap) * 2); margin-top: 14px; align-items: start; }
.ts-gallery { position: sticky; top: var(--ts-sticky-top, 90px); }
.ts-gallery__main { position: relative; margin: 0; border-radius: var(--ts-radius); overflow: hidden; background: var(--ts-surface-2); }
.ts-gallery__zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.ts-gallery__img { display: block; width: 100%; max-height: 78vh; object-fit: contain; aspect-ratio: auto; }
.ts-item--sold .ts-gallery__img { filter: grayscale(.4); }
.ts-gallery__main .ts-badge { top: 16px; left: 16px; font-size: .95rem; }
.ts-gallery__thumbs { list-style: none; display: flex; gap: 8px; margin: 10px 0 0; padding: 0 0 6px; overflow-x: auto; scrollbar-width: thin; }
.ts-gallery__thumb { width: 74px; height: 74px; padding: 0; border: 2px solid transparent; border-radius: 8px; overflow: hidden; background: none; cursor: pointer; opacity: .7; flex: none; }
.ts-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ts-gallery__thumb.is-active, .ts-gallery__thumb:hover { opacity: 1; border-color: var(--ts-accent); }

.ts-item__status { display: inline-block; margin: 0; padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; background: var(--ts-new); color: #fff; }
.ts-item__status--sold { background: var(--ts-sold); }
.ts-item__status--pending { background: var(--ts-pending); }
.ts-item__title { font-family: var(--ts-display); line-height: 1.08; margin: .3em 0 .15em; overflow-wrap: anywhere; }
.ts-item__price { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; margin: 0 0 .4em; }
.ts-item__note { padding: 10px 14px; border-radius: 8px; background: var(--ts-surface-2); font-size: .95rem; }
.ts-item__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.ts-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: 18px 0; border: 1px solid var(--ts-border); border-radius: var(--ts-radius); overflow: hidden; background: var(--ts-border); }
.ts-facts div { background: var(--ts-surface); padding: 10px 14px; }
.ts-facts dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ts-muted); }
.ts-facts dd { margin: 2px 0 0; font-weight: 600; }
.ts-item__desc h2 { font-size: 1.1rem; margin: 1.2em 0 .4em; }
.ts-item__desc { overflow-wrap: anywhere; }
.ts-share { display: flex; gap: 14px; align-items: center; font-size: .9rem; color: var(--ts-muted); margin-top: 18px; }
.ts-share a { color: inherit; }
.ts-item__ask { max-width: 760px; margin: calc(var(--ts-gap) * 2.5) auto 0; }
.ts-related { margin-top: calc(var(--ts-gap) * 3); }
.ts-related__title { font-family: var(--ts-display); }

/* Lightbox */
.ts-lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(8,8,8,.95); color: #fff; }
.ts-lightbox[open] { display: grid; place-items: center; }
.ts-lightbox::backdrop { background: rgba(0,0,0,.9); }
.ts-lightbox__img { max-width: 94vw; max-height: 88vh; object-fit: contain; }
.ts-lightbox__close, .ts-lightbox__nav { position: absolute; background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: 50%; width: 52px; height: 52px; font-size: 32px; line-height: 1; cursor: pointer; }
.ts-lightbox__close { top: 16px; right: 16px; }
.ts-lightbox__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.ts-lightbox__next { right: 16px; top: 50%; transform: translateY(-50%); }
.ts-lightbox__count { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; margin: 0; opacity: .75; }

/* Forms */
.ts-form-wrap { padding: clamp(18px, 3vw, 32px); border-radius: var(--ts-radius); background: var(--ts-surface); border: 1px solid var(--ts-border); }
.ts-form__heading { margin-top: 0; font-family: var(--ts-display); }
.ts-form { display: grid; gap: 4px; }
.ts-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ts-field { margin: 0 0 10px; display: grid; gap: 5px; }
.ts-field label { font-weight: 600; font-size: .92rem; }
.ts-field label span { font-weight: 400; color: var(--ts-muted); }
.ts-field input, .ts-field select, .ts-field textarea { width: 100%; padding: 11px 13px; border-radius: 8px; border: 1px solid var(--ts-border); background: var(--ts-surface); color: var(--ts-text); font: inherit; }
.ts-field input:focus, .ts-field select:focus, .ts-field textarea:focus { outline: 2px solid var(--ts-accent); outline-offset: 1px; }
.ts-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 6px 0 0; }
.ts-form__privacy { font-size: .82rem; color: var(--ts-muted); }
.ts-form__privacy a { color: inherit; }
.ts-form__ok { padding: 16px 18px; border-radius: 8px; background: rgba(31,122,77,.12); border-left: 4px solid var(--ts-new); }
.ts-form__ok strong { display: block; margin-bottom: 4px; }
.ts-form__errors { padding: 12px 16px; border-radius: 8px; background: rgba(192,38,45,.1); border-left: 4px solid var(--ts-sold); margin-bottom: 14px; }
.ts-form__errors ul { margin: 0; padding-left: 18px; }
.ts-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* Empty */
.ts-empty { text-align: center; padding: clamp(30px, 6vw, 70px) 20px; border: 2px dashed var(--ts-border); border-radius: var(--ts-radius); }
.ts-empty--compact { padding: 30px 20px; }
.ts-empty__icon { width: 56px; height: 56px; opacity: .5; }
.ts-empty__title { font-family: var(--ts-display); margin: .4em 0 .2em; }

/* Category tiles (home pages) */
.ts-cat-tiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.ts-cat-tile { display: grid; justify-items: center; gap: 6px; padding: 18px 10px; border-radius: var(--ts-radius); text-align: center; text-decoration: none; color: inherit; background: var(--ts-surface-2); }
.ts-cat-tile__icon { width: 36px; height: 36px; }
.ts-cat-tile__name { font-weight: 700; line-height: 1.2; }
.ts-cat-tile__count { font-size: .8rem; color: var(--ts-muted); }

.ts-pagination { margin-top: calc(var(--ts-gap) * 2); }
.ts-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.ts-pagination .page-numbers { display: inline-grid; place-items: center; min-width: 42px; height: 42px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--ts-border); color: inherit; text-decoration: none; }
.ts-pagination .page-numbers.current { background: var(--ts-accent); color: var(--ts-accent-ink); border-color: var(--ts-accent); }

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap; }

/* Phones and tablets: categories become a swipeable chip row, like the Marketplace app */
@media (max-width: 900px) {
	.ts-shop__wrap { grid-template-columns: minmax(0, 1fr); gap: 10px; }
	.ts-sidebar { position: static; max-height: none; overflow: visible; padding: 0; }
	.ts-sidebar__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); }
	.ts-cats__list { display: flex; gap: 8px; overflow-x: auto; padding: 12px 2px 6px; scroll-snap-type: x proximity; scrollbar-width: none; }
	.ts-cats__list::-webkit-scrollbar { display: none; }
	.ts-cats__list li { flex: none; scroll-snap-align: start; }
	.ts-cat { grid-template-columns: auto auto auto; gap: 6px; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--ts-surface-2); white-space: nowrap; }
	.ts-cat__icon { width: 26px; height: 26px; padding: 4px; }
	.ts-item__grid { grid-template-columns: 1fr; }
	.ts-gallery { position: static; }
	.ts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.ts-form__row { grid-template-columns: 1fr; }
	.ts-facts { grid-template-columns: 1fr; }
	.ts-item__actions .ts-btn { flex: 1 1 100%; }
	.ts-item__actions .ts-btn--sms, .ts-item__actions .ts-btn--ghost { flex: 1 1 40%; }
}
@media (prefers-reduced-motion: reduce) {
	.ts-card__img, .ts-btn { transition: none; }
	.ts-card__link:hover .ts-card__img { transform: none; }
}