/**
 * ToyTool — homepage sections.
 * Mobile-first.
 */

.tt-section-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.5rem; }
.tt-section-header h2 { margin: 0; }

/* ---------- Hero ---------- */
.tt-hero { background: linear-gradient(120deg, var(--tt-light-blue) 0%, var(--tt-light-purple) 100%); }
.tt-hero__inner { display: flex; flex-direction: column; align-items: center; gap: 2rem; padding-block: 2.5rem; text-align: center; }
.tt-hero__content { max-width: 520px; }
.tt-hero__content h1 { font-size: clamp(2.25rem, 6vw + 1rem, 3.5rem); }
.tt-hero__content p { color: var(--tt-muted); margin-bottom: 1.5rem; }
.tt-hero__media { width: 100%; max-width: 480px; }
@media (min-width: 1024px) {
	.tt-hero__inner { flex-direction: row; text-align: left; padding-block: 5rem; justify-content: space-between; }
	.tt-hero__content { max-width: 480px; }
	.tt-hero__media { max-width: 45%; }
}

/* ---------- Promo cards ---------- */
.tt-promo-cards__grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 768px) { .tt-promo-cards__grid { grid-template-columns: repeat(3, 1fr); } }
.tt-promo-card {
	background: var(--tt-light-blue);
	padding: 1.75rem 1.75rem 0;
	position: relative;
	overflow: hidden;
	min-height: 280px;
	display: flex;
	flex-direction: column;
}
.tt-promo-card:nth-child(2n) { background: var(--tt-light-purple); }
.tt-promo-card__label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tt-muted); }
.tt-promo-card__heading { font-size: 1.25rem; margin-block: 0.4rem 0.5rem; }
.tt-promo-card__text { color: var(--tt-muted); font-size: 0.875rem; max-width: 22ch; margin-bottom: 1.25rem; }
.tt-promo-card .tt-button { align-self: flex-start; }
.tt-promo-card__media {
	max-width: 80%;
	margin-inline: auto;
	margin-top: auto;
}
.tt-promo-card__media img { display: block; margin-inline: auto; }

/* ---------- Smart Home banner ----------
   Background/radius/padding used to live here, making this a dark card
   inset inside a white .tt-section — now a full-bleed
   .tt-section--contrast (base.css) wraps this in the template, so this
   is just the media+content layout inside that section's .tt-container. */
.tt-smart-home-banner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
}
.tt-smart-home-banner__media { max-width: 280px; }
.tt-smart-home-banner__content { text-align: center; max-width: 420px; }
.tt-smart-home-banner__content h2 { color: #fff; }
.tt-smart-home-banner__content p { color: rgba(255,255,255,0.7); margin-bottom: 1.5rem; }
@media (min-width: 1024px) {
	.tt-smart-home-banner { flex-direction: row; justify-content: space-between; text-align: left; }
	.tt-smart-home-banner__content { text-align: left; }
}

/* ---------- Carousel (Best Sellers) ---------- */
.tt-carousel-controls { display: flex; gap: 0.5rem; }
.tt-carousel-controls .tt-icon-button { background: var(--tt-light-background); }
.tt-carousel {
	display: flex;
	gap: 1.25rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	padding-bottom: 0.5rem;
}
.tt-carousel::-webkit-scrollbar { display: none; }
.tt-carousel__item { flex: 0 0 auto; width: 180px; scroll-snap-align: start; }
@media (min-width: 640px) { .tt-carousel__item { width: 220px; } }

/* ---------- Branded products ---------- */
.tt-branded__grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
.tt-branded-card { padding: 1.75rem 1.75rem 0; background: var(--tt-light-blue); display: flex; flex-direction: column; overflow: hidden; min-height: 240px; }
.tt-branded-card:nth-child(2) { background: var(--tt-light-purple); }
.tt-branded-card:nth-child(3), .tt-branded-card:nth-child(4) { background: var(--tt-light-blue); min-height: 200px; }
.tt-branded-card__content h3 { margin-bottom: 0.4rem; }
.tt-branded-card__content p { color: var(--tt-muted); font-size: 0.875rem; max-width: 24ch; margin-bottom: 1.25rem; }
.tt-branded-card__media { max-width: 75%; margin-inline: auto; margin-top: auto; }
.tt-branded-card__media img { display: block; margin-inline: auto; }
@media (min-width: 768px) {
	.tt-branded__grid { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); }
	.tt-branded-card--1 { grid-column: 1; grid-row: 1 / 3; }
	.tt-branded-card--2 { grid-column: 2; grid-row: 1 / 3; }
	.tt-branded-card--3 { grid-column: 3; grid-row: 1; }
	.tt-branded-card--4 { grid-column: 3; grid-row: 2; }
}

/* ---------- Sale banner ---------- */
.tt-sale-banner {
	background: linear-gradient(120deg, #7F1D1D 0%, #450A0A 100%);
	color: #fff;
	border-radius: var(--tt-radius-lg);
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	align-items: center;
	text-align: center;
}
.tt-sale-banner__timer { display: flex; gap: 0.75rem; }
.tt-sale-banner__timer > div { background: rgba(255,255,255,0.12); border-radius: var(--tt-radius-sm); padding: 0.5rem 0.75rem; min-width: 52px; text-align: center; }
.tt-sale-banner__timer span { display: block; font-size: 1.25rem; font-weight: 700; font-family: var(--tt-font-heading); }
.tt-sale-banner__timer small { display: block; font-size: 0.625rem; text-transform: uppercase; opacity: 0.7; }
.tt-sale-banner__content h2 { color: #fff; margin-bottom: 0.35rem; }
.tt-sale-banner__content p { color: rgba(255,255,255,0.75); max-width: 46ch; margin: 0; }
@media (min-width: 1024px) {
	.tt-sale-banner { flex-direction: row; justify-content: space-between; text-align: left; padding: 1.5rem 2.5rem; }
}

/* ---------- Shop by category ---------- */
.tt-category-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
@media (min-width: 640px) { .tt-category-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .tt-category-grid { grid-template-columns: repeat(5, 1fr); } }
.tt-category-tile { text-align: center; color: var(--tt-text); }
.tt-category-tile__media {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	border-radius: var(--tt-radius-lg);
	background-color: var(--tt-light-background);
	background-size: cover;
	background-position: center;
	color: var(--tt-muted);
	margin-bottom: 0.75rem;
}
.tt-category-tile__name { display: block; font-weight: 600; font-size: 0.9375rem; }
.tt-category-tile__count { display: block; color: var(--tt-muted); font-size: 0.8125rem; }

/* ---------- Benefits ---------- */
.tt-benefits__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; background: var(--tt-light-background); border-radius: var(--tt-radius-lg); padding: 1.5rem; }
@media (min-width: 768px) { .tt-benefits__grid { grid-template-columns: repeat(4, 1fr); } }
.tt-benefit { display: flex; align-items: center; gap: 0.75rem; }
.tt-benefit__icon { color: var(--tt-primary); flex-shrink: 0; }
.tt-benefit strong { display: block; font-size: 0.875rem; color: var(--tt-heading); }
.tt-benefit small { display: block; font-size: 0.75rem; color: var(--tt-muted); }

.tt-empty { color: var(--tt-muted); grid-column: 1 / -1; }