/* Homepage Compact Commerce V2: homepage-only layout density. */
body.tkl-home-v2 { overflow-x: clip; }

.tkl-home-featured__grid,
.tkl-home-category-recent__grid,
.tkl-commerce-home__grid {
	display: grid;
	gap: 18px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tkl-home-category-recent { background: #fff; }
.tkl-home-category-recent__groups { display: grid; gap: 52px; }
.tkl-home-category-recent__group { min-width: 0; }
.tkl-home-category-recent__group-heading {
	align-items: center;
	display: flex;
	gap: 16px;
	justify-content: space-between;
	margin: 0 0 16px;
}
.tkl-home-category-recent__group-heading > h3 {
	border-left: 5px solid #6d28d9;
	color: #090909;
	font-size: 24px;
	font-weight: 900;
	line-height: 1.35;
	margin: 0;
	padding-left: 10px;
}
.tkl-home-category-recent__group-heading > h3 a { color: inherit; text-decoration: none; }
.tkl-home-category-recent__more {
	align-items: center;
	border: 2px solid #171717;
	border-radius: 999px;
	color: #fff !important;
	display: inline-flex;
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 900;
	justify-content: center;
	line-height: 1.2;
	padding: 9px 14px;
	text-decoration: none !important;
	background: linear-gradient(135deg, #5b21d5, #7c3aed);
}
.tkl-home-category-recent__more:hover { box-shadow: 4px 4px 0 #fbd56a; transform: translate(-2px, -2px); }
.tkl-home-category-recent__emoji { margin-right: 6px; }
.tkl-home-category-recent__grid .tkl-home-card__media { background: #fff; }
.tkl-home-category-recent__grid .tkl-home-card__image { object-fit: contain; }

.tkl-commerce-home__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tkl-commerce-home-card { display: flex; flex-direction: column; }
.tkl-commerce-home-card__body { display: flex; flex: 1; flex-direction: column; }
.tkl-commerce-home-card h3 { font-size: 15px; }
.tkl-commerce-home-card__price { font-size: 20px; }
.tkl-commerce-home-card__actions { margin-top: auto; padding-top: 14px; }

.tkl-commerce-select { background:#fff; }
.tkl-commerce-select__intro { color:#4f4a57; font-size:15px; font-weight:700; margin:0 0 22px; }
.tkl-commerce-select__grid { display:grid; gap:16px; grid-template-columns:repeat(5,minmax(0,1fr)); }
.tkl-commerce-select__card { border:2px solid #090909; color:#090909 !important; display:block; min-width:0; text-decoration:none !important; }
.tkl-commerce-select__card:hover { border-color:#6d28d9; box-shadow:5px 5px 0 #fbd56a; }
.tkl-commerce-select__number,
.tkl-commerce-ranking__rank {
  align-items:center;
  background:#6d28d9 !important;
  border:2px solid #fff;
  border-radius:999px;
  box-shadow:2px 3px 0 #171717;
  color:#fff !important;
  display:inline-flex;
  font-size:13px;
  font-weight:950;
  left:10px;
  letter-spacing:.02em;
  line-height:1;
  min-height:31px;
  padding:6px 10px;
  position:absolute;
  top:10px;
  z-index:3;
}
.tkl-commerce-select__card { position:relative; }
.tkl-commerce-select__media { aspect-ratio:1 / 1; background:#faf8ff; display:flex; overflow:hidden; padding:14px; }
.tkl-commerce-select__media img { height:100%; object-fit:contain; width:100%; }
.tkl-commerce-select__fallback { align-items:center; color:#6d28d9; display:flex; font-size:13px; font-weight:950; justify-content:center; text-align:center; width:100%; }
.tkl-commerce-select__body { display:block; padding:12px; }
.tkl-commerce-select__body strong { -webkit-box-orient:vertical; -webkit-line-clamp:2; display:-webkit-box; font-size:13px; line-height:1.45; overflow:hidden; }
.tkl-commerce-select__body span { color:#6d28d9; display:block; font-size:11px; font-weight:900; margin-top:10px; }
.tkl-commerce-disclosure { border:0; margin-top:24px; }
.tkl-commerce-disclosure summary { align-items:center; background:linear-gradient(135deg,#5b21d5,#7c3aed); border:2px solid #171717; box-shadow:5px 5px 0 #fbd56a; color:#fff; cursor:pointer; display:flex; font-size:17px; font-weight:950; justify-content:space-between; letter-spacing:.02em; list-style:none; padding:7px 16px; }
.tkl-commerce-disclosure summary::-webkit-details-marker { display:none; }
.tkl-commerce-disclosure summary::after { align-items:center; background:#fff; border-radius:999px; color:#6d28d9; content:'＋'; display:inline-flex; font-size:19px; font-weight:950; height:23px; justify-content:center; line-height:1; width:23px; }
.tkl-commerce-disclosure[open] summary { box-shadow:3px 3px 0 #fbd56a; }
.tkl-commerce-disclosure[open] summary::after { content:'−'; }
.tkl-commerce-disclosure .tkl-commerce-select__grid,.tkl-commerce-disclosure .tkl-commerce-ranking__list { border:2px solid #171717; border-top:0; padding:16px; }
.tkl-commerce-ranking { background: #fff; }
.tkl-commerce-ranking__list {
	border: 0;
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}
.tkl-commerce-ranking__card {
	background: #fff;
	border: 2px solid #090909;
	border-radius: 0 !important;
	color: #090909 !important;
	display: block;
	min-width: 0;
	position: relative;
	text-decoration: none !important;
}
.tkl-commerce-ranking__card:hover { border-color: #6d28d9; box-shadow: 5px 5px 0 #fbd56a; }
.tkl-commerce-ranking__image {
	aspect-ratio: 1 / 1;
	background: #faf8ff;
	display: block;
	overflow: hidden;
	padding: 22px;
}
.tkl-commerce-ranking__image img { display: block; height: 100%; object-fit: contain; width: 100%; }

@media (max-width: 768px) {
	.tkl-home-featured__grid,
	.tkl-home-category-recent__grid,
	.tkl-commerce-home__grid,
	.tkl-commerce-select__grid,
	.tkl-commerce-ranking__list {
		display: flex;
		gap: 12px;
		overflow-x: auto;
		overflow-y: hidden;
		padding: 0 16px 4px 0;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
	}
	.tkl-home-featured__grid::-webkit-scrollbar,
	.tkl-home-category-recent__grid::-webkit-scrollbar,
	.tkl-commerce-home__grid::-webkit-scrollbar,
	.tkl-commerce-ranking__list::-webkit-scrollbar { display: none; }
	.tkl-home-featured__grid > *,
	.tkl-commerce-home__grid > * {
		flex: 0 0 86%;
		scroll-snap-align: start;
	}
	.tkl-commerce-select__grid > * { flex:0 0 72%; scroll-snap-align:start; }
	.tkl-commerce-select__media { padding:12px; }
	.tkl-commerce-select__body { padding:10px; }
	.tkl-commerce-select__body strong { font-size:13px; }
	.tkl-commerce-select__number,
	.tkl-commerce-ranking__rank { font-size:11px; left:7px; min-height:27px; padding:5px 8px; top:7px; }
	.tkl-commerce-disclosure summary { font-size:15px; padding:7px 12px; }
	.tkl-home-category-recent__grid > * { flex: 0 0 88%; scroll-snap-align: start; }
	.tkl-home-featured__grid .tkl-home-card__body,
	.tkl-home-category-recent__grid .tkl-home-card__body { padding: 16px; }
	.tkl-home-featured__grid .tkl-home-card__title,
	.tkl-home-category-recent__grid .tkl-home-card__title { font-size: 16px; -webkit-line-clamp: 3; }
	.tkl-home-featured__grid .tkl-home-card__date,
	.tkl-home-category-recent__grid .tkl-home-card__date { font-size: 11px; }
	.tkl-home-category-recent__groups { gap: 46px; }
	.tkl-home-category-recent__group-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
	.tkl-home-category-recent__group-heading > h3 { font-size: 22px; }
	.tkl-home-category-recent__more { font-size: 12px; padding: 8px 12px; }
	.tkl-commerce-home .tkl-home-section-heading h2 { font-size: 26px; letter-spacing: -0.025em; }
	.tkl-commerce-home-card__media { aspect-ratio: 1 / 1; }
	.tkl-commerce-home-card__image { padding: 14px; }
	.tkl-commerce-home-card__body { padding: 16px; }
	.tkl-commerce-home-card__brand { font-size: 11px; }
	.tkl-commerce-home-card h3 { font-size: 16px; line-height: 1.45; }
	.tkl-commerce-home-card__stats { gap: 6px; margin-top: 10px; }
	.tkl-commerce-home-card__stats span { font-size: 11px; }
	.tkl-commerce-home-card__price { font-size: 20px; margin-top: 10px; }
	.tkl-commerce-home-card__actions { gap: 8px; margin-top: auto; padding-top: 14px; }
	.tkl-commerce-home-card__detail,
	.tkl-commerce-home-card__shop { font-size: 12px; line-height: 1.3; min-height: 42px; padding: 8px; text-align: center; }
	.tkl-commerce-home-card__captured { font-size: 10px; line-height: 1.2; }
	.tkl-commerce-home-card__sold { bottom: 8px; font-size: 10px; left: 8px; padding: 4px 6px; }
	.tkl-commerce-ranking__list > * { flex:0 0 calc((100% - 24px) / 2.25); scroll-snap-align:start; }
	.tkl-commerce-ranking__image { padding: 12px; }
}