/* The Cassette Club Configurator v3.0 */
.single-product div.product,
.single-product .product,
.single-product .summary,
.single-product form.cart { overflow: visible !important; }

.tccs-wrap,
.tccs-wrap *,
.tccs-wrap *::before,
.tccs-wrap *::after { box-sizing: border-box !important; }

.tccs-wrap {
    display: block !important;
    width: calc(100vw - 64px) !important;
    max-width: 1400px !important;
    margin: 60px auto !important;
    margin-left: calc(50% - 50vw + 32px) !important;
    padding: 0 !important;
    color: #222 !important;
    font-size: 16px !important;
    line-height: 1.65 !important;
    clear: both !important;
}

.tccs-header,
.tccs-section {
    width: 100% !important;
    margin: 0 0 28px !important;
    padding: 36px !important;
    background: #fff !important;
    border: 1px solid #e5e5e5 !important;
    border-radius: 20px !important;
}

.tccs-header p,
.tccs-summary-heading p {
    margin: 0 0 8px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .12em !important;
    opacity: .65 !important;
}

.tccs-header h2,
.tccs-section h3 { margin: 0 0 12px !important; line-height: 1.25 !important; }

.tccs-progress {
    width:100% !important;
    margin-top:28px !important;
}
.tccs-progress-meta {
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:16px !important;
    margin-bottom:10px !important;
    font-size:14px !important;
}
.tccs-progress-meta strong,
.tccs-progress-meta span {
    display:block !important;
    margin:0 !important;
    color:#333 !important;
}
.tccs-progress-track {
    display:block !important;
    width:100% !important;
    height:10px !important;
    overflow:hidden !important;
    background:#ececec !important;
    border-radius:999px !important;
}
.tccs-progress-track > span {
    display:block !important;
    width:13% !important;
    height:100% !important;
    margin:0 !important;
    background:#1f4fff !important;
    border-radius:inherit !important;
    transition:width .28s ease !important;
}

.tccs-header span,
.tccs-section > p,
.tccs-help { display:block !important; margin:0 0 22px !important; color:#666 !important; line-height:1.65 !important; }

.tccs-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0,1fr)) !important;
    gap: 22px !important;
    width: 100% !important;
    margin: 0 !important;
    align-items: stretch !important;
}

