/*
 * Tessuti page only -- enqueued conditionally on is_page_template('template-tessuti.php') in
 * functions.php. Sidebar+grid layout, filter form and full-screen filter view are deliberately
 * modeled on assets/css/shop.css (same breakpoints/tokens, renamed .myc-tessuti-* classes -- not
 * reusing the .myc-shop-* classes directly since this page has its own markup/JS, see
 * template-parts/tessuti/tessuti-filters.php's docblock for why the shop's own filter partial
 * isn't reused as-is). Card grid is 3 columns desktop / 2 tablet / 1 mobile, per
 * docs/superpowers/specs/2026-07-30-tessuti-page-design.md (a different responsive split than the
 * shop's 3/3/2, confirmed with the user during brainstorming). The detail modal is the myc plugin's
 * FabricSpecModal.vue itself (assets/fabric-spec.js/.css, see functions.php): no styles here.
 */

.myc-tessuti { max-width: 1240px; margin: 0 auto; padding: 24px 48px 60px; }

.myc-tessuti-header { padding-bottom: 4px; }
.myc-tessuti-title { font: 800 1.75rem var(--myc-font-sans); color: var(--myc-ink); margin: 0; }
.myc-tessuti-subtitle { font-size: 0.875rem; color: var(--myc-grey-2); margin: 6px 0 0; max-width: 640px; }

.myc-tessuti-empty { color: var(--myc-grey-2); font: 500 0.9375rem var(--myc-font-sans); margin: 28px 0; }

/* Toolbar: only the mobile/tablet "Filtri" trigger lives here (no sort dropdown on this page). */
.myc-tessuti-toolbar { display: none; }

.myc-tessuti-filter-fs-trigger {
	display: none;
	align-items: center;
	gap: 8px;
	background: var(--myc-paper);
	color: var(--myc-ink);
	border: 1px solid var(--myc-ink);
	border-radius: 0;
	padding: 10px 16px;
	font: 600 0.875rem var(--myc-font-sans);
	cursor: pointer;
}
.myc-tessuti-filter-fs-badge { background: var(--myc-ink); color: var(--myc-paper); border-radius: 0; font: 700 0.875rem var(--myc-font-sans); padding: 1px 7px; }
.myc-tessuti-filter-fs-badge[hidden] { display: none; }

.myc-tessuti-layout { display: grid; grid-template-columns: 220px 1fr; gap: 36px; margin-top: 28px; align-items: start; width: 100%; }

/* Sidebar filters (template-parts/tessuti/tessuti-filters.php) */
.myc-tessuti-sidebar .myc-tessuti-filters { display: flex; flex-direction: column; gap: 22px; }
.myc-tessuti-filters .myc-tessuti-filter-title {
	font: 700 0.875rem var(--myc-font-sans);
	color: var(--myc-ink);
	margin: 0 0 10px;
	padding: 0;
	border: none;
	width: auto;
}
.myc-tessuti-filters .myc-tessuti-filter-group {
	margin: 0;
	padding: 0;
	border: none;
	background: none;
	box-shadow: none;
	min-width: 0;
}
.myc-tessuti-filter-options { display: flex; flex-direction: column; gap: 8px; }
.myc-tessuti-filter-option { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: var(--myc-grey-2); cursor: pointer; }
.myc-tessuti-filter-option input[type="checkbox"] {
	appearance: none;
	box-sizing: border-box;
	width: 16px;
	height: 16px;
	border: 1.5px solid var(--myc-ink);
	border-radius: 0;
	margin: 0;
	flex: 0 0 auto;
	cursor: pointer;
}
.myc-tessuti-filter-option input[type="checkbox"]:checked { background: var(--myc-ink); }
.myc-tessuti-filter-apply { display: none; } /* JS intercepts submit; this stays only as a no-JS fallback */
.myc-tessuti-filters:not(.myc-js-ready) .myc-tessuti-filter-apply {
	display: block;
	margin-top: 4px;
	background: var(--myc-ink);
	color: #fff;
	font: 700 0.875rem var(--myc-font-sans);
	border: none;
	border-radius: 0;
	padding: 10px;
	cursor: pointer;
}

/* Grid + cards */
.myc-tessuti-grid { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 22px; row-gap: 40px; width: 100%; }

