/* /style/luxury-brand.css */ 

/* luxuryBrand.php — "Platinum Edition Brands" showcase, restyled onto UI v2 "Warm
   Modern" tokens (headerStyle.php :root). UI v2 Phase 6 (2026-07-23): this page
   retired its parallel headerLuxury.php chrome in favor of the shared header.php —
   HeaderHTML::getFullMenuLuxuryItem rendered the exact same category set as the
   main menu (include/Html/HeaderHTML.php), just with different markup/dark-gold
   styling and fewer features (no "Shop By Brands" dropdown, no "New Arrivals"),
   so the parallel chrome was cosmetic/legacy only, not a functional requirement.
   headerLuxury.php and the shared style/luxury.css it links stay in place UNEDITED:
   listItem.php and ViewItem.php still include headerLuxury.php for their own
   $isLuxuryBrand product views (out of scope for this change) — so this page gets
   its own small stylesheet instead of touching the shared one. Buttons/breadcrumbs
   use the global .tch-btn / .tch-crumbs components (style/components.css); only
   this page's own hero + brand-grid content is styled here. No /style/min/ twin —
   the combiner falls back to this source (design-system.md rule #5). */

.Main{ background:var(--tch-ink); color:var(--tch-on-dark); min-height:60vh; padding:var(--tch-space-7) 0; }
.LuxuryContainer{ max-width:var(--tch-container); margin:0 auto; padding:0 var(--tch-space-5); box-sizing:border-box; }

.LuxuryContainer .tch-crumbs{ color:rgba(246,233,220,.7); margin-bottom:var(--tch-space-6); }
.LuxuryContainer .tch-crumbs a{ color:rgba(246,233,220,.85); }
.LuxuryContainer .tch-crumbs a:hover{ color:#fff; }
.LuxuryContainer .tch-crumbs li+li::before{ color:rgba(246,233,220,.4); }
.LuxuryContainer .tch-crumbs [aria-current]{ color:#fff; }

.PlatinumBrands{
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
	gap:var(--tch-space-5);
}
.Brandinfo{
	max-width:none; width:auto; margin:0;
	display:flex; flex-direction:column;
	background:rgba(255,255,255,.04);
	border:1px solid rgba(246,233,220,.14);
	border-radius:var(--tch-radius-lg);
	padding:var(--tch-space-4);
	transition:border-color .18s ease, transform .18s ease;
}
.Brandinfo:hover{ border-color:var(--tch-star); transform:translateY(-2px); }
.Brandinfo figure{
	margin:0 0 var(--tch-space-4); max-width:none; line-height:0;
	border:1px solid rgba(246,233,220,.14); border-radius:var(--tch-radius);
	background:#fff; overflow:hidden;
}
.Brandinfo h2{ font-family:var(--tch-font-display); font-weight:500; font-size:var(--tch-text-lg); line-height:1.25; color:#fff; margin:0 0 var(--tch-space-2); }
.Brandinfo h2 span{ display:block; font-family:var(--tch-font-body); font-size:var(--tch-text-xs); font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--tch-star); margin-bottom:4px; }
.Brandinfo h2 a{ color:#fff; }
.Brandinfo p{ font-size:var(--tch-text-sm); line-height:1.6; color:rgba(246,233,220,.75); margin:0 0 var(--tch-space-4); }
.Brandinfo .tch-btn{ width:100%; margin-top:auto; }

.LuxuryContainer .Pagination{ margin-top:var(--tch-space-7); }
.LuxuryContainer .Pagination ul{ display:flex; align-items:center; justify-content:center; gap:6px; margin:0; padding:0; }
.LuxuryContainer .Pagination ul li{ list-style:none; }
.LuxuryContainer .Pagination ul li a{
	display:inline-flex; align-items:center; justify-content:center;
	min-width:38px; height:38px; padding:0 10px; border-radius:var(--tch-radius);
	border:1px solid rgba(246,233,220,.2); color:rgba(246,233,220,.85);
	text-decoration:none; font-size:14px;
}
.LuxuryContainer .Pagination ul li a:hover{ border-color:var(--tch-star); color:#fff; }

/* Hero strip — kept out of flow via inline style="display:none" on the <section>
   (was already hidden before this change); restyled here for parity should it
   ever be re-enabled. */
.BrandShowcase{ background:var(--tch-ink); color:#fff; }
.BrandShowcase .ShowcaseInfo{ display:flex; align-items:center; gap:var(--tch-space-6); max-width:var(--tch-container); margin:0 auto; padding:var(--tch-space-6) var(--tch-space-5); }
.BrandShowcase .ThumbLogo img{ border-radius:var(--tch-radius); border:1px solid rgba(246,233,220,.14); }
.BrandShowcase .ShowcaseInfoText h1{ font-family:var(--tch-font-display); font-weight:500; font-size:var(--tch-text-2xl); margin:0 0 var(--tch-space-2); }
.BrandShowcase .ShowcaseInfoText h1 span{ display:block; font-family:var(--tch-font-body); font-size:var(--tch-text-xs); font-weight:600; text-transform:uppercase; letter-spacing:.06em; color:var(--tch-star); }
.BrandShowcase .ShowcaseInfoText p{ color:rgba(246,233,220,.8); line-height:1.6; max-width:640px; }
.BrandShowcase figure{ margin:0; max-width:640px; }
.BrandShowcase figure img{ max-width:100%; display:block; }

@media (max-width:767px){
	.Main{ padding:var(--tch-space-5) 0; }
	.LuxuryContainer{ padding:0 var(--tch-space-4); }
	.BrandShowcase .ShowcaseInfo{ flex-direction:column; text-align:center; }
}