
.tccp-wrap{margin:32px 0;padding:28px;border:1px solid #dedede;border-radius:20px;background:#fff}
.tccp-intro{text-align:center;margin-bottom:24px}
.tccp-intro h2{margin:4px 0 8px}
.tccp-eyebrow{margin:0 0 5px;text-transform:uppercase;letter-spacing:.08em;font-size:12px;font-weight:700;opacity:.65}
.tccp-progress{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin:0 0 28px;padding:0;list-style:none}
.tccp-progress li{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;color:#888;font-size:12px}
.tccp-progress li span{display:flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:50%;border:1px solid #ccc;background:#fff}
.tccp-progress li.is-active{color:#111}
.tccp-progress li.is-active span,.tccp-progress li.is-complete span{background:#111;color:#fff;border-color:#111}
.tccp-step{display:none}
.tccp-step.is-active{display:block}
.tccp-step-header{margin-bottom:22px}
.tccp-step-header h3,.tccp-side-header h3{margin:3px 0 6px}
.tccp-two-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.tccp-field{margin-bottom:18px}
.tccp-field label{display:block;margin-bottom:7px;font-weight:600}
.tccp-field label span{color:#b32d2e}
.tccp-field input,.tccp-field textarea{width:100%;padding:13px;border:1px solid #ccc;border-radius:10px;box-sizing:border-box;background:#fff}
.tccp-field input:focus,.tccp-field textarea:focus{border-color:#111;outline:2px solid rgba(0,0,0,.08)}
.tccp-field small{display:block;margin-top:6px;color:#777;font-size:12px}
.tccp-colour-slide input,.tccp-image-card input{position:absolute;opacity:0;pointer-events:none}
.tccp-colour-slide>span,.tccp-image-card>span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:14px;border:2px solid #ddd;border-radius:14px;text-align:center;background:#fff}
.tccp-colour-slide input:checked+span,.tccp-image-card input:checked+span{border-color:#111;box-shadow:0 0 0 1px #111}
.tccp-colour-slide img{width:100%;height:180px;object-fit:contain}
.tccp-colour-slide i{display:block;width:90px;height:90px;border-radius:50%;border:1px solid #aaa}
.tccp-colour-slide small,.tccp-image-card small{color:#777}
.tccp-carousel-arrow{width:42px;height:42px;border:1px solid #ccc;border-radius:50%;background:#fff;font-size:24px;cursor:pointer}
.tccp-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.tccp-image-card{cursor:pointer}
.tccp-image-card img{width:100%;height:170px;object-fit:contain;border-radius:9px}
.tccp-image-card em{display:flex;height:145px;align-items:center;justify-content:center;color:#777;font-size:13px}
.tccp-design-group{margin-bottom:30px}
.tccp-group-title{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.tccp-group-title strong{font-size:18px}
.tccp-group-title span{color:#666}
.tccp-side-header{display:flex;justify-content:space-between;gap:20px;align-items:flex-end;margin-bottom:20px}
.tccp-side-header>p{max-width:380px;color:#666}
.tccp-track-card{margin-bottom:16px;padding:18px;border:1px solid #e2e2e2;border-radius:14px;background:#fafafa}
.tccp-track-heading{display:flex;gap:10px;align-items:center;margin-bottom:16px}
.tccp-track-heading>span{display:flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:50%;background:#111;color:#fff;font-weight:700}
.tccp-track-heading div{display:flex;flex-direction:column}
.tccp-track-heading small{color:#777}
.tccp-confirm{display:flex;gap:10px;align-items:flex-start;padding:14px;border:1px solid #ddd;border-radius:10px}
.tccp-note,.tccp-audio-message{font-size:13px;color:#777}
.tccp-audio-message{display:block;margin-top:6px;color:#b32d2e}
.tccp-navigation{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin-top:26px;padding-top:20px;border-top:1px solid #e7e7e7}
.tccp-navigation button{padding:11px 18px;border-radius:9px;border:1px solid #111;cursor:pointer}
.tccp-back{justify-self:start;background:#fff;color:#111}
.tccp-next-step{justify-self:end;background:#111;color:#fff}
.tccp-step-count{font-size:13px;color:#666}
.tccp-navigation button:disabled{opacity:.4;cursor:not-allowed}
form.cart>.single_add_to_cart_button{display:none}
form.cart.tccp-ready>.single_add_to_cart_button{display:inline-flex}
@media(max-width:760px){
	.tccp-wrap{padding:18px}
	.tccp-progress{grid-template-columns:repeat(3,1fr);row-gap:14px}
	.tccp-two-col,.tccp-card-grid{grid-template-columns:1fr}
		.tccp-side-header{display:block}
		.tccp-carousel-arrow{width:34px;height:34px}
}

.tccp-carousel{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) 48px;grid-template-rows:auto auto;gap:12px;align-items:center}
.tccp-carousel-viewport{overflow:hidden;width:100%;border-radius:16px}
.tccp-carousel-track{display:flex;width:100%;transition:transform .35s ease;will-change:transform}
.tccp-carousel-slide{flex:0 0 100%;min-width:100%;padding:4px;box-sizing:border-box}
.tccp-colour-slide{display:block;cursor:pointer}
.tccp-colour-slide>span{min-height:360px}
.tccp-colour-slide img{width:100%;height:280px;object-fit:contain}
.tccp-carousel-arrow{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid #bbb;border-radius:50%;background:#fff;color:#111;font-size:28px;line-height:1;cursor:pointer;z-index:2}
.tccp-carousel-arrow:hover{background:#f5f5f5}
.tccp-carousel-dots{grid-column:1/-1;display:flex;justify-content:center;gap:8px}
.tccp-carousel-dot{width:10px;height:10px;padding:0;border:0;border-radius:50%;background:#c8c8c8;cursor:pointer}
.tccp-carousel-dot.is-active{background:#111}
@media(max-width:760px){
	.tccp-carousel{grid-template-columns:38px minmax(0,1fr) 38px}
	.tccp-carousel-arrow{width:36px;height:36px;font-size:23px}
	.tccp-colour-slide>span{min-height:300px}
	.tccp-colour-slide img{height:220px}
}

.tccp-design-carousel{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) 48px;grid-template-rows:auto auto;gap:12px;align-items:center}
.tccp-design-track{display:flex;width:100%;transition:transform .35s ease;will-change:transform}
.tccp-design-slide{flex:0 0 100%;min-width:100%;padding:4px;box-sizing:border-box}
.tccp-design-slide .tccp-image-card>span{min-height:380px}
.tccp-design-slide .tccp-image-card img{width:100%;height:290px;object-fit:contain}
.tccp-design-slide .tccp-image-card em{height:290px}
@media(max-width:760px){
	.tccp-design-carousel{grid-template-columns:38px minmax(0,1fr) 38px}
	.tccp-design-slide .tccp-image-card>span{min-height:315px}
	.tccp-design-slide .tccp-image-card img{height:225px}
	.tccp-design-slide .tccp-image-card em{height:225px}
}
