/* Family shirt builder */

.tws-builder {
	--red: #b3122e;
	--red-dark: #8a0d22;
	--pine: #1f4d3a;
	--ink: #2b211d;
	--muted: #6f625a;
	--line: #e6dccd;
	--card: #ffffff;
	--radius: 18px;
	margin-top: 1.5rem;
	color: var(--ink);
}
.tws-builder *, .tws-builder *::before, .tws-builder *::after { box-sizing: border-box; }
.tws-builder__loading { text-align: center; color: var(--muted); }

.tws-builder__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	gap: clamp(1rem, 3vw, 2rem);
	align-items: start;
}
@media (max-width: 860px) {
	.tws-builder__grid { grid-template-columns: 1fr; }
	.tws-stage { order: -1; }
}

/* Steps */
.tws-step {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: clamp(1rem, 2.5vw, 1.5rem);
	margin-bottom: 1rem;
	box-shadow: 0 1px 2px rgba(43, 33, 29, .04), 0 8px 24px rgba(43, 33, 29, .05);
}
.tws-step__title {
	display: flex;
	align-items: center;
	gap: .6rem;
	margin: 0 0 1rem;
	font-size: 1.6rem;
}
.tws-step__num {
	display: inline-grid;
	place-items: center;
	width: 1.7rem;
	height: 1.7rem;
	border-radius: 50%;
	background: var(--red);
	color: #fff;
	font-size: 1.1rem;
	line-height: 1;
}

.tws-grid2 { display: grid; grid-template-columns: 1fr 7rem; gap: .75rem; }
.tws-field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .9rem; font-weight: 600; font-size: .92rem; }
.tws-color-name { color: var(--muted); font-weight: 500; }

.tws-builder input[type="text"],
.tws-builder input[type="number"],
.tws-builder select {
	width: 100%;
	font: inherit;
	font-weight: 500;
	color: var(--ink);
	background: #fff;
	border: 1.5px solid var(--line);
	border-radius: 12px;
	padding: .65rem .8rem;
	min-height: 2.9rem;
	transition: border-color .15s, box-shadow .15s;
}
.tws-builder input:focus,
.tws-builder select:focus {
	outline: none;
	border-color: var(--red);
	box-shadow: 0 0 0 3px rgba(179, 18, 46, .15);
}

/* Color swatches */
.tws-swatches { display: flex; flex-wrap: wrap; gap: .55rem; }
.tws-swatch {
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	border: 2px solid rgba(0, 0, 0, .12);
	background: var(--sw);
	cursor: pointer;
	padding: 0;
	transition: transform .12s;
}
.tws-swatch:hover { transform: scale(1.08); }
.tws-swatch.is-on { box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--red); }

/* Design picker */
.tws-designs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.tws-design {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .35rem;
	padding: .55rem .4rem .5rem;
	border: 2px solid var(--line);
	border-radius: 14px;
	background: #fff;
	color: var(--ink);
	font: inherit;
	font-size: .85rem;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color .12s, transform .12s;
}
.tws-design:hover { transform: translateY(-2px); }
.tws-design.is-on { border-color: var(--red); box-shadow: 0 0 0 3px rgba(179, 18, 46, .14); }
.tws-design .tws-tee { max-width: 110px; }
.tws-design .tws-tee svg { filter: none; }
.tws-design__name { text-align: center; }
@media (max-width: 420px) {
	.tws-designs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Member cards */
.tws-members { display: flex; flex-direction: column; gap: .8rem; }
.tws-member {
	position: relative;
	display: grid;
	grid-template-columns: 88px minmax(0, 1fr);
	gap: .9rem;
	padding: .9rem;
	border: 1.5px solid var(--line);
	border-radius: 16px;
	background: #fffdf9;
	transition: border-color .15s, background .15s;
}
.tws-member.is-active { border-color: var(--red); background: #fff; }
.tws-member__thumb {
	all: unset;
	cursor: pointer;
	align-self: start;
	border-radius: 12px;
	background: #f3ece2;
	padding: 4px;
}
.tws-member__thumb:focus-visible { outline: 3px solid var(--red); }
.tws-member__fields { display: flex; flex-direction: column; gap: .55rem; min-width: 0; }
.tws-member__top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; padding-right: 1.6rem; }
.tws-member__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem .75rem; }
.tws-member__price { font-weight: 700; font-size: 1.05rem; }
.tws-member__remove {
	position: absolute;
	top: .45rem;
	right: .45rem;
	width: 1.9rem;
	height: 1.9rem;
	border-radius: 50%;
	border: 0;
	background: transparent;
	color: var(--muted);
	font-size: 1.4rem;
	line-height: 1;
	cursor: pointer;
}
.tws-member__remove:hover { background: #f3e6e6; color: var(--red); }
@media (max-width: 520px) {
	/* Thumbnail beside the name; everything else uses the full card width. */
	.tws-member { grid-template-columns: 72px minmax(0, 1fr); row-gap: .6rem; }
	.tws-member__fields { display: contents; }
	.tws-member__top { display: contents; }
	.tws-member__top > input { grid-column: 2; grid-row: 1; align-self: center; width: calc(100% - 1.6rem); }
	.tws-member__thumb { grid-row: 1; }
	.tws-member__fields > :not(.tws-member__top) { grid-column: 1 / -1; }
	.tws-seg { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, 1fr); }
	.tws-seg__btn { padding: .45rem .2rem; }
}

.tws-seg { display: inline-flex; background: #f3ece2; border-radius: 12px; padding: 3px; gap: 2px; flex-wrap: wrap; }
.tws-seg__btn {
	border: 0;
	background: transparent;
	font: inherit;
	font-size: .85rem;
	font-weight: 600;
	padding: .45rem .7rem;
	border-radius: 9px;
	cursor: pointer;
	color: var(--muted);
}
.tws-seg__btn.is-on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }

