/* Tile Catalog — front-end catalog grid + filters */

.tilecat-catalog {
	display: grid;
	grid-template-columns: 270px 1fr;
	gap: 32px;
	align-items: start;
	font-family: inherit;
	color: #222;
}

/* ---- Sidebar / filters ---- */
.tilecat-sidebar {
	font-size: 14px;
}
.tilecat-fgroup {
	border-bottom: 1px solid #e6e6e6;
	padding: 4px 0;
}
.tilecat-fhead {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background: none;
	border: 0;
	padding: 12px 2px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #333;
	cursor: pointer;
}
.tilecat-caret {
	transition: transform .2s ease;
	font-size: 10px;
	color: #999;
}
.tilecat-fgroup.is-collapsed .tilecat-fbody {
	display: none;
}
.tilecat-fgroup.is-collapsed .tilecat-caret {
	transform: rotate(180deg);
}
.tilecat-fbody {
	padding: 0 2px 12px;
}
.tilecat-fopts {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px 14px;
}
.tilecat-fgroup[data-group="stock"] .tilecat-fopts {
	grid-template-columns: 1fr;
}
.tilecat-fopt-stock { gap: 6px; }
.tilecat-fopt {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 5px 0;
	font-size: 13px;
	color: #555;
	cursor: pointer;
}
.tilecat-fopt input {
	margin: 0;
	flex: 0 0 auto;
}
.tilecat-hidden-opt {
	display: none;
}
.tilecat-fbody.is-expanded .tilecat-hidden-opt {
	display: flex;
}
.tilecat-showmore {
	background: none;
	border: 0;
	color: #08291d;
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	cursor: pointer;
	padding: 8px 0 0;
}

/* ---- Top bar ---- */
.tilecat-bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #e6e6e6;
	padding-bottom: 12px;
	margin-bottom: 20px;
}
.tilecat-count {
	font-size: 14px;
	color: #666;
}
.tilecat-count strong {
	color: #222;
	font-weight: 600;
}
.tilecat-views {
	display: flex;
	gap: 6px;
}
.tilecat-view-btn {
	background: none;
	border: 1px solid #ddd;
	border-radius: 4px;
	width: 32px;
	height: 32px;
	cursor: pointer;
	color: #999;
	font-size: 15px;
	line-height: 1;
}
.tilecat-view-btn.is-active {
	color: #08291d;
	border-color: #08291d;
}

/* ---- Grid ---- */
.tilecat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 350px), 1fr));
	gap: 20px;
	transition: opacity .15s ease;
}
.tilecat-grid.is-loading {
	opacity: .45;
	pointer-events: none;
}
.tilecat-empty {
	grid-column: 1 / -1;
	color: #888;
	padding: 40px 0;
	text-align: center;
}

/* List view */
.tilecat-catalog[data-view="list"] .tilecat-grid {
	grid-template-columns: 1fr;
}
.tilecat-catalog[data-view="list"] .tilecat-card {
	display: grid;
	grid-template-columns: 220px 1fr;
	align-items: center;
}

