/* /style/collections-v2.css */ 

/* collections.php page chrome — UI v2 "Warm Modern" (tokens from headerStyle.php).
   Replaces the retired /style/bundle-item.css link + the page's old inline <style>.
   The grid-item card markup (.ProList/.ProItemInfo/...) is the shared emitter family
   restyled globally by style/listitem-v2.css (loaded on this page via the shared
   listitem-v2-$device bundle); the .BundleList-scoped rules below carry the page's
   grid layout + card skin (ported from bundle-item.css) so this page renders
   correctly and consistently — page scope (.BundleList .ProList) intentionally
   outranks the plain .ProList rules in listitem-v2.css. */

/* ── Breadcrumbs ── */
.Breadcrumbs{padding:var(--tch-space-4) 0 var(--tch-space-3); font-size:13px; color:var(--tch-muted);}
.Breadcrumbs a{color:var(--tch-muted); text-decoration:none;}
.Breadcrumbs a:hover{color:var(--tch-brand-dark);}
.Breadcrumbs span{padding:0 6px; color:var(--tch-line);}

/* ── Collection hero ── */
.ItemShowcase{
	color:var(--tch-on-dark);
	background:linear-gradient(180deg, var(--tch-ink) 58%, transparent 58%);
	padding:var(--tch-space-7) 0;
	overflow:hidden;
}
.ItemShowcase h1{
	display:inline-block;
	margin:0;
	font-family:var(--tch-font-display);
	font-size:clamp(var(--tch-text-xl), 3vw, var(--tch-text-2xl));
	font-weight:500;
	line-height:1.15;
	max-width:540px;
	color:var(--tch-on-dark);
}
.ItemShowcase h1 span{font-family:var(--tch-font-body); font-size:var(--tch-text-md); font-weight:400; line-height:2; color:var(--tch-on-dark); opacity:.85;}
.ItemShowcase h1 a{color:var(--tch-on-dark); text-decoration:none;}
.ItemShowcase h1 a:hover{text-decoration:underline;}
.ItemShowcase figure{
	max-width:650px;
	margin:0;
	background:var(--tch-surface);
	padding:10px;
	border-radius:var(--tch-radius-lg);
	box-shadow:var(--tch-shadow-lg);
	float:right;
}
.ItemShowcase figure img{border-radius:var(--tch-radius); display:block;}

/* ── Per-category section headers ── */
.BundleItems{padding-top:var(--tch-space-5);}
.BundleItems h2{
	font-family:var(--tch-font-display);
	font-size:var(--tch-text-lg);
	font-weight:500;
	color:var(--tch-ink);
	text-align:center;
	background:var(--tch-surface-sand);
	padding:12px 0;
	border-radius:var(--tch-radius);
	width:100%;
	margin:var(--tch-space-5) 0 var(--tch-space-4);
}

/* ── Product grid (page layout; cards are shared-emitter markup) ── */
.BundleList{display:flex; flex-wrap:wrap; justify-content:center; padding-bottom:var(--tch-space-6);}

.BundleList .ProList{
	background:var(--tch-surface);
	border:1px solid var(--tch-line);
	border-radius:var(--tch-radius-lg);
	width:100%;
	max-width:305px;
	margin:8px;
	display:flex;
	flex-direction:column;
	position:relative;
	overflow:hidden;
	float:left;
	transition:box-shadow .18s ease, transform .18s ease;
	box-shadow:var(--tch-shadow-sm);
}
.BundleList .ProList:hover{box-shadow:var(--tch-shadow); transform:translateY(-2px);}
.BundleList .ProList .Thumb{min-height:305px; position:relative; text-align:center; background:#fff;}
.BundleList .ProList .ProItemInfo{padding:var(--tch-space-4); min-height:160px; display:flex; flex-direction:column;}
.BundleList .ProList .ProItemInfo h4{font-size:15px; font-weight:600; margin:0; line-height:1.4;}
.BundleList .ProList .ProItemInfo h4 a{color:var(--tch-ink); text-decoration:none;}
.BundleList .ProList .ProItemInfo h4 a:hover{color:var(--tch-brand-dark);}
.BundleList .ProList .ProItemInfo .Price{font-size:19px; font-weight:700; color:var(--tch-ink); margin:6px 0 12px;}
.BundleList .ProList .ProItemInfo .Price strike{font-size:14px; color:var(--tch-muted); font-weight:400;}
.BundleList .ProList .ProItemInfo .StockInfo{min-height:18px; color:#1e6b2d; font-weight:600; font-size:13px;}
.BundleList .ProList .ProItemInfo .Variation.Colors img{border-radius:var(--tch-radius-sm);}

.BundleList .ProList .ProItemInfo .CartBTNL{
	display:block;
	margin-top:auto;
	line-height:38px;
	text-align:center;
	color:var(--tch-brand-dark);
	overflow:hidden;
	font-weight:600;
	font-size:13px;
	letter-spacing:.03em;
	border:1px solid var(--tch-brand);
	border-radius:var(--tch-radius-pill);
	width:100%;
	text-transform:uppercase;
	text-decoration:none;
	background:var(--tch-surface);
	transition:background .15s ease, color .15s ease;
}
.BundleList .ProList .CartBTNL:hover{background:var(--tch-brand); color:#fff;}

/* ── Infinite-scroll loading UI (hooks: #loadingMore, .skeleton-card) ── */
.loading-dots{text-align:center;}
.loading-dots span{animation:blink 1.4s infinite both;}
.loading-dots span:nth-child(2){animation-delay:.2s;}
.loading-dots span:nth-child(3){animation-delay:.4s;}
@keyframes blink{0%,20%{color:transparent;} 50%{color:var(--tch-ink);}}

.pre-loader-container{position:relative; width:100%; height:4px; background-color:var(--tch-hover-bg); overflow:hidden;}

.skeleton-card{background-color:var(--tch-hover-bg); position:relative; overflow:hidden;}
.skeleton-card::before{
	content:"";
	position:absolute;
	top:0;
	left:-150px;
	width:150px;
	height:100%;
	background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
	animation:shimmer 1.2s infinite;
}
@keyframes shimmer{0%{left:-150px;} 100%{left:100%;}}

.spinner{
	border:4px solid var(--tch-line);
	width:36px;
	height:36px;
	border-radius:50%;
	border-left-color:var(--tch-brand);
	animation:spin 1s ease infinite;
	margin:0 auto;
}
@keyframes spin{0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);}}

/* ── Responsive ── */
@media only screen and (max-width:1220px){
	.ItemShowcase{background:var(--tch-ink); padding:var(--tch-space-6) 0;}
	.ItemShowcase h1{display:block; max-width:100%; text-align:center; margin:0 0 var(--tch-space-4);}
	.ItemShowcase figure{float:none; margin:0 auto;}
	.BundleItems h2{text-align:center; margin-top:var(--tch-space-4);}
}
@media only screen and (max-width:780px){
	.ItemShowcase h1{font-size:var(--tch-text-lg);}
	.BundleItems h2, .ItemShowcase h1 span{font-size:var(--tch-text-md);}
	.BundleList .ProList{max-width:calc(50% - 16px); min-width:150px;}
	.BundleList .ProList .Thumb{min-height:0;}
	.BundleList .ProList .ProItemInfo{min-height:0;}
}
@media only screen and (max-width:480px){
	.BundleList .ProList{max-width:100%;}
	.ItemShowcase figure{padding:6px;}
}