.tccs-choice {
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    min-width:0 !important;
    height:100% !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    background:#fff !important;
    border:1.5px solid #dedede !important;
    border-radius:16px !important;
    cursor:pointer !important;
    transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease !important;
}
.tccs-choice:hover { border-color:#999 !important; box-shadow:0 7px 22px rgba(0,0,0,.07) !important; transform:translateY(-2px); }
.tccs-choice:has(input[type="radio"]:checked) { border:2px solid #1f4fff !important; box-shadow:0 0 0 3px rgba(31,79,255,.08) !important; }

.tccs-choice-image {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:100% !important;
    margin:0 !important;
    padding:20px !important;
    overflow:hidden !important;
    background:#fff !important;
}
.tccs-choice-image img { display:block !important; width:auto !important; height:auto !important; margin:0 auto !important; object-fit:contain !important; object-position:center !important; }

/* Section 1: cassettes */
.tccs-section:nth-of-type(1) .tccs-choice-image { height:250px !important; min-height:250px !important; }
.tccs-section:nth-of-type(1) .tccs-choice-image img { width:100% !important; max-width:340px !important; max-height:210px !important; }
.tccs-section:nth-of-type(1) .tccs-choice:nth-child(1) .tccs-choice-image img,
.tccs-section:nth-of-type(1) .tccs-choice:nth-child(4) .tccs-choice-image img,
.tccs-section:nth-of-type(1) .tccs-choice:nth-child(5) .tccs-choice-image img { transform:translateY(22px) !important; }

/* Section 2: label stickers */
.tccs-section:nth-of-type(2) .tccs-choice-image { height:225px !important; min-height:225px !important; padding:22px !important; }
.tccs-section:nth-of-type(2) .tccs-choice-image img { width:100% !important; max-width:360px !important; max-height:180px !important; }

/* Section 3: J-cards */
.tccs-section:nth-of-type(3) .tccs-choice-image { height:280px !important; min-height:280px !important; padding:22px !important; }
.tccs-section:nth-of-type(3) .tccs-choice-image img { width:100% !important; max-width:310px !important; max-height:235px !important; }

.tccs-choice-select {
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:9px !important;
    width:100% !important;
    min-height:60px !important;
    margin:auto 0 0 !important;
    padding:14px 16px !important;
    background:#fafafa !important;
    border-top:1px solid #e8e8e8 !important;
}
.tccs-choice-select input[type="radio"] { position:static !important; display:block !important; flex:0 0 auto !important; width:18px !important; height:18px !important; margin:0 !important; opacity:1 !important; appearance:auto !important; accent-color:#1f4fff !important; }
.tccs-choice-select strong { display:block !important; margin:0 !important; font-size:15px !important; font-weight:600 !important; line-height:1.35 !important; overflow-wrap:anywhere !important; }

.tccs-explainer,
.tccs-example {
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:14px !important;
    margin:0 auto 28px !important;
    padding:22px !important;
    width:100% !important;
    max-width:760px !important;
    text-align:center !important;
    background:#fafafa !important;
    border:1px solid #e6e6e6 !important;
    border-radius:16px !important;
}
.tccs-example-card-label {
    align-self:flex-start !important;
    margin:0 !important;
    font-size:12px !important;
    font-weight:700 !important;
    letter-spacing:.08em !important;
    text-transform:uppercase !important;
    color:#555 !important;
}
.tccs-explainer img,
.tccs-example img {
    display:block !important;
    width:auto !important;
    height:auto !important;
    max-width:100% !important;
    object-fit:contain !important;
    object-position:center !important;
    margin:0 auto !important;
}
.tccs-explainer--case img { max-width:260px !important; max-height:300px !important; }
.tccs-section[data-summary-section="title"] .tccs-example img { max-width:280px !important; max-height:320px !important; }
.tccs-example--wide img { max-width:520px !important; max-height:370px !important; }
.tccs-recording-preview img { max-width:680px !important; max-height:440px !important; }
.tccs-explainer div,
.tccs-example span {
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    gap:6px !important;
    color:#666 !important;
    max-width:620px !important;
}
.tccs-explainer strong { color:#222 !important; font-size:18px !important; }

.tccs-field { display:block !important; margin:0 0 24px !important; font-weight:600 !important; line-height:1.5 !important; }
.tccs-field input,
.tccs-field textarea { display:block !important; width:100% !important; margin-top:9px !important; padding:14px 15px !important; background:#fff !important; border:1px solid #ccc !important; border-radius:10px !important; font:inherit !important; line-height:1.5 !important; transition:border-color .2s ease, box-shadow .2s ease !important; }
.tccs-field input:focus,
.tccs-field textarea:focus { border-color:#1f4fff !important; box-shadow:0 0 0 3px rgba(31,79,255,.10) !important; outline:none !important; }
.tccs-field small { display:block !important; margin-top:8px !important; color:#777 !important; font-weight:400 !important; }
.tccs-field b { color:#b42318 !important; }
.tccs-two { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:20px !important; }

.tccs-side { margin:28px 0 !important; padding:24px !important; background:#fafafa !important; border:1px solid #ddd !important; border-radius:16px !important; }
.tccs-side > h3 { margin:0 0 18px !important; font-size:24px !important; }
.tccs-track { margin:22px 0 !important; padding:22px !important; background:#fff !important; border:1px solid #dedede !important; border-radius:14px !important; }
.tccs-track-heading { display:flex !important; align-items:center !important; gap:12px !important; margin-bottom:22px !important; }
.tccs-track-heading > span { display:flex !important; align-items:center !important; justify-content:center !important; flex:0 0 36px !important; width:36px !important; height:36px !important; color:#fff !important; background:#111 !important; border-radius:50% !important; font-weight:700 !important; }
.tccs-track-heading > div { display:flex !important; flex-direction:column !important; gap:3px !important; line-height:1.35 !important; }
.tccs-track-heading small { color:#777 !important; font-size:13px !important; }
.tccs-confirm { display:flex !important; align-items:flex-start !important; gap:12px !important; padding:16px !important; border:1px solid #ddd !important; border-radius:11px !important; line-height:1.55 !important; }
.tccs-confirm input { margin-top:5px !important; }

.tccs-summary { background:linear-gradient(180deg,#fff,#fafbff) !important; border-color:#dfe5ff !important; }
.tccs-summary-heading { display:flex !important; align-items:flex-end !important; justify-content:space-between !important; gap:20px !important; margin-bottom:22px !important; }
.tccs-summary-heading h3 { margin:0 !important; }
.tccs-summary-heading > span { color:#666 !important; }
.tccs-summary-grid { display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:12px !important; }
.tccs-summary-item { display:flex !important; justify-content:space-between !important; gap:20px !important; padding:14px 16px !important; background:#fff !important; border:1px solid #e4e7f2 !important; border-radius:12px !important; }
.tccs-summary-item span { color:#666 !important; }
.tccs-summary-item strong { text-align:right !important; }
.tccs-summary-item.is-empty strong { color:#999 !important; font-weight:500 !important; }
.tccs-summary-updated { animation:tccsPulse .28s ease; }
@keyframes tccsPulse { 0%{opacity:.65;transform:translateY(2px)} 100%{opacity:1;transform:none} }

.tccs-cart-destination { margin-top:0 !important; }
.tccs-cart-destination form.cart { display:flex !important; align-items:center !important; gap:14px !important; width:100% !important; margin:0 !important; padding:24px !important; background:#fff !important; border:1px solid #e5e5e5 !important; border-radius:18px !important; }
.tccs-cart-destination form.cart .quantity { margin:0 !important; }
.tccs-cart-destination .single_add_to_cart_button { min-height:52px !important; padding:13px 26px !important; border-radius:10px !important; transition:transform .2s ease, opacity .2s ease !important; }
.tccs-cart-destination .single_add_to_cart_button:hover { transform:translateY(-1px); }
.tccs-cart-destination .single_add_to_cart_button.loading { opacity:.75 !important; pointer-events:none !important; }

@media (max-width:1024px) {
    .tccs-wrap { width:calc(100vw - 40px) !important; margin:40px auto !important; margin-left:calc(50% - 50vw + 20px) !important; }
    .tccs-header,.tccs-section { padding:28px !important; }
    .tccs-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:18px !important; }
    .tccs-section:nth-of-type(1) .tccs-choice-image { height:205px !important; min-height:205px !important; }
    .tccs-section:nth-of-type(1) .tccs-choice-image img { max-width:290px !important; max-height:170px !important; }
    .tccs-section:nth-of-type(1) .tccs-choice:nth-child(1) .tccs-choice-image img,
    .tccs-section:nth-of-type(1) .tccs-choice:nth-child(4) .tccs-choice-image img,
    .tccs-section:nth-of-type(1) .tccs-choice:nth-child(5) .tccs-choice-image img { transform:translateY(18px) !important; }
    .tccs-section:nth-of-type(2) .tccs-choice-image { height:185px !important; min-height:185px !important; }
    .tccs-section:nth-of-type(3) .tccs-choice-image { height:225px !important; min-height:225px !important; }
}

@media (max-width:767px) {
    .tccs-wrap { padding-bottom:0 !important; }
    .tccs-header,
    .tccs-section { margin-bottom:24px !important; }
    .tccs-explainer,
    .tccs-example { padding:18px !important; gap:12px !important; }
    .tccs-explainer--case img { max-width:190px !important; max-height:230px !important; }
    .tccs-section[data-summary-section="title"] .tccs-example img { max-width:210px !important; max-height:250px !important; }
    .tccs-example--wide img { max-width:100% !important; max-height:250px !important; }
    .tccs-recording-preview img { max-width:100% !important; max-height:280px !important; }
    .tccs-summary { position:static !important; box-shadow:none !important; }
}

/* v3.1.2 — compact, centred example cards. These selectors intentionally do
   not depend on the theme's .single-product body class. */
.tccs-wrap .tccs-example-card,
.tccs-wrap .tccs-explainer,
.tccs-wrap .tccs-example {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: min(100%, 520px) !important;
    max-width: 520px !important;
    margin: 20px auto 30px !important;
    padding: 20px !important;
    gap: 12px !important;
    text-align: center !important;
    background: #fafafa !important;
    border: 1px solid #e7e7e7 !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}
.tccs-wrap .tccs-example-card-label {
    align-self: center !important;
    width: 100% !important;
    margin: 0 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    color: #333 !important;
}
.tccs-wrap .tccs-example-card img,
.tccs-wrap .tccs-explainer img,
.tccs-wrap .tccs-example img {
    display: block !important;
    flex: none !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    object-fit: contain !important;
    object-position: center center !important;
}
.tccs-wrap .tccs-explainer--case img { max-width: 220px !important; }
.tccs-wrap [data-summary-section="title"] .tccs-example img { max-width: 230px !important; }
.tccs-wrap [data-summary-section="gift"] .tccs-example img { max-width: 360px !important; }
.tccs-wrap .tccs-recording-preview img { max-width: 420px !important; }
.tccs-wrap .tccs-example-card > span,
.tccs-wrap .tccs-example-card > div:last-child,
.tccs-wrap .tccs-example > span,
.tccs-wrap .tccs-explainer > div:last-child {
    display: block !important;
    width: 100% !important;
    max-width: 430px !important;
    margin: 0 auto !important;
    color: #666 !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
    text-align: center !important;
}
.tccs-wrap .tccs-explainer > div:last-child strong,
.tccs-wrap .tccs-explainer > div:last-child span {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
}
@media (max-width: 767px) {
    .tccs-wrap .tccs-example-card,
    .tccs-wrap .tccs-explainer,
    .tccs-wrap .tccs-example {
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px !important;
        margin: 16px auto 24px !important;
    }
    .tccs-wrap .tccs-explainer--case img { max-width: 170px !important; }
    .tccs-wrap [data-summary-section="title"] .tccs-example img { max-width: 180px !important; }
    .tccs-wrap [data-summary-section="gift"] .tccs-example img { max-width: 280px !important; }
    .tccs-wrap .tccs-recording-preview img { max-width: 320px !important; }
}

/* v3.1.3 — simplified example flow and removed progress UI. */
.tccs-wrap .tccs-example-card > img {
    margin-bottom: 8px !important;
}
.tccs-wrap .tccs-example-caption,
.tccs-wrap .tccs-example-copy {
    display: block !important;
    width: 100% !important;
    clear: both !important;
    margin-top: 4px !important;
    text-align: center !important;
}
.tccs-wrap .tccs-example-copy strong,
.tccs-wrap .tccs-example-copy span {
    display: block !important;
    width: 100% !important;
}
.tccs-wrap .tccs-example-copy strong {
    margin-bottom: 8px !important;
}
.tccs-wrap .tccs-progress { display:none !important; }

/* v3.1.4: force example media and copy onto separate rows across all themes/builders */
.tccs-wrap .tccs-example-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 auto 28px !important;
    text-align: center !important;
}
.tccs-wrap .tccs-example-card > * {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
}
.tccs-wrap .tccs-example-media {
    display: block !important;
    clear: both !important;
    width: 100% !important;
    margin: 0 auto 16px !important;
    text-align: center !important;
}
.tccs-wrap .tccs-example-media img {
    display: block !important;
    float: none !important;
    clear: both !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}
.tccs-wrap .tccs-example-copy,
.tccs-wrap .tccs-example-caption {
    display: block !important;
    clear: both !important;
    width: 100% !important;
    margin: 0 !important;
    text-align: center !important;
}
.tccs-wrap .tccs-example-copy strong,
.tccs-wrap .tccs-example-copy p {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
}
.tccs-wrap .tccs-example-copy p { margin-top: 7px !important; }
.tccs-wrap .tccs-recording-preview { max-width: 720px !important; }
.tccs-wrap .tccs-recording-preview .tccs-example-media { margin-bottom: 0 !important; }
.tccs-wrap .tccs-recording-preview img { max-width: 680px !important; max-height: 320px !important; }
@media (max-width: 767px) {
    .tccs-wrap .tccs-example-card { max-width: 100% !important; padding: 18px !important; }
    .tccs-wrap .tccs-recording-preview img { max-width: 100% !important; max-height: 260px !important; }
}


/* v3.1.5 — guaranteed vertical media flow and simplified Section 6 guide. */
.tccs-wrap .tccs-media-break {
    display: block !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    height: 0 !important;
    clear: both !important;
}
.tccs-wrap .tccs-example-media,
.tccs-wrap .tccs-example-copy,
.tccs-wrap .tccs-example-caption {
    float: none !important;
    clear: both !important;
    position: static !important;
}
.tccs-wrap .tccs-recording-guide {
    display: block !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 620px !important;
    margin: 22px auto 30px !important;
    padding: 0 !important;
    text-align: center !important;
}
.tccs-wrap .tccs-recording-guide img {
    display: block !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 560px !important;
    height: auto !important;
    margin: 0 auto !important;
    object-fit: contain !important;
}
.tccs-wrap .tccs-recording-guide + .tccs-media-break + .tccs-side {
    display: block !important;
    clear: both !important;
}
@media (max-width: 767px) {
    .tccs-wrap .tccs-recording-guide { margin: 18px auto 24px !important; }
    .tccs-wrap .tccs-recording-guide img { max-width: 100% !important; }
}


/* v3.1.6 — place express-payment buttons after Add to Cart. */
.tccs-payment-destination {
    display: block !important;
    width: 100% !important;
    margin: 14px 0 0 !important;
    clear: both !important;
}
.tccs-payment-destination[hidden] {
    display: none !important;
}
.tccs-payment-destination > * {
    display: block !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 0 12px !important;
}
.tccs-payment-destination iframe,
.tccs-payment-destination button,
.tccs-payment-destination .gpay-card-info-container {
    max-width: 100% !important;
}

/* v3.2.1 — full-song checkbox and conditional timing fields. */
.tccs-full-song {
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    margin:14px 0 16px !important;
    padding:12px 14px !important;
    background:#f7f7f7 !important;
    border:1px solid #dedede !important;
    border-radius:10px !important;
    color:#222 !important;
    cursor:pointer !important;
}
.tccs-full-song input[type="checkbox"] {
    width:18px !important;
    height:18px !important;
    margin:0 !important;
    flex:0 0 18px !important;
    accent-color:#111 !important;
}
.tccs-full-song span {
    color:#222 !important;
    font-weight:600 !important;
    line-height:1.4 !important;
}
[data-tccs-time-fields].is-hidden {
    display:none !important;
}

/* v3.2.2 — force timing fields to hide when full song is selected. */
[data-tccs-time-fields][hidden],
[data-tccs-time-fields].is-hidden {
    display: none !important;
}
.tccs-optional {
    font-weight: 400 !important;
    opacity: .7 !important;
}


/* v3.3.1 — guided configurator experience */
.tccs-wrap .tccs-journey {
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:10px !important;
    margin-top:28px !important;
}
.tccs-wrap .tccs-journey-step {
    display:grid !important;
    grid-template-columns:32px 1fr !important;
    grid-template-rows:auto auto !important;
    column-gap:10px !important;
    align-items:center !important;
    min-width:0 !important;
    padding:13px !important;
    background:#fafafa !important;
    border:1px solid #e6e6e6 !important;
    border-radius:14px !important;
    color:#222 !important;
    text-align:left !important;
    cursor:pointer !important;
    transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease !important;
}
.tccs-wrap .tccs-journey-step:hover { transform:translateY(-2px) !important; border-color:#b9c6ff !important; box-shadow:0 8px 22px rgba(25,46,110,.08) !important; }
.tccs-wrap .tccs-journey-step > span {
    grid-row:1 / span 2 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:32px !important;
    height:32px !important;
    margin:0 !important;
    border-radius:50% !important;
    background:#ececec !important;
    color:#333 !important;
    font-weight:800 !important;
}
.tccs-wrap .tccs-journey-step strong { font-size:14px !important; line-height:1.2 !important; }
.tccs-wrap .tccs-journey-step small { color:#777 !important; font-size:11px !important; line-height:1.2 !important; }
.tccs-wrap .tccs-journey-step.is-active,
.tccs-wrap .tccs-journey-step.is-complete { border-color:#9eb0ff !important; background:#f7f9ff !important; }
.tccs-wrap .tccs-journey-step.is-complete > span { background:#1f4fff !important; color:#fff !important; font-size:0 !important; }
.tccs-wrap .tccs-journey-step.is-complete > span::after { content:'✓'; font-size:15px !important; }

.tccs-wrap .tccs-status-strip {
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    margin-top:18px !important;
}
.tccs-wrap .tccs-status-strip span {
    display:inline-flex !important;
    align-items:center !important;
    width:auto !important;
    margin:0 !important;
    padding:7px 11px !important;
    border:1px solid #e2e6f6 !important;
    border-radius:999px !important;
    background:#f8f9ff !important;
    color:#3b466f !important;
    font-size:12px !important;
    line-height:1.2 !important;
}

.tccs-wrap .tccs-section { scroll-margin-top:24px !important; transition:border-color .2s ease,box-shadow .2s ease !important; }
.tccs-wrap .tccs-section.is-complete { border-color:#d4defe !important; }
.tccs-wrap .tccs-section-header { display:flex !important; justify-content:space-between !important; align-items:center !important; gap:20px !important; }
.tccs-wrap .tccs-section-title { display:flex !important; align-items:center !important; gap:13px !important; min-width:0 !important; }
.tccs-wrap .tccs-section-title h3 { margin:0 !important; }
.tccs-wrap .tccs-section-state {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 36px !important;
    width:36px !important;
    height:36px !important;
    margin:0 !important;
    border-radius:50% !important;
    background:#f0f0f0 !important;
    color:#333 !important;
    font-weight:800 !important;
}
.tccs-wrap .tccs-section.is-complete .tccs-section-state { background:#1f4fff !important; color:#fff !important; }
.tccs-wrap .tccs-section-toggle {
    display:inline-flex !important;
    align-items:center !important;
    gap:8px !important;
    flex:0 0 auto !important;
    padding:9px 12px !important;
    border:1px solid #ddd !important;
    border-radius:999px !important;
    background:#fff !important;
    color:#444 !important;
    font-size:12px !important;
    cursor:pointer !important;
}
.tccs-wrap .tccs-section-toggle b { font-size:17px !important; line-height:1 !important; }
.tccs-wrap .tccs-section-body { margin-top:22px !important; }
.tccs-wrap .tccs-section.is-collapsed .tccs-section-body { display:none !important; }
.tccs-wrap .tccs-section.is-collapsed { padding-top:22px !important; padding-bottom:22px !important; }

.tccs-wrap .tccs-choice { position:relative !important; transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease !important; }
.tccs-wrap .tccs-choice:hover { transform:translateY(-3px) !important; box-shadow:0 10px 24px rgba(17,31,78,.08) !important; }
.tccs-wrap .tccs-choice:has(input:checked) { border-color:#1f4fff !important; box-shadow:0 0 0 3px rgba(31,79,255,.10),0 12px 26px rgba(17,31,78,.09) !important; }
.tccs-wrap .tccs-choice-check {
    position:absolute !important;
    top:12px !important;
    right:12px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:28px !important;
    height:28px !important;
    border-radius:50% !important;
    background:#1f4fff !important;
    color:#fff !important;
    font-size:14px !important;
    font-weight:800 !important;
    opacity:0 !important;
    transform:scale(.7) !important;
    transition:opacity .18s ease,transform .18s ease !important;
    pointer-events:none !important;
}
.tccs-wrap .tccs-choice:has(input:checked) .tccs-choice-check { opacity:1 !important; transform:scale(1) !important; }

.tccs-wrap .tccs-track.is-hidden-track { display:none !important; }
.tccs-wrap .tccs-add-track,
.tccs-wrap .tccs-voice-toggle {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:9px !important;
    width:100% !important;
    min-height:48px !important;
    padding:12px 16px !important;
    border:1px dashed #aeb9e8 !important;
    border-radius:12px !important;
    background:#f8f9ff !important;
    color:#263a83 !important;
    font-weight:700 !important;
    cursor:pointer !important;
    transition:background .18s ease,border-color .18s ease !important;
}
.tccs-wrap .tccs-add-track:hover,
.tccs-wrap .tccs-voice-toggle:hover { background:#f0f3ff !important; border-color:#768dde !important; }
.tccs-wrap .tccs-voice-toggle { justify-content:flex-start !important; margin:0 0 14px !important; }
.tccs-wrap .tccs-voice-toggle b { margin-left:auto !important; font-size:18px !important; }
.tccs-wrap .tccs-voice-toggle.has-file { border-style:solid !important; border-color:#adc1ff !important; background:#f4f7ff !important; }
.tccs-wrap .tccs-voice-field.is-closed { display:none !important; }
.tccs-wrap .tccs-side .tccs-add-track { margin-top:18px !important; }

.tccs-wrap .tccs-cart-destination .single_add_to_cart_button { font-weight:800 !important; letter-spacing:.01em !important; }

@media (max-width:900px) {
    .tccs-wrap .tccs-journey { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
    .tccs-wrap .tccs-journey-step:last-child { grid-column:1 / -1 !important; }
}
@media (max-width:767px) {
    .tccs-wrap .tccs-journey { display:flex !important; overflow-x:auto !important; scroll-snap-type:x proximity !important; padding-bottom:6px !important; }
    .tccs-wrap .tccs-journey-step { flex:0 0 165px !important; scroll-snap-align:start !important; }
    .tccs-wrap .tccs-section-header { align-items:flex-start !important; }
    .tccs-wrap .tccs-section-title { align-items:flex-start !important; }
    .tccs-wrap .tccs-section-toggle span { display:none !important; }
    .tccs-wrap .tccs-section-toggle { width:38px !important; height:38px !important; justify-content:center !important; padding:0 !important; }
    .tccs-wrap .tccs-status-strip { flex-wrap:nowrap !important; overflow-x:auto !important; padding-bottom:4px !important; }
    .tccs-wrap .tccs-status-strip span { flex:0 0 auto !important; }
}

/* v3.3.2 — full mobile optimisation and responsive title artwork. */
.tccs-wrap,
.tccs-wrap * {
    max-inline-size: 100%;
}
.tccs-wrap img,
.tccs-wrap video,
.tccs-wrap iframe {
    max-width: 100% !important;
}
.tccs-wrap input,
.tccs-wrap textarea,
.tccs-wrap select,
.tccs-wrap button {
    min-width: 0 !important;
}
.tccs-wrap [data-summary-section="title"] .tccs-example {
    max-width: 680px !important;
}
.tccs-wrap [data-summary-section="title"] .tccs-example-media img,
.tccs-wrap [data-summary-section="title"] .tccs-example img {
    width: 100% !important;
    max-width: 630px !important;
    max-height: none !important;
}

@media (max-width: 767px) {
    html,
    body {
        overflow-x: hidden !important;
    }

    .tccs-wrap {
        width: 100% !important;
        max-width: 100% !important;
        margin: 28px 0 !important;
        margin-left: 0 !important;
        padding: 0 14px !important;
        font-size: 15px !important;
        line-height: 1.55 !important;
        overflow: visible !important;
    }

    .tccs-header,
    .tccs-section {
        width: 100% !important;
        margin: 0 0 16px !important;
        padding: 18px !important;
        border-radius: 15px !important;
        overflow: hidden !important;
    }

    .tccs-header h2 {
        font-size: clamp(27px, 8vw, 36px) !important;
        line-height: 1.12 !important;
        overflow-wrap: anywhere !important;
    }
    .tccs-section h3 {
        font-size: clamp(20px, 5.8vw, 25px) !important;
        line-height: 1.2 !important;
        overflow-wrap: anywhere !important;
    }
    .tccs-header span,
    .tccs-section > p,
    .tccs-help {
        margin-bottom: 16px !important;
        font-size: 14px !important;
        line-height: 1.55 !important;
    }

    /* Keep all five steps visible without a sideways-scrolling strip. */
    .tccs-wrap .tccs-journey {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        width: 100% !important;
        margin-top: 20px !important;
        padding: 0 !important;
        overflow: visible !important;
        scroll-snap-type: none !important;
    }
    .tccs-wrap .tccs-journey-step,
    .tccs-wrap .tccs-journey-step:last-child {
        grid-column: auto !important;
        display: grid !important;
        grid-template-columns: 27px minmax(0, 1fr) !important;
        flex: none !important;
        width: 100% !important;
        min-height: 64px !important;
        padding: 9px !important;
        column-gap: 8px !important;
        border-radius: 11px !important;
        scroll-snap-align: none !important;
    }
    .tccs-wrap .tccs-journey-step:last-child {
        grid-column: 1 / -1 !important;
    }
    .tccs-wrap .tccs-journey-step > span {
        width: 27px !important;
        height: 27px !important;
        font-size: 12px !important;
    }
    .tccs-wrap .tccs-journey-step strong {
        font-size: 12px !important;
        overflow-wrap: anywhere !important;
    }
    .tccs-wrap .tccs-journey-step small {
        font-size: 10px !important;
        overflow-wrap: anywhere !important;
    }

    .tccs-wrap .tccs-status-strip {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        overflow: visible !important;
        margin-top: 14px !important;
        padding: 0 !important;
    }
    .tccs-wrap .tccs-status-strip span {
        flex: 0 1 auto !important;
        max-width: 100% !important;
        padding: 6px 9px !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }

    .tccs-wrap .tccs-section-header {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 36px !important;
        align-items: start !important;
        gap: 10px !important;
    }
    .tccs-wrap .tccs-section-title {
        min-width: 0 !important;
        gap: 10px !important;
    }
    .tccs-wrap .tccs-section-title h3 {
        min-width: 0 !important;
        overflow-wrap: anywhere !important;
    }
    .tccs-wrap .tccs-section-state {
        flex: 0 0 31px !important;
        width: 31px !important;
        height: 31px !important;
        font-size: 13px !important;
    }
    .tccs-wrap .tccs-section-toggle {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
    }
    .tccs-wrap .tccs-section-body {
        width: 100% !important;
        margin-top: 18px !important;
    }

    /* Cassette colours stay compact; design options receive more width. */
    .tccs-section[data-summary-section="colour"] .tccs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    .tccs-section[data-summary-section="label"] .tccs-grid,
    .tccs-section[data-summary-section="jcard"] .tccs-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    .tccs-grid,
    .tccs-choice {
        width: 100% !important;
        min-width: 0 !important;
    }
    .tccs-choice {
        border-radius: 12px !important;
    }
    .tccs-section[data-summary-section="colour"] .tccs-choice-image {
        height: 122px !important;
        min-height: 122px !important;
        padding: 10px !important;
    }
    .tccs-section[data-summary-section="colour"] .tccs-choice-image img {
        width: 100% !important;
        max-width: 155px !important;
        max-height: 105px !important;
        transform: none !important;
    }
    .tccs-section[data-summary-section="label"] .tccs-choice-image {
        height: auto !important;
        min-height: 150px !important;
        padding: 14px !important;
    }
    .tccs-section[data-summary-section="label"] .tccs-choice-image img {
        width: 100% !important;
        max-width: 360px !important;
        max-height: 170px !important;
    }
    .tccs-section[data-summary-section="jcard"] .tccs-choice-image {
        height: auto !important;
        min-height: 185px !important;
        padding: 14px !important;
    }
    .tccs-section[data-summary-section="jcard"] .tccs-choice-image img {
        width: 100% !important;
        max-width: 310px !important;
        max-height: 245px !important;
    }
    .tccs-choice-select {
        min-height: 54px !important;
        padding: 11px 12px !important;
        gap: 8px !important;
    }
    .tccs-choice-select strong {
        min-width: 0 !important;
        font-size: 13px !important;
        line-height: 1.3 !important;
        overflow-wrap: anywhere !important;
    }
    .tccs-choice-check {
        top: 8px !important;
        right: 8px !important;
        width: 25px !important;
        height: 25px !important;
    }

    .tccs-explainer,
    .tccs-example,
    .tccs-wrap .tccs-example-card {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto 20px !important;
        padding: 14px !important;
        border-radius: 12px !important;
    }
    .tccs-wrap [data-summary-section="title"] .tccs-example-media,
    .tccs-wrap [data-summary-section="title"] .tccs-example-media img,
    .tccs-wrap [data-summary-section="title"] .tccs-example img {
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
    }

    .tccs-two,
    .tccs-summary-grid {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
    .tccs-field {
        width: 100% !important;
        margin-bottom: 18px !important;
        font-size: 14px !important;
    }
    .tccs-field input,
    .tccs-field textarea,
    .tccs-field select {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 48px !important;
        padding: 12px !important;
        font-size: 16px !important; /* Prevents iOS from zooming into fields. */
        border-radius: 9px !important;
    }
    .tccs-field input[type="file"] {
        min-height: 0 !important;
        padding: 10px !important;
        font-size: 13px !important;
        white-space: normal !important;
        overflow: hidden !important;
    }

    .tccs-side {
        width: 100% !important;
        margin: 18px 0 !important;
        padding: 13px !important;
        border-radius: 13px !important;
    }
    .tccs-side > h3 {
        font-size: 22px !important;
    }
    .tccs-track {
        width: 100% !important;
        margin: 15px 0 !important;
        padding: 13px !important;
        border-radius: 11px !important;
        overflow: hidden !important;
    }
    .tccs-track-heading {
        gap: 9px !important;
        margin-bottom: 16px !important;
    }
    .tccs-track-heading > span {
        flex: 0 0 32px !important;
        width: 32px !important;
        height: 32px !important;
    }
    .tccs-full-song,
    .tccs-confirm {
        width: 100% !important;
        padding: 12px !important;
        gap: 9px !important;
        font-size: 14px !important;
        overflow-wrap: anywhere !important;
    }
    .tccs-wrap .tccs-add-track,
    .tccs-wrap .tccs-voice-toggle {
        min-height: 46px !important;
        padding: 11px 12px !important;
        font-size: 14px !important;
    }

    .tccs-summary-heading {
        display: block !important;
        margin-bottom: 16px !important;
    }
    .tccs-summary-heading > span {
        display: block !important;
        margin-top: 7px !important;
        font-size: 13px !important;
    }
    .tccs-summary-item {
        align-items: flex-start !important;
        gap: 12px !important;
        padding: 12px !important;
        font-size: 13px !important;
    }
    .tccs-summary-item span,
    .tccs-summary-item strong {
        min-width: 0 !important;
        overflow-wrap: anywhere !important;
    }

    .tccs-cart-destination,
    .tccs-payment-destination {
        width: 100% !important;
    }
    .tccs-cart-destination form.cart {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        width: 100% !important;
        padding: 14px !important;
        border-radius: 13px !important;
    }
    .tccs-cart-destination form.cart .quantity,
    .tccs-cart-destination form.cart .quantity input,
    .tccs-cart-destination .single_add_to_cart_button {
        width: 100% !important;
        max-width: 100% !important;
    }
    .tccs-cart-destination .single_add_to_cart_button {
        min-height: 52px !important;
        padding: 13px 16px !important;
        white-space: normal !important;
    }
    .tccs-payment-destination iframe,
    .tccs-payment-destination button,
    .tccs-payment-destination > * {
        width: 100% !important;
        max-width: 100% !important;
    }
}

@media (max-width: 390px) {
    .tccs-wrap {
        padding: 0 10px !important;
    }
    .tccs-header,
    .tccs-section {
        padding: 15px !important;
    }
    .tccs-section[data-summary-section="colour"] .tccs-grid {
        gap: 8px !important;
    }
    .tccs-section[data-summary-section="colour"] .tccs-choice-image {
        height: 108px !important;
        min-height: 108px !important;
    }
    .tccs-choice-select {
        padding: 9px !important;
    }
    .tccs-choice-select strong {
        font-size: 12px !important;
    }
}

@media (hover: none) and (pointer: coarse) {
    .tccs-wrap .tccs-choice:hover,
    .tccs-wrap .tccs-journey-step:hover {
        transform: none !important;
        box-shadow: none !important;
    }
}


/* v3.3.4 — centre journey numbers and remove theme interference */
.tccs-wrap .tccs-journey-step > span {
    position: static !important;
    inset: auto !important;
    float: none !important;
    transform: none !important;
    padding: 0 !important;
    text-indent: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
    vertical-align: middle !important;
    overflow: hidden !important;
}
.tccs-wrap .tccs-journey-step > span::before { content: none !important; }
.tccs-wrap .tccs-journey-step.is-complete > span::after {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    line-height: 1 !important;
}