/* TipTop Newsletter
   Plain: heading beside the form on light grey.
   Panel (photos set): a dark rounded card — copy, ticks and form on the left, product photos on the right. */
.tt.tt-news { background-color: var(--tt-mist); color: var(--tt-ink); padding: clamp(40px, 5vw, 72px) 0; }
.tt .tt-news__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; align-items: center; }
.tt.tt-news .tt-news__h { font-size: var(--tt-fs-h2); max-width: 18ch; color: inherit; }
.tt .tt-news__k { margin-bottom: 10px; font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tt-red); }
.tt .tt-news__intro { margin-top: 12px; max-width: 44ch; font-size: 16px; line-height: 1.55; opacity: .85; }
.tt .tt-news__ticks { display: grid; gap: 8px; margin: 18px 0 0; }
.tt .tt-news__ticks li { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.tt .tt-news__ticks svg { flex: none; width: 20px; height: 20px; padding: 3px; border-radius: 50%; background-color: var(--tt-red); color: #fff; }
.tt .tt-news__form { display: flex; gap: 10px; }
.tt.tt-news input[type="email"] { flex: 1; min-width: 0; height: 56px; padding: 0 18px; border: 1px solid #cfcfcf; border-radius: var(--tt-r); font-family: var(--tt-font-sans); font-size: 16px; color: var(--tt-ink); background-color: #fff; box-shadow: none; }
.tt.tt-news input[type="email"]:focus { outline: 2px solid var(--tt-red); outline-offset: 2px; }
.tt.tt-news input[aria-invalid="true"] { border-color: var(--tt-red); }
.tt.tt-news .tt-btn--solid { min-height: 56px; background-color: var(--tt-red); border-color: var(--tt-red); color: #fff; }
.tt.tt-news .tt-btn--solid:hover { background-color: var(--tt-red-deep); border-color: var(--tt-red-deep); }
.tt .tt-news__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.tt .tt-news__msg { margin-top: 10px; font-size: 15px; font-weight: 700; }
.tt .tt-news__msg:empty { display: none; }
.tt .tt-news__msg.is-error { color: #c5281c; }
.tt.tt-news small { display: block; margin-top: 12px; font-size: 13px; opacity: .7; }
.tt.tt-news small a { color: inherit; }

/* panel */
.tt.tt-news.is-panel { background-color: #fff; }
.tt.tt-news.is-panel .tt-news__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 0; overflow: hidden; border-radius: 16px; background-color: var(--tt-ink); color: #fff; }
.tt.tt-news.is-panel .tt-news__copy { padding: clamp(28px, 4vw, 64px); }
.tt.tt-news.is-panel .tt-news__formwrap { margin-top: 26px; max-width: 520px; }
.tt.tt-news.is-panel input[type="email"] { border-color: #fff; }
.tt .tt-news__pics { align-self: stretch; display: grid; grid-template-columns: repeat(var(--tt-n, 3), minmax(0, 1fr)); align-content: center; gap: 10px; padding: clamp(16px, 2vw, 28px); background-color: #1d1d1d; }
.tt .tt-news__pics span { position: relative; overflow: hidden; border-radius: 10px; background-color: var(--tt-mist); aspect-ratio: 1; }
.tt .tt-news__pics span:nth-child(2) { transform: translateY(18px); }
/* One photo: it fills the whole right side. */
.tt .tt-news__pics[style*="--tt-n:1"] { display: block; position: relative; padding: 0; min-height: 360px; }
.tt .tt-news__pics[style*="--tt-n:1"] span { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; }
.tt .tt-news__pics[style*="--tt-n:1"] img { object-fit: cover; object-position: 72% 20%; }
.tt .tt-news__pics img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; } /* packshots sit on the tile's own grey */

@media (max-width: 960px) {
	.tt .tt-news__grid, .tt.tt-news.is-panel .tt-news__grid { grid-template-columns: minmax(0, 1fr); }
	.tt .tt-news__pics { order: -1; min-height: 0; padding: 14px; }
	.tt .tt-news__pics span { min-height: 0; aspect-ratio: 1; }
	.tt .tt-news__pics span:nth-child(2) { transform: none; }
	.tt .tt-news__pics[style*="--tt-n:1"] { min-height: 0; aspect-ratio: 16 / 10; }
}
@media (max-width: 600px) {
	.tt .tt-news__form { flex-direction: column; }
	/* stacked: flex: 1 would collapse the field's height */
	.tt.tt-news input[type="email"] { flex: none; width: 100%; }
	.tt.tt-news.is-panel .tt-news__grid { border-radius: 12px; }
}