/* ---- Card ---- */
.tilecat-card {
	position: relative;
	background: #fff;
	border: 1px solid #ededed;
	border-radius: 4px;
	overflow: hidden;
}
.tilecat-card-media {
	position: relative;
	aspect-ratio: 1 / 1;
	background: #f4f3f0;
	overflow: hidden;
}
.tilecat-card-link {
	display: block;
	width: 100%;
	height: 100%;
}
.tilecat-card-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s ease;
}
.tilecat-card:hover .tilecat-card-img {
	transform: scale(1.04);
}
.tilecat-card-noimg {
	display: block;
	width: 100%;
	height: 100%;
	background: #f4f3f0;
}
.tilecat-badge-360 {
	position: absolute;
	top: 10px;
	left: 10px;
	background: rgba(255, 255, 255, .92);
	color: #08291d;
	font-size: 11px;
	font-weight: 700;
	border-radius: 50%;
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tilecat-badge-stock {
	position: absolute;
	bottom: 10px;
	left: 10px;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: rgba(255, 255, 255, .94);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .02em;
	padding: 4px 10px 4px 8px;
	border-radius: 999px;
}
.tilecat-badge-stock.is-in-stock .tilecat-badge-stock-label { color: #0a7c2f; }
.tilecat-badge-stock.is-made-to-order .tilecat-badge-stock-label { color: #b08d57; }
.tilecat-badge-stock.is-out-of-stock .tilecat-badge-stock-label { color: #c23b34; }

/* ---- Animated pulsing status dot ---- */
.tilecat-ring {
	position: relative;
	width: 10px;
	height: 10px;
	display: inline-block;
	flex: 0 0 auto;
	vertical-align: middle;
}
.tilecat-ring .tilecat-circle {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	z-index: 3;
}
.tilecat-ring .tilecat-ringring,
.tilecat-ring .tilecat-ringring::before,
.tilecat-ring .tilecat-ringring::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	animation: tilecat-ripple 2.4s ease-out infinite;
}
.tilecat-ring .tilecat-ringring::before { animation-delay: .6s; }
.tilecat-ring .tilecat-ringring::after { animation-delay: 1.2s; }
@keyframes tilecat-ripple {
	0%   { transform: translate(-50%, -50%) scale(1); opacity: .55; }
	100% { transform: translate(-50%, -50%) scale(3); opacity: 0; }
}
.tilecat-ring.is-in-stock .tilecat-circle { background: #00c853; box-shadow: 0 0 6px rgba(0, 200, 83, .5); }
.tilecat-ring.is-in-stock .tilecat-ringring,
.tilecat-ring.is-in-stock .tilecat-ringring::before,
.tilecat-ring.is-in-stock .tilecat-ringring::after { background: rgba(0, 200, 83, .18); }
.tilecat-ring.is-made-order .tilecat-circle { background: #ffa500; box-shadow: 0 0 6px rgba(255, 165, 0, .5); }
.tilecat-ring.is-made-order .tilecat-ringring,
.tilecat-ring.is-made-order .tilecat-ringring::before,
.tilecat-ring.is-made-order .tilecat-ringring::after { background: rgba(255, 165, 0, .18); }
.tilecat-ring.is-out-stock .tilecat-circle { background: #ff3b30; box-shadow: 0 0 6px rgba(255, 59, 48, .5); }
.tilecat-ring.is-out-stock .tilecat-ringring,
.tilecat-ring.is-out-stock .tilecat-ringring::before,
.tilecat-ring.is-out-stock .tilecat-ringring::after { background: rgba(255, 59, 48, .18); }
@media (prefers-reduced-motion: reduce) {
	.tilecat-ring .tilecat-ringring,
	.tilecat-ring .tilecat-ringring::before,
	.tilecat-ring .tilecat-ringring::after { animation: none; opacity: 0; }
}
.tilecat-fav {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: #b32d2e;
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity .2s ease, transform .2s ease;
}
.tilecat-card:hover .tilecat-fav,
.tilecat-fav.is-fav {
	opacity: 1;
	transform: translateY(0);
}
.tilecat-fav.is-fav {
	color: #b32d2e;
}
.tilecat-card-meta {
	padding: 12px 14px 16px;
}
.tilecat-card-name {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: #222;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: .02em;
}
.tilecat-card-name:hover {
	color: #08291d;
}
.tilecat-card-cat {
	display: block;
	font-size: 11px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #b08d57;
	margin-top: 5px;
}
.tilecat-card-size {
	display: block;
	font-size: 12px;
	color: #999;
	margin-top: 3px;
}

/* ---- Load more ---- */
.tilecat-more-wrap {
	text-align: center;
	margin-top: 32px;
}
.tilecat-more {
	background: #08291d;
	color: #fff;
	border: 0;
	padding: 12px 28px;
	border-radius: 3px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	cursor: pointer;
}
.tilecat-more:hover {
	background: #0c4030;
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
	.tilecat-catalog {
		grid-template-columns: 1fr;
	}
	.tilecat-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 520px) {
	.tilecat-grid {
		grid-template-columns: 1fr;
	}
}

/* =========================================================
   Single tile page
   ========================================================= */
.tilecat-single {
	max-width: 1280px;
	margin: 0 auto;
	padding: 56px 20px 72px;
	font-family: inherit;
	color: #222;
}
.tilecat-crumb {
	font-size: 12px;
	color: #999;
	margin-bottom: 14px;
}
.tilecat-crumb a {
	color: #08291d;
	text-decoration: none;
}
.tilecat-crumb span {
	margin: 0 6px;
}
.tilecat-crumb .current {
	color: #666;
}
.tilecat-single-top {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: start;
}

/* Gallery */
.tilecat-stage {
	position: relative;
	aspect-ratio: 4 / 3;
	background: #f4f3f0;
	border-radius: 6px;
	overflow: hidden;
}
.tilecat-stage-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .3s ease;
}
.tilecat-stage-img.is-active {
	opacity: 1;
}
.tilecat-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	color: #333;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}
.tilecat-prev { left: 12px; }
.tilecat-next { right: 12px; }
.tilecat-thumbs {
	display: flex;
	gap: 10px;
	margin-top: 14px;
	flex-wrap: wrap;
}
.tilecat-thumb {
	width: 64px;
	height: 64px;
	border: 1px solid #e2e2e2;
	border-radius: 4px;
	padding: 0;
	overflow: hidden;
	cursor: pointer;
	background: #f4f3f0;
}
.tilecat-thumb.is-active {
	border-color: #08291d;
}
.tilecat-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Info column */
.tilecat-single-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
}
.tilecat-single-title {
	font-size: 38px;
	font-weight: 400;
	margin: 0;
	line-height: 1.1;
}
.tilecat-single-actions {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}
.tilecat-single-actions button {
	width: 38px;
	height: 38px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
	font-size: 17px;
	color: #555;
}
.tilecat-single-actions .tilecat-fav {
	position: static;
	opacity: 1;
	transform: none;
}
.tilecat-share.is-copied {
	border-color: #0a7c2f;
	color: #0a7c2f;
}
.tilecat-single-tags {
	display: flex;
	gap: 16px;
	margin: 16px 0;
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.tilecat-tag-cat { color: #b08d57; }
.tilecat-tag-app { color: #888; }
.tilecat-avail-line {
	margin-bottom: 20px;
	font-size: 13px;
	font-weight: 600;
}
.tilecat-avail {
	display: inline-flex;
	align-items: center;
	gap: 9px;
}
.tilecat-avail.is-available { color: #0a7c2f; }
.tilecat-avail.is-unavailable { color: #b32d2e; }
.tilecat-avail.is-in-stock { color: #0a7c2f; }
.tilecat-avail.is-made-to-order { color: #b08d57; }
.tilecat-avail.is-out-of-stock { color: #8a8a8a; }

.tilecat-specs {
	display: flex;
	gap: 40px;
	border-top: 1px solid #eee;
	border-bottom: 1px solid #eee;
	padding: 18px 0;
	margin-bottom: 24px;
}
.tilecat-spec-label {
	display: block;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #aaa;
	margin-bottom: 4px;
}
.tilecat-spec-value {
	font-size: 15px;
	color: #333;
}
.tilecat-tools-label {
	display: block;
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #aaa;
	margin-bottom: 12px;
}
.tilecat-tools-row {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}
.tilecat-tool {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid #ddd;
	border-radius: 4px;
	padding: 10px 16px;
	font-size: 13px;
	color: #333;
	text-decoration: none;
}
.tilecat-tool:hover {
	border-color: #b08d57;
	color: #b08d57;
}
.tilecat-tool-ico {
	color: #b08d57;
	font-weight: 700;
	font-size: 13px;
}
.tilecat-single-desc {
	font-size: 15px;
	line-height: 1.7;
	color: #555;
	margin-bottom: 16px;
}

/* Similar */
.tilecat-similar {
	margin-top: 64px;
}
.tilecat-similar-title {
	font-size: 24px;
	font-weight: 400;
	margin: 0 0 24px;
}
.tilecat-similar-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
@media (max-width: 900px) {
	.tilecat-single-top {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.tilecat-single-title {
		font-size: 30px;
	}
	.tilecat-similar-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* =========================================================
   v0.1.1 — theme overrides, image fix, quick view, icons
   ========================================================= */

/* Rebrand filter headers & buttons to #08291d, overriding theme button styles */
.tilecat-fhead {
	background: #08291d !important;
	color: #fff !important;
	border: 0 !important;
	border-radius: 3px;
	padding: 12px 14px !important;
	margin-bottom: 4px;
}
.tilecat-fhead .tilecat-caret {
	color: rgba(255, 255, 255, .7);
}
.tilecat-view-btn {
	width: 38px !important;
	height: 38px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	flex: 0 0 auto !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: #fff !important;
	color: #08291d !important;
	border: 1px solid #08291d !important;
	border-radius: 3px !important;
	line-height: 1 !important;
}
.tilecat-view-btn svg {
	width: 18px;
	height: 18px;
}
.tilecat-view-btn.is-active {
	background: #08291d !important;
	color: #fff !important;
}
.tilecat-views {
	flex: 0 0 auto;
}
.tilecat-showmore {
	color: #08291d !important;
	background: none !important;
	border: 0 !important;
}
.tilecat-more {
	background: #08291d !important;
	color: #fff !important;
	border: 0 !important;
}
.tilecat-more:hover {
	background: #0c4030 !important;
}

/* Featured image fills the whole card media (override theme img rules) */
.tilecat-card-media {
	aspect-ratio: 1 / 1;
}
.tilecat-card-link {
	display: block;
	width: 100%;
	height: 100%;
}
.tilecat-card-img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	max-width: none !important;
}

/* Quick view button (hover) — high contrast, readable over any image */
.tilecat-quickview {
	position: absolute !important;
	left: 50% !important;
	bottom: 14px !important;
	top: auto !important;
	transform: translateX(-50%) translateY(8px);
	opacity: 0;
	background: #08291d !important;
	color: #fff !important;
	border: 0 !important;
	padding: 10px 20px !important;
	border-radius: 3px !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	letter-spacing: .06em !important;
	text-transform: uppercase !important;
	line-height: 1 !important;
	width: auto !important;
	min-width: 0 !important;
	cursor: pointer;
	white-space: nowrap;
	z-index: 3;
	transition: opacity .2s ease, transform .2s ease;
}
.tilecat-card:hover .tilecat-quickview {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
}

/* Quick view modal */
.tilecat-qv-overlay {
	position: fixed;
	inset: 0;
	background: rgba(15, 15, 15, .72);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 99999;
	padding: 24px;
	animation: tilecat-qv-fade .22s ease both;
}
.tilecat-qv-overlay.is-open {
	display: flex;
}
body.tilecat-qv-lock {
	overflow: hidden;
}

/* Close button — fixed circle, top-right */
.tilecat-qv-close {
	position: fixed !important;
	top: 24px;
	right: 28px;
	width: 46px !important;
	height: 46px !important;
	min-width: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, .92) !important;
	box-shadow: none !important;
	color: #222 !important;
	cursor: pointer;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	z-index: 2;
	transition: background .2s ease, color .2s ease, transform .2s ease;
}
.tilecat-qv-close:hover,
.tilecat-qv-close:focus {
	background: #08291d !important;
	color: #fff !important;
	transform: rotate(90deg);
}
.tilecat-qv-close svg {
	width: 22px;
	height: 22px;
}

/* Card */
.tilecat-qv-modal {
	position: relative;
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	width: 100%;
	max-width: 460px;
	max-height: 92vh;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
	animation: tilecat-qv-pop .28s cubic-bezier(.2, .8, .2, 1) both;
}
.tilecat-qv-content {
	display: block;
}
.tilecat-qv-loading {
	padding: 50px;
	text-align: center;
	color: #888;
}
.tilecat-qv-media {
	position: relative;
	aspect-ratio: 1 / 1;
	background: #f4f3f0;
	overflow: hidden;
}
.tilecat-qv-img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block;
}
/* Bigger tiles: wider card, full uncropped image at its own natural shape */
.tilecat-qv-modal.is-big {
	max-width: 640px;
}
.tilecat-qv-media.is-big {
	aspect-ratio: auto !important;
	max-height: 66vh;
	background: #f4f3f0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tilecat-qv-media.is-big .tilecat-qv-img {
	width: auto !important;
	height: auto !important;
	max-width: 100%;
	max-height: 66vh;
	object-fit: contain !important;
}
.tilecat-qv-info {
	padding: 20px 24px 24px;
}
.tilecat-qv-name {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: #1c1c1c;
}
.tilecat-qv-tags {
	display: flex;
	gap: 14px;
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	margin-bottom: 16px;
}
.tilecat-qv-cat { color: #b08d57; }
.tilecat-qv-size { color: #9a9a9a; }
.tilecat-qv-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #08291d;
	color: #fff;
	text-decoration: none;
	padding: 11px 22px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	transition: background .2s ease, gap .2s ease;
}
.tilecat-qv-link:hover {
	background: #0c4030;
	gap: 12px;
}

@keyframes tilecat-qv-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes tilecat-qv-pop {
	from { opacity: 0; transform: translateY(14px) scale(.97); }
	to   { opacity: 1; transform: none; }
}
@media (max-width: 520px) {
	.tilecat-qv-close { top: 16px; right: 16px; }
}

/* Single page — share / favorite as gold-icon squares */
.tilecat-single-actions button {
	width: 40px !important;
	height: 40px !important;
	min-width: 0 !important;
	padding: 0 !important;
	color: #b08d57 !important;
	background: #fff !important;
	border: 1px solid #ddd !important;
	border-radius: 4px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer;
}
.tilecat-single-actions button svg {
	width: 18px !important;
	height: 18px !important;
	display: block !important;
}
.tilecat-single-actions .tilecat-fav.is-fav svg {
	fill: #b08d57 !important;
}
.tilecat-share.is-copied {
	border-color: #0a7c2f !important;
	color: #0a7c2f !important;
}

/* Single page — circular gold-outline tool icons + labels */
.tilecat-tool {
	border: 0 !important;
	background: none !important;
	padding: 0 !important;
	gap: 12px;
	color: #b08d57 !important;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-size: 13px;
}
.tilecat-tool:hover {
	color: #8f6f3f !important;
}
.tilecat-tool-ico {
	width: 46px;
	height: 46px;
	border: 1px solid #c9a86f;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #b08d57;
	font-weight: 400;
}
.tilecat-tool-ico svg {
	width: 24px;
	height: 24px;
}
.tilecat-tool-label {
	font-weight: 500;
}

/* Single page — nav arrow icon sizing */
.tilecat-nav svg {
	width: 20px;
	height: 20px;
}

/* =========================================================
   v0.1.4 — bigger single layout, nav arrows, thumbs, favorites
   ========================================================= */

/* Larger gallery */
.tilecat-single-top {
	grid-template-columns: 1.15fr 1fr !important;
	gap: 56px !important;
}
.tilecat-stage {
	aspect-ratio: 4 / 3;
}

/* Fix nav arrows (override theme button styling -> clean white circles) */
.tilecat-nav {
	width: 46px !important;
	height: 46px !important;
	min-width: 0 !important;
	min-height: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, .95) !important;
	color: #222 !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1 !important;
}
.tilecat-nav svg {
	width: 22px;
	height: 22px;
}

/* Fix thumbnail strip (override theme gold borders/padding) */
.tilecat-thumb {
	width: 68px !important;
	height: 68px !important;
	min-width: 0 !important;
	padding: 0 !important;
	border: 1px solid #e2e2e2 !important;
	border-radius: 4px !important;
	background: #f4f3f0 !important;
	overflow: hidden !important;
	cursor: pointer;
}
.tilecat-thumb.is-active {
	border-color: #08291d !important;
}
.tilecat-thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	max-width: none !important;
}

/* Catalog favorite heart — robust styling + clear favorited state */
.tilecat-card .tilecat-fav {
	width: 36px !important;
	height: 36px !important;
	min-width: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, .95) !important;
	color: #b32d2e !important;
	font-size: 18px !important;
	line-height: 1 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer;
}
.tilecat-card .tilecat-fav.is-fav {
	background: #b32d2e !important;
	color: #fff !important;
	opacity: 1 !important;
}

/* =========================================================
   v0.1.5 — larger single page + similar tiles carousel
   ========================================================= */

/* Bigger title, tags, availability */
.tilecat-single-title {
	font-size: 52px !important;
	line-height: 1.05;
}
.tilecat-single-tags {
	gap: 18px;
	margin: 20px 0;
	font-size: 14px;
}
.tilecat-single-tags .tilecat-tag-app {
	border-left: 1px solid #ddd;
	padding-left: 18px;
}
.tilecat-avail-line {
	font-size: 14px;
	margin-bottom: 26px;
}

/* Specs — bigger text + divider between the two columns */
.tilecat-specs {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 0 !important;
	padding: 22px 0 !important;
}
.tilecat-specs .tilecat-spec + .tilecat-spec {
	border-left: 1px solid #eee;
	padding-left: 32px;
}
.tilecat-spec-label {
	font-size: 13px !important;
	letter-spacing: .1em;
	margin-bottom: 8px !important;
}
.tilecat-spec-value {
	font-size: 18px !important;
}

/* Tools — bigger icons + labels */
.tilecat-tools-label {
	font-size: 13px !important;
	letter-spacing: .1em;
	margin-bottom: 16px !important;
}
.tilecat-tools-row {
	gap: 28px !important;
}
.tilecat-tool {
	font-size: 14px !important;
}
.tilecat-tool-ico {
	width: 56px !important;
	height: 56px !important;
}
.tilecat-tool-ico svg {
	width: 28px !important;
	height: 28px !important;
}

/* Bigger gallery nav arrows */
.tilecat-nav {
	width: 56px !important;
	height: 56px !important;
}
.tilecat-nav svg {
	width: 26px;
	height: 26px;
}

/* ---- Similar tiles carousel ---- */
.tilecat-similar {
	margin-top: 90px !important;
}
.tilecat-similar-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid #eee;
	padding-bottom: 18px;
	margin-bottom: 28px;
}
.tilecat-similar-title {
	font-size: 32px !important;
	margin: 0 !important;
}
.tilecat-similar-nav {
	display: flex;
	gap: 14px;
}
.tilecat-sim-btn {
	width: 50px !important;
	height: 50px !important;
	min-width: 0 !important;
	padding: 0 !important;
	border: 1px solid #cfcfcf !important;
	border-radius: 50% !important;
	background: #fff !important;
	color: #333 !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer;
}
.tilecat-sim-btn:hover {
	border-color: #08291d !important;
	color: #08291d !important;
}
.tilecat-sim-btn svg {
	width: 22px;
	height: 22px;
}
.tilecat-similar-track {
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
}
.tilecat-similar-track::-webkit-scrollbar {
	display: none;
}
.tilecat-similar-track .tilecat-card {
	flex: 0 0 calc(25% - 18px);
	min-width: 0;
}

/* Bigger card name + size/category row for similar tiles */
.tilecat-similar .tilecat-card-name {
	font-size: 16px;
}
.tilecat-card-metarow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 6px;
}
.tilecat-card-metarow .tilecat-card-cat {
	margin-top: 0;
}
.tilecat-card-metarow .tilecat-card-size {
	margin-top: 0;
	font-size: 12px;
	color: #999;
	white-space: nowrap;
}

@media (max-width: 900px) {
	.tilecat-single-title { font-size: 38px !important; }
	.tilecat-similar-track .tilecat-card { flex: 0 0 calc(50% - 12px); }
}
@media (max-width: 560px) {
	.tilecat-similar-track .tilecat-card { flex: 0 0 80%; }
}

/* Similar-tiles cards: clean image + text only (no hover controls) */
.tilecat-similar-track .tilecat-quickview,
.tilecat-similar-track .tilecat-fav {
	display: none !important;
}

/* =========================================================
   v0.1.7 — arrow positioning + responsive filter columns
   ========================================================= */

/* Force gallery arrows onto the image: prev left, next right */
.tilecat-stage .tilecat-nav {
	position: absolute !important;
	top: 50% !important;
	bottom: auto !important;
	transform: translateY(-50%) !important;
	margin: 0 !important;
	z-index: 4;
}
.tilecat-stage .tilecat-prev {
	left: 16px !important;
	right: auto !important;
}
.tilecat-stage .tilecat-next {
	right: 16px !important;
	left: auto !important;
}

/* Single-column filter choices on tablets and smaller desktops */
@media (max-width: 1200px) {
	.tilecat-fopts {
		grid-template-columns: 1fr;
	}
}

/* =========================================================
   v0.1.8 — favorites view toggle button
   ========================================================= */
.tilecat-favview-btn {
	position: relative;
	width: 38px !important;
	height: 38px !important;
	min-width: 0 !important;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	background: #fff !important;
	color: #b32d2e !important;
	border: 1px solid #ddd !important;
	border-radius: 3px !important;
	line-height: 1 !important;
	cursor: pointer;
}
.tilecat-favview-btn svg {
	width: 18px;
	height: 18px;
}
.tilecat-favview-btn.is-active {
	background: #b32d2e !important;
	color: #fff !important;
	border-color: #b32d2e !important;
}
.tilecat-favview-btn .tilecat-favview-count {
	position: absolute;
	top: -7px;
	right: -7px;
	min-width: 17px;
	height: 17px;
	line-height: 17px;
	padding: 0 4px;
	background: #08291d;
	color: #fff;
	border-radius: 9px;
	font-size: 10px;
	font-weight: 600;
	text-align: center;
}
.tilecat-favview-btn .tilecat-favview-count:empty {
	display: none;
}

/* =========================================================
   v0.1.9 — clean SVG heart for catalog cards
   ========================================================= */
.tilecat-card .tilecat-fav svg {
	width: 18px;
	height: 18px;
	display: block;
	fill: none;
	stroke: #b32d2e;
	stroke-width: 1.8;
}
.tilecat-card .tilecat-fav.is-fav svg {
	fill: #fff;
	stroke: #fff;
}

/* =========================================================
   v0.2.0 — separated filter panel + active-filter chips
   ========================================================= */

/* Clean filter headers (replace the green bars) */
.tilecat-fhead {
	background: transparent !important;
	color: #2b2b2b !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 16px 6px !important;
	margin: 0 !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	letter-spacing: .03em !important;
}
.tilecat-fhead:hover {
	color: #08291d !important;
}
.tilecat-fgroup {
	border-bottom: 1px solid #e2e2e2;
	padding: 0;
}

/* Chevron icon */
.tilecat-caret {
	color: #999 !important;
	display: inline-flex;
	align-items: center;
}
.tilecat-caret svg {
	width: 16px;
	height: 16px;
	transition: transform .2s ease;
}
.tilecat-fgroup:not(.is-collapsed) .tilecat-caret {
	transform: rotate(180deg);
}
.tilecat-fgroup.is-collapsed .tilecat-caret {
	transform: none !important;
}

/* "N Filters Active Now" indicator (top of sidebar) */
.tilecat-activecount {
	font-size: 12px;
	color: #777;
	align-items: center;
	gap: 6px;
}
.tilecat-activecount:not([hidden]) {
	display: flex;
	padding: 4px 6px 14px;
}
.tilecat-activecount::before {
	content: "\24D8";
	color: #b08d57;
	font-size: 14px;
}

/* Removable active-filter chips (above the grid) */
.tilecat-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 18px;
}
.tilecat-chips:empty {
	display: none;
}
.tilecat-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	border: 1px solid #d9d9d9;
	border-radius: 20px;
	padding: 6px 12px;
	font-size: 12px;
	color: #444;
}
.tilecat-chip-x {
	background: none;
	border: 0;
	color: #999;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	padding: 0;
}
.tilecat-chip-x:hover {
	color: #b32d2e;
}

/* =========================================================
   v0.2.7 — single tile image lightbox (click to zoom)
   ========================================================= */
.tilecat-stage-img {
	cursor: zoom-in;
}
.tilecat-lb {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(0, 0, 0, .9);
	display: none;
	align-items: center;
	justify-content: center;
}
.tilecat-lb.is-open {
	display: flex;
}
body.tilecat-lb-lock {
	overflow: hidden;
}
.tilecat-lb-img {
	max-width: 90vw;
	max-height: 88vh;
	object-fit: contain;
	display: block;
	border-radius: 4px;
}
.tilecat-lb-close {
	position: fixed !important;
	top: 22px;
	right: 26px;
	width: 48px !important;
	height: 48px !important;
	min-width: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, .92) !important;
	box-shadow: none !important;
	color: #222 !important;
	cursor: pointer;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	z-index: 2;
	transition: background .2s ease, color .2s ease, transform .2s ease;
}
.tilecat-lb-close:hover,
.tilecat-lb-close:focus {
	background: #08291d !important;
	color: #fff !important;
	transform: rotate(90deg);
}
.tilecat-lb-close svg {
	width: 22px;
	height: 22px;
}
.tilecat-lb-nav {
	position: absolute !important;
	top: 50%;
	transform: translateY(-50%);
	width: 52px !important;
	height: 52px !important;
	min-width: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: rgba(255, 255, 255, .9) !important;
	box-shadow: none !important;
	color: #222 !important;
	cursor: pointer;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	transition: background .2s ease, color .2s ease;
}
.tilecat-lb-nav:hover {
	background: #08291d !important;
	color: #fff !important;
}
.tilecat-lb-nav.tilecat-lb-hidden {
	display: none !important;
}
.tilecat-lb-nav svg {
	width: 24px;
	height: 24px;
}
.tilecat-lb-prev {
	left: 22px;
}
.tilecat-lb-next {
	right: 22px;
}

/* =========================================================
   v0.3.4 — tile calculator + WhatsApp get-price
   ========================================================= */

/* Calculator tool button looks like the other tools */
.tilecat-calc-btn {
	background: none;
	border: 0;
	cursor: pointer;
	font: inherit;
	padding: 0;
}
.tilecat-calc-btn .tilecat-tool-ico svg {
	width: 24px;
	height: 24px;
}

/* WhatsApp "contact us for price" line */
.tilecat-getprice {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 18px;
	color: #1f7a44;
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
}
.tilecat-getprice svg {
	width: 22px;
	height: 22px;
	color: #25d366;
	flex: 0 0 auto;
}
.tilecat-getprice:hover {
	text-decoration: underline;
}

/* Calculator modal */
.tilecat-calc {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba(0, 0, 0, .5);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.tilecat-calc[hidden] {
	display: none;
}
.tilecat-calc-box {
	position: relative;
	background: #fff;
	border-radius: 8px;
	width: 100%;
	max-width: 380px;
	padding: 28px 26px 26px;
}
.tilecat-calc-close {
	position: absolute;
	top: 10px;
	right: 12px;
	border: 0;
	background: none;
	font-size: 26px;
	line-height: 1;
	color: #555;
	cursor: pointer;
}
.tilecat-calc-title {
	margin: 0 0 18px;
	font-size: 20px;
	font-weight: 500;
}
.tilecat-calc-field {
	margin-bottom: 16px;
}
.tilecat-calc-field label {
	display: block;
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #888;
	margin-bottom: 6px;
}
.tilecat-calc-field select,
.tilecat-calc-field input {
	width: 100%;
	height: 42px;
	padding: 0 10px;
	border: 1px solid #d9d9d9;
	border-radius: 4px;
	font-size: 15px;
	box-sizing: border-box;
}
.tilecat-calc-result {
	background: #f4f3f0;
	border-radius: 6px;
	padding: 12px 14px;
	margin-bottom: 16px;
}
.tilecat-calc-result p {
	margin: 2px 0;
	font-size: 14px;
	color: #444;
}
.tilecat-calc-result strong {
	color: #08291d;
	font-size: 16px;
}
.tilecat-calc-wa {
	display: block;
	text-align: center;
	background: #25d366;
	color: #073d20;
	font-weight: 600;
	text-decoration: none;
	padding: 11px;
	border-radius: 4px;
}
.tilecat-calc-wa:hover {
	background: #1eb858;
}

/* v0.4.8 — calculator box breakdown lines */
.tilecat-calc-boxesline{font-size:15px}
.tilecat-calc-boxesline .tilecat-calc-boxes{font-size:18px}
.tilecat-calc-boxes15{color:#8a8a8a;font-size:13px;font-weight:400}
.tilecat-calc-sub{font-size:13px;color:#666}
.tilecat-calc-sub strong{color:#08291d}