.tws-line { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .5rem; }
.tws-line__label { font-family: Lobster, Georgia, serif; color: var(--red); font-size: 1.15rem; white-space: nowrap; }
@media (max-width: 520px) {
	.tws-line { grid-template-columns: minmax(0, 1fr) auto; }
	.tws-line__label { grid-column: 1 / -1; }
}
.tws-custom.is-hidden { display: none; }
.tws-inline { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .9rem; }
.tws-inline select { width: auto; min-width: 7rem; }
.tws-note { margin: 0; font-size: .85rem; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.tws-note select { width: auto; min-height: 2.2rem; padding: .3rem .5rem; }

.tws-add-label { margin: 1rem 0 .4rem; font-weight: 600; font-size: .9rem; }
.tws-add-row { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Buttons */
.tws-btn {
	font: inherit;
	font-weight: 700;
	border-radius: 999px;
	padding: .65rem 1.1rem;
	cursor: pointer;
	border: 1.5px solid transparent;
	transition: background .15s, color .15s, border-color .15s;
}
.tws-btn--primary { background: var(--red); color: #fff; padding: .9rem 1.8rem; font-size: 1.05rem; }
.tws-btn--primary:hover { background: var(--red-dark); }
.tws-btn--primary:disabled { opacity: .6; cursor: wait; }
.tws-btn--ghost { background: #fff; border-color: var(--line); color: var(--ink); }
.tws-btn--ghost:hover { border-color: var(--red); color: var(--red); }
.tws-btn--light { background: #fff; border-color: var(--line); color: var(--ink); width: 100%; margin-top: .75rem; }
.tws-btn--light:hover { border-color: var(--pine); color: var(--pine); }
.tws-btn--icon { background: #f3ece2; color: var(--ink); font-size: .85rem; padding: .6rem .8rem; }
.tws-btn--icon:hover { background: #ead9c8; }

/* Shirt preview */
.tws-tee { position: relative; width: 100%; }
.tws-tee svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 10px 18px rgba(43, 33, 29, .14)); }
.tws-tee__design { position: absolute; height: auto; pointer-events: none; transition: opacity .2s; }
.tws-tee__design:not([src]) { opacity: 0; }
.tws-tee.is-loading .tws-tee__design { opacity: .55; }
.tws-tee--thumb svg { filter: none; }

.tws-stage {
	position: sticky;
	top: 6rem;
	background: linear-gradient(180deg, #fff 0%, #fbf6ef 100%);
	border: 1px solid var(--line);
	border-radius: 24px;
	padding: clamp(1rem, 3vw, 2rem);
	text-align: center;
}
.tws-stage__caption { margin: .5rem 0 .75rem; color: var(--muted); font-weight: 600; font-size: .92rem; }
.tws-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.tws-chip {
	font: inherit;
	font-size: .8rem;
	font-weight: 600;
	border: 1.5px solid var(--line);
	background: #fff;
	color: var(--muted);
	border-radius: 999px;
	padding: .3rem .75rem;
	cursor: pointer;
}
.tws-chip.is-on { border-color: var(--red); color: var(--red); }
@media (max-width: 860px) {
	.tws-stage { position: relative; top: 0; }
	.tws-tee--stage { max-width: 340px; margin-inline: auto; }
}

/* Checkout bar */
.tws-bar {
	position: sticky;
	bottom: .75rem;
	z-index: 40;
	margin-top: 1rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	background: var(--ink);
	color: #fff;
	border-radius: 999px;
	padding: .6rem .6rem .6rem 1.5rem;
	box-shadow: 0 12px 30px rgba(43, 33, 29, .25);
}
.tws-bar__sum { display: flex; align-items: baseline; gap: .75rem; }
.tws-bar__count { color: #d9cbbb; font-weight: 600; }
.tws-bar__total { font-size: 1.5rem; font-family: "Bebas Neue", Impact, sans-serif; font-weight: 400; letter-spacing: .02em; }
.tws-bar__msg { min-height: 1.4rem; text-align: center; font-weight: 600; margin: .6rem 0 0; color: var(--pine); }
.tws-bar__msg.is-error { color: var(--red); }

/* Hero lineup */
.tws-lineup {
	display: flex;
	align-items: flex-end;
	justify-content: center;
	gap: 0;
	padding: 1rem 0;
}
.tws-tee--lineup { flex: 0 0 auto; margin: 0 -1.2%; }
.tws-tee--lineup:nth-child(2) { z-index: 1; }

/* Sample photo modal */
.tws-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	background: rgba(20, 14, 12, .6);
	padding: 1rem;
}
.tws-modal__box {
	position: relative;
	background: #fff;
	border-radius: 20px;
	padding: 1.25rem;
	width: min(560px, 100%);
	max-height: 92vh;
	overflow: auto;
}
.tws-modal__close {
	position: absolute;
	top: .5rem;
	right: .5rem;
	width: 2.2rem;
	height: 2.2rem;
	border: 0;
	border-radius: 50%;
	background: #f3ece2;
	font-size: 1.4rem;
	cursor: pointer;
}
.tws-mock { text-align: center; padding: 1rem .5rem .25rem; }
.tws-mock img { width: 100%; height: auto; border-radius: 12px; }
.tws-mock__cap { color: var(--muted); font-size: .85rem; }
.tws-spinner {
	width: 42px;
	height: 42px;
	margin: 1rem auto;
	border-radius: 50%;
	border: 4px solid #f0e3d6;
	border-top-color: var(--red);
	animation: tws-spin .8s linear infinite;
}
@keyframes tws-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.tws-spinner { animation-duration: 3s; }
	.tws-swatch, .tws-tee__design, .tws-design { transition: none; }
}