.myc-tessuti-card-wrap { display: flex; flex-direction: column; gap: 8px; }
.myc-tessuti-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 100%;
	text-align: left;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	font-family: var(--myc-font-sans);
}
.myc-tessuti-card-image { display: block; position: relative; width: 100%; height: 200px; border-radius: 0; overflow: hidden; background: var(--myc-white); }
.myc-tessuti-card-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; }
.myc-tessuti-card:hover .myc-tessuti-card-image img,
.myc-tessuti-card:focus-visible .myc-tessuti-card-image img { transform: scale(1.08); }
.myc-tessuti-card-info {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(20, 32, 46, 0.72);
	color: #fff;
	font: 700 0.8125rem/24px var(--myc-font-sans);
	font-style: italic;
	text-align: center;
}
.myc-tessuti-card-body { display: flex; flex-direction: column; gap: 6px; }
.myc-tessuti-card-title { font: 700 0.875rem var(--myc-font-sans); color: var(--myc-ink); line-height: 1.3; }
.myc-tessuti-card-desc { font: 500 0.8125rem var(--myc-font-sans); color: var(--myc-grey-2); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.myc-tessuti-card-tier { position: absolute; top: 10px; left: 10px; z-index: 1; }
.myc-tessuti-card-price { font: 500 0.9375rem var(--myc-font-sans); color: var(--myc-ink); display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.myc-tessuti-card-included { font-size: 0.8125rem; color: var(--myc-success-text); }
.myc-tessuti-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 22px; padding: 14px 18px; background: var(--myc-ink); color: var(--myc-white); font: 400 0.875rem/1.4 var(--myc-font-sans); text-decoration: none; }
.myc-tessuti-strip .myc-tier--firma { border-color: var(--myc-gold); }
.myc-tessuti-strip-cta { margin-left: auto; font-weight: 500; color: var(--myc-gold); }
/* Sopra html body a:hover di global.css (grigio): tutta la striscia passa in oro, come il link. */
.myc-tessuti-strip:hover { color: var(--myc-gold); }
.myc-tessuti-strip:hover .myc-tessuti-strip-cta { text-decoration: underline; }
.myc-tessuti-card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.myc-tessuti-card-tag { font: 600 0.75rem var(--myc-font-sans); color: var(--myc-grey-2); background: var(--myc-white); border-radius: 0; padding: 3px 9px; }
.myc-tessuti-card-cta { font: 700 0.8125rem var(--myc-font-sans); color: var(--myc-ink); text-decoration: none; }
.myc-tessuti-card-cta:hover { text-decoration: underline; }
.myc-tessuti-card-soon, .myc-tessuti-card-soon:hover { color: var(--myc-grey-2); text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
	.myc-tessuti-card-image img { transition: none; }
}

.myc-tessuti-load-more-wrap { padding: 36px 0 0; }
.myc-tessuti-load-more {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1.5px solid var(--myc-ink);
	background: transparent;
	color: var(--myc-ink);
	font: 700 0.875rem var(--myc-font-sans);
	padding: 14px;
	border-radius: 0;
	max-width: 280px;
	margin: 0 auto;
	cursor: pointer;
}
.myc-tessuti-load-more[hidden] { display: none; }
.myc-tessuti-load-more-wrap:has(> [hidden]) { display: none; }

.myc-scroll-locked { overflow: hidden; }

/* Full-screen filter view (mobile/tablet only) */
.myc-tessuti-filter-fs { position: fixed; inset: 0; z-index: 200; background: var(--myc-paper); display: flex; flex-direction: column; }
.myc-tessuti-filter-fs[hidden] { display: none; }
.myc-tessuti-filter-fs-header { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 18px 20px 16px; border-bottom: 1px solid var(--myc-line); }
.myc-tessuti-filter-fs-back { background: none; border: none; padding: 4px; color: var(--myc-ink); cursor: pointer; }
.myc-tessuti-filter-fs-title { font: 800 1.0625rem var(--myc-font-sans); color: var(--myc-ink); margin: 0; }
.myc-tessuti-filter-fs-body { flex: 1 1 auto; overflow-y: auto; padding: 4px 20px; }
.myc-tessuti-filter-fs-body .myc-tessuti-filters { display: flex; flex-direction: column; gap: 22px; padding: 16px 0; }
.myc-tessuti-filter-fs-footer {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 20px calc(18px + env(safe-area-inset-bottom, 0px));
	border-top: 1px solid var(--myc-line);
}
.myc-tessuti-filter-fs-clear { background: none; border: none; font: 600 0.875rem var(--myc-font-sans); color: var(--myc-grey-2); cursor: pointer; padding: 8px 0; }
.myc-tessuti-filter-fs-apply {
	flex: 1 1 auto;
	background: var(--myc-ink);
	color: #fff;
	border: none;
	font: 700 0.875rem var(--myc-font-sans);
	padding: 14px;
	border-radius: 0;
	cursor: pointer;
}

@media (max-width: 1023px) {
	.myc-tessuti { padding: 22px 28px 30px; }
	.myc-tessuti-title { font-size: 1.625rem; }

	.myc-tessuti-toolbar { display: flex; justify-content: flex-end; padding: 0 0 16px; }
	.myc-tessuti-filter-fs-trigger { display: inline-flex; }

	.myc-tessuti-layout { grid-template-columns: 1fr; margin-top: 0; }
	.myc-tessuti-sidebar { display: none; }

	.myc-tessuti-grid { grid-template-columns: repeat(2, 1fr); column-gap: 16px; row-gap: 32px; }
	.myc-tessuti-card-image { height: 200px; }
	.myc-tessuti-load-more-wrap { padding: 24px 0 30px; max-width: 320px; margin: 0 auto; }
}

@media (max-width: 767px) {
	.myc-tessuti { padding: 16px 16px 30px; }
	.myc-tessuti-title { font-size: 1.375rem; }

	.myc-tessuti-grid { grid-template-columns: 1fr; gap: 22px; }
	.myc-tessuti-card-image { height: 220px; }
	.myc-tessuti-load-more-wrap { padding: 20px 0 30px; max-width: none; }
	.myc-tessuti-load-more { width: 100%; }
}

/* v3 (formerly v3-reskin.css): serif title, square. */
.myc-tessuti h1 { font-family: var(--myc-font-serif) !important; font-weight: 400 !important; letter-spacing: 0; line-height: 1.1; }
.myc-tessuti * { border-radius: 0 !important; box-shadow: none !important; }