/*
T4N Visual Kit Builder — Public Frontend Layout Authority
Version: 7.4.3
Purpose: clean single-source frontend layout; no legacy stacked layout rules.
*/

:root{
    --t4n-ink:#111;
    --t4n-muted:#777;
    --t4n-line:#e5e7eb;
    --t4n-bg:#fff;
    --t4n-soft:#f7f7f7;
}

html,
body{
    margin:0;
    padding:0;
    width:100%;
    max-width:100%;
    overflow-x:hidden;
    background:#fff;
}

.t4n-configurator,
.t4n-configurator *{
    box-sizing:border-box;
}

.t4n-configurator{
    --jersey:#8a123f;
    --jersey-accent:#111111;
    --shorts:#111111;
    --shorts-accent:#ffffff;
    width:100%;
    max-width:900px;
    min-width:0;
    margin:0 auto;
    padding:16px;
    min-height:100svh;
    background:#fff;
    color:var(--t4n-ink);
    font-family:Arial, sans-serif;
    overflow:hidden;
    position:relative;
}

.t4n-canvas{
    position:relative;
    width:100%;
    max-width:100%;
    min-width:0;
    background:#fff;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    padding:0;
    overflow:hidden;
}

.t4n-inline-selector{
    position:relative;
    width:100%;
    max-width:100%;
    margin:0;
    padding:0;
    z-index:3;
    background:#fff;
}

.t4n-inline-selector__head{
    width:100%;
    padding:4px 0 16px;
}

.t4n-inline-selector__head strong{
    display:block;
    font-size:clamp(26px, 7vw, 40px);
    line-height:1;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-weight:800;
}

.t4n-inline-selector__head em{
    display:block;
    margin-top:12px;
    color:var(--t4n-muted);
    font-style:normal;
    font-size:clamp(16px, 4vw, 24px);
}

.t4n-inline-slide{
    width:100%;
    max-width:100%;
    min-width:0;
}

.t4n-inline-slide[hidden]{
    display:none!important;
}

.t4n-inline-row{
    width:100%;
    max-width:100%;
    min-width:0;
    display:flex;
    gap:12px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory;
    padding:0 0 14px;
    margin:0;
}

.t4n-inline-row::-webkit-scrollbar{
    display:none;
}

.t4n-inline-row button{
    flex:0 0 clamp(250px, 78%, 560px);
    min-width:0;
    min-height:150px;
    border:1px solid var(--t4n-line);
    background:#050505;
    color:#fff;
    padding:26px 36px;
    text-align:left;
    display:flex;
    flex-direction:column;
    justify-content:center;
    scroll-snap-align:start;
    box-shadow:0 8px 22px rgba(0,0,0,.06);
}

.t4n-inline-row button span{
    display:block;
    font-size:clamp(24px, 6vw, 38px);
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
    line-height:1;
}

.t4n-inline-row button em{
    display:block;
    margin-top:12px;
    font-style:normal;
    font-size:clamp(12px, 3vw, 16px);
    letter-spacing:.06em;
    text-transform:uppercase;
    color:rgba(255,255,255,.45);
}

.t4n-lock-summary{
    width:100%;
    max-width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:12px;
    border:2px solid var(--t4n-line);
    padding:16px;
    margin:0 0 14px;
    background:#fff;
}

.t4n-lock-summary[hidden]{
    display:none!important;
}

.t4n-lock-summary strong{
    display:block;
    font-size:clamp(15px, 3.8vw, 22px);
    line-height:1.15;
    letter-spacing:.06em;
    text-transform:uppercase;
    font-weight:800;
}

.t4n-lock-summary button,
.t4n-public-view-tabs button,
.t4n-button-row button,
.t4n-actions button{
    font-family:Arial, sans-serif;
}

.t4n-lock-summary button{
    min-width:150px;
    min-height:72px;
    border:0;
    background:#111;
    color:#fff;
    font-size:clamp(18px, 4.5vw, 28px);
    letter-spacing:.12em;
    text-transform:uppercase;
}

.t4n-public-view-tabs{
    width:100%;
    max-width:100%;
    min-width:0;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    margin:0 0 12px;
    padding:0;
}

.t4n-public-view-tabs button{
    flex:0 1 240px;
    min-height:72px;
    border:0;
    background:#111;
    color:#fff;
    font-size:clamp(18px, 4.8vw, 28px);
    letter-spacing:.14em;
    text-transform:uppercase;
}

.t4n-public-view-tabs button.is-active{
    background:#050505;
}

.t4n-kit-preview{
    width:100%;
    max-width:620px;
    height:auto;
    display:block;
    margin:0 auto;
}

.t4n-png-render{
    width:100%;
    max-width:620px;
    min-width:0;
    aspect-ratio:1/1;
    position:relative;
    display:block;
    margin:0 auto;
    padding:0;
    overflow:hidden;
    background:#fff;
}

.t4n-png-render[hidden]{
    display:none!important;
}

.t4n-png-render .t4n-canvas-stage{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}

.t4n-png-render .t4n-canvas-layer{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center center;
    pointer-events:none;
}

.t4n-studio-render-active .t4n-kit-preview{
    display:none!important;
}

.t4n-view-empty{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#777;
    font-weight:800;
    font-size:14px;
}

.t4n-tray{
    position:relative;
    width:100%;
    max-width:100%;
    min-width:0;
    margin:12px 0 0;
    padding:0;
    background:#fff;
    border-top:1px solid var(--t4n-line);
    box-shadow:0 -8px 24px rgba(0,0,0,.04);
    overflow:hidden;
    z-index:2;
}

.t4n-tray-handle{
    width:100%;
    height:22px;
    border:0;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
}

.t4n-tray-handle span{
    width:80px;
    height:7px;
    border-radius:99px;
    background:#d7d9dc;
}

.t4n-stepbar{
    width:100%;
    max-width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:58px 1fr 58px;
    align-items:center;
    padding:22px 10px 18px;
    border-top:1px solid var(--t4n-line);
    border-bottom:1px solid var(--t4n-line);
    background:#fff;
}

.t4n-stepbar button{
    border:0;
    background:transparent;
    color:#777;
    font-size:34px;
    line-height:1;
    height:44px;
}

.t4n-stepbar div{
    text-align:center;
    min-width:0;
}

.t4n-stepbar strong{
    display:block;
    font-size:clamp(28px, 8vw, 46px);
    line-height:1;
    letter-spacing:.08em;
    text-transform:uppercase;
    font-weight:800;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}

.t4n-stepbar em{
    display:block;
    margin-top:12px;
    color:#aaa;
    font-style:normal;
    font-size:clamp(20px, 5vw, 32px);
}

.t4n-tray-scroll{
    width:100%;
    max-width:100%;
    min-width:0;
    overflow:hidden;
}

.t4n-step-panel{
    width:100%;
    max-width:100%;
    min-width:0;
    padding:28px 0 10px;
}

.t4n-step-panel[hidden]{
    display:none!important;
}

.t4n-field-block,
.t4n-choice-block{
    width:100%;
    max-width:100%;
    min-width:0;
    margin:0 0 32px;
}

.t4n-field-block h3,
.t4n-choice-block h3{
    margin:0 0 18px;
    font-size:clamp(22px, 5vw, 34px);
    line-height:1;
    letter-spacing:.08em;
    font-weight:400;
    text-transform:uppercase;
}

.t4n-colour-row,
.t4n-button-row{
    width:100%;
    max-width:100%;
    min-width:0;
    display:flex;
    gap:18px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    padding:0 0 12px;
}

.t4n-colour-row::-webkit-scrollbar,
.t4n-button-row::-webkit-scrollbar{
    display:none;
}

.t4n-colour-row button{
    flex:0 0 112px;
    border:0;
    background:transparent;
    color:#333;
    padding:0;
    text-align:center;
}

.t4n-colour-row button span{
    width:74px;
    height:74px;
    border-radius:999px;
    display:block;
    margin:0 auto 8px;
    background:var(--c);
    border:2px solid #ddd;
    box-shadow:inset 0 0 0 6px #fff, 0 0 0 2px #111;
}

.t4n-colour-row button em{
    font-style:normal;
    font-size:16px;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.t4n-button-row button{
    flex:0 0 auto;
    min-width:140px;
    min-height:54px;
    border:1px solid var(--t4n-line);
    background:#fff;
    color:#111;
    font-size:16px;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.t4n-button-row button.is-active{
    background:#111;
    color:#fff;
}

.t4n-actions{
    width:100%;
    max-width:100%;
    display:flex;
    gap:12px;
    padding:14px 0 24px;
}

.t4n-actions button{
    flex:1;
    min-height:54px;
    border:0;
    text-transform:uppercase;
    letter-spacing:.06em;
    font-weight:800;
}

.t4n-action-primary{
    background:#111;
    color:#fff;
}

.t4n-action-secondary{
    background:#f1f1f1;
    color:#111;
}

.t4n-summary{
    border:1px solid var(--t4n-line);
    padding:22px;
    background:#fff;
}

.t4n-summary h3{
    margin:0 0 8px;
    text-transform:uppercase;
    letter-spacing:.08em;
}

.t4n-summary p{
    color:#777;
}

.t4n-summary-item{
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:10px 0;
    border-bottom:1px solid var(--t4n-line);
}

.t4n-summary-dot{
    width:14px;
    height:14px;
    border-radius:999px;
    background:#111;
    display:inline-block;
    margin:0 6px;
}

.t4n-selector-unlocked .t4n-inline-selector{
    display:none!important;
}

.t4n-selector-locked .t4n-tray{
    display:none;
}

.t4n-png-active .t4n-kit-preview,
.t4n-studio-render-active svg,
.t4n-studio-render-active .t4n-kit-preview{
    display:none!important;
}

@media(max-width:480px){
    .t4n-configurator{
        padding:14px;
        max-width:100%;
    }

    .t4n-lock-summary{
        grid-template-columns:1fr auto;
        padding:12px;
    }

    .t4n-lock-summary button{
        min-width:120px;
        min-height:62px;
    }

    .t4n-public-view-tabs button{
        min-height:62px;
    }

    .t4n-png-render{
        max-width:100%;
    }

    .t4n-inline-row button{
        flex-basis:78%;
        min-height:138px;
        padding:22px 30px;
    }
}

@media(min-width:900px){
    .t4n-configurator{
        padding:24px;
    }

    .t4n-png-render,
    .t4n-kit-preview{
        max-width:680px;
    }
}


/* v7.4.3 — tray styling restore
   Keeps v7.4.3 clean layout, restores light tray and circular colour controls. */

/* Tray shell */
.t4n-configurator .t4n-tray{
    background:#fff!important;
    border-top:1px solid #e5e7eb!important;
    box-shadow:0 -8px 24px rgba(0,0,0,.04)!important;
    overflow:hidden!important;
}

.t4n-configurator .t4n-tray-handle{
    background:#fff!important;
    height:22px!important;
    border:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    padding:0!important;
}

.t4n-configurator .t4n-tray-handle span{
    background:#d7d9dc!important;
    width:80px!important;
    height:7px!important;
    border-radius:99px!important;
    display:block!important;
}

/* Stepbar: light, not black */
.t4n-configurator .t4n-stepbar{
    background:#fff!important;
    border-top:1px solid #e5e7eb!important;
    border-bottom:1px solid #e5e7eb!important;
    box-shadow:none!important;
    display:grid!important;
    grid-template-columns:58px 1fr 58px!important;
    align-items:center!important;
    padding:22px 10px 18px!important;
}

.t4n-configurator .t4n-stepbar button,
.t4n-configurator .t4n-stepbar button[type="button"]{
    background:transparent!important;
    color:#777!important;
    border:0!important;
    box-shadow:none!important;
    width:auto!important;
    min-width:0!important;
    height:44px!important;
    padding:0!important;
    font-size:34px!important;
    line-height:1!important;
}

.t4n-configurator .t4n-stepbar strong{
    color:#111!important;
    background:transparent!important;
    font-size:clamp(28px, 8vw, 46px)!important;
    line-height:1!important;
    letter-spacing:.08em!important;
    text-transform:uppercase!important;
    font-weight:800!important;
}

.t4n-configurator .t4n-stepbar em{
    color:#aaa!important;
    background:transparent!important;
    font-style:normal!important;
}

/* Panels */
.t4n-configurator .t4n-step-panel,
.t4n-configurator .t4n-tray-scroll{
    background:#fff!important;
}

/* Colour rows: restore circular swatches, not black tiles */
.t4n-configurator .t4n-colour-row{
    display:flex!important;
    gap:18px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:0 0 12px!important;
    background:#fff!important;
}

.t4n-configurator .t4n-colour-row button,
.t4n-configurator .t4n-colour-row button[type="button"]{
    flex:0 0 112px!important;
    width:112px!important;
    min-width:112px!important;
    max-width:112px!important;
    min-height:112px!important;
    background:transparent!important;
    color:#333!important;
    border:0!important;
    box-shadow:none!important;
    padding:0!important;
    text-align:center!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:flex-start!important;
}

.t4n-configurator .t4n-colour-row button span{
    width:74px!important;
    height:74px!important;
    min-width:74px!important;
    min-height:74px!important;
    border-radius:999px!important;
    display:block!important;
    margin:0 auto 8px!important;
    background:var(--c)!important;
    border:2px solid #ddd!important;
    box-shadow:inset 0 0 0 6px #fff, 0 0 0 2px #111!important;
}

.t4n-configurator .t4n-colour-row button em{
    color:#333!important;
    background:transparent!important;
    font-style:normal!important;
    font-size:16px!important;
    line-height:1.1!important;
    text-transform:uppercase!important;
    letter-spacing:.04em!important;
}

/* Non-colour buttons: clean white pills/cards */
.t4n-configurator .t4n-button-row{
    display:flex!important;
    gap:12px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    padding:0 0 12px!important;
    background:#fff!important;
}

.t4n-configurator .t4n-button-row button,
.t4n-configurator .t4n-button-row button[type="button"]{
    flex:0 0 auto!important;
    min-width:140px!important;
    min-height:54px!important;
    background:#fff!important;
    color:#111!important;
    border:1px solid #e5e7eb!important;
    box-shadow:none!important;
    padding:0 18px!important;
    font-size:16px!important;
    text-transform:uppercase!important;
    letter-spacing:.06em!important;
}

.t4n-configurator .t4n-button-row button.is-active{
    background:#111!important;
    color:#fff!important;
    border-color:#111!important;
}

/* Headings remain clean and readable */
.t4n-configurator .t4n-field-block h3,
.t4n-configurator .t4n-choice-block h3{
    color:#111!important;
    background:transparent!important;
    font-weight:400!important;
}

/* Keep front/back buttons black — these are intentional */
.t4n-configurator .t4n-public-view-tabs button{
    background:#111!important;
    color:#fff!important;
    border:0!important;
}


/* v7.4.3 — tray compact sizing
   Keep alignment and restored styling, reduce oversized tray controls. */

.t4n-configurator .t4n-step-panel{
    padding:18px 0 6px!important;
}

.t4n-configurator .t4n-field-block,
.t4n-configurator .t4n-choice-block{
    margin-bottom:22px!important;
}

.t4n-configurator .t4n-field-block h3,
.t4n-configurator .t4n-choice-block h3{
    font-size:clamp(18px, 4.4vw, 26px)!important;
    letter-spacing:.075em!important;
    margin-bottom:14px!important;
}

/* Compact colour swatches */
.t4n-configurator .t4n-colour-row{
    gap:12px!important;
    padding-bottom:8px!important;
}

.t4n-configurator .t4n-colour-row button,
.t4n-configurator .t4n-colour-row button[type="button"]{
    flex:0 0 82px!important;
    width:82px!important;
    min-width:82px!important;
    max-width:82px!important;
    min-height:86px!important;
}

.t4n-configurator .t4n-colour-row button span{
    width:56px!important;
    height:56px!important;
    min-width:56px!important;
    min-height:56px!important;
    margin-bottom:7px!important;
    box-shadow:inset 0 0 0 5px #fff, 0 0 0 2px #111!important;
}

.t4n-configurator .t4n-colour-row button em{
    font-size:13px!important;
    letter-spacing:.045em!important;
    line-height:1.05!important;
}

/* Compact rectangular options */
.t4n-configurator .t4n-button-row{
    gap:10px!important;
    padding-bottom:8px!important;
}

.t4n-configurator .t4n-button-row button,
.t4n-configurator .t4n-button-row button[type="button"]{
    min-width:118px!important;
    min-height:44px!important;
    padding:0 14px!important;
    font-size:13px!important;
    letter-spacing:.07em!important;
}

/* Compact bottom actions */
.t4n-configurator .t4n-actions{
    gap:10px!important;
    padding:10px 0 18px!important;
}

.t4n-configurator .t4n-actions button{
    min-height:50px!important;
    font-size:13px!important;
    letter-spacing:.08em!important;
}

/* Stepbar stays readable but less tall */
.t4n-configurator .t4n-stepbar{
    grid-template-columns:48px 1fr 48px!important;
    padding:16px 8px 14px!important;
}

.t4n-configurator .t4n-stepbar button,
.t4n-configurator .t4n-stepbar button[type="button"]{
    height:38px!important;
    font-size:28px!important;
}

.t4n-configurator .t4n-stepbar strong{
    font-size:clamp(24px, 6.6vw, 36px)!important;
}

.t4n-configurator .t4n-stepbar em{
    margin-top:8px!important;
    font-size:clamp(17px, 4.4vw, 24px)!important;
}

.t4n-configurator .t4n-tray-handle{
    height:18px!important;
}

.t4n-configurator .t4n-tray-handle span{
    width:68px!important;
    height:6px!important;
}

@media(max-width:480px){
    .t4n-configurator .t4n-step-panel{
        padding-top:16px!important;
    }

    .t4n-configurator .t4n-field-block,
    .t4n-configurator .t4n-choice-block{
        margin-bottom:20px!important;
    }

    .t4n-configurator .t4n-colour-row button,
    .t4n-configurator .t4n-colour-row button[type="button"]{
        flex-basis:78px!important;
        width:78px!important;
        min-width:78px!important;
        max-width:78px!important;
    }

    .t4n-configurator .t4n-colour-row button span{
        width:54px!important;
        height:54px!important;
        min-width:54px!important;
        min-height:54px!important;
    }

    .t4n-configurator .t4n-button-row button,
    .t4n-configurator .t4n-button-row button[type="button"]{
        min-width:112px!important;
        min-height:42px!important;
    }
}


/* v7.4.3 — tray ultra compact sizing
   More compact control tray for mobile: smaller swatches, tighter spacing, shorter buttons. */

.t4n-configurator .t4n-tray{
    margin-top:8px!important;
}

.t4n-configurator .t4n-tray-handle{
    height:14px!important;
}

.t4n-configurator .t4n-tray-handle span{
    width:58px!important;
    height:5px!important;
}

.t4n-configurator .t4n-stepbar{
    grid-template-columns:42px 1fr 42px!important;
    padding:12px 6px 10px!important;
}

.t4n-configurator .t4n-stepbar button,
.t4n-configurator .t4n-stepbar button[type="button"]{
    height:32px!important;
    font-size:24px!important;
}

.t4n-configurator .t4n-stepbar strong{
    font-size:clamp(21px, 5.7vw, 30px)!important;
    letter-spacing:.075em!important;
}

.t4n-configurator .t4n-stepbar em{
    margin-top:5px!important;
    font-size:clamp(14px, 3.7vw, 19px)!important;
}

.t4n-configurator .t4n-step-panel{
    padding:12px 0 4px!important;
}

.t4n-configurator .t4n-field-block,
.t4n-configurator .t4n-choice-block{
    margin-bottom:15px!important;
}

.t4n-configurator .t4n-field-block h3,
.t4n-configurator .t4n-choice-block h3{
    font-size:clamp(15px, 3.7vw, 22px)!important;
    letter-spacing:.07em!important;
    margin-bottom:9px!important;
}

/* Ultra compact colour swatches */
.t4n-configurator .t4n-colour-row{
    gap:8px!important;
    padding-bottom:5px!important;
}

.t4n-configurator .t4n-colour-row button,
.t4n-configurator .t4n-colour-row button[type="button"]{
    flex:0 0 66px!important;
    width:66px!important;
    min-width:66px!important;
    max-width:66px!important;
    min-height:72px!important;
}

.t4n-configurator .t4n-colour-row button span{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    margin-bottom:5px!important;
    border-width:1px!important;
    box-shadow:inset 0 0 0 4px #fff, 0 0 0 2px #111!important;
}

.t4n-configurator .t4n-colour-row button em{
    font-size:10.5px!important;
    letter-spacing:.04em!important;
    line-height:1!important;
}

/* Ultra compact option buttons */
.t4n-configurator .t4n-button-row{
    gap:8px!important;
    padding-bottom:5px!important;
}

.t4n-configurator .t4n-button-row button,
.t4n-configurator .t4n-button-row button[type="button"]{
    min-width:96px!important;
    min-height:36px!important;
    padding:0 10px!important;
    font-size:11px!important;
    letter-spacing:.065em!important;
}

/* Actions at bottom */
.t4n-configurator .t4n-actions{
    gap:8px!important;
    padding:8px 0 12px!important;
}

.t4n-configurator .t4n-actions button{
    min-height:42px!important;
    font-size:11px!important;
    letter-spacing:.075em!important;
    padding:0 10px!important;
}

@media(max-width:480px){
    .t4n-configurator .t4n-step-panel{
        padding-top:10px!important;
    }

    .t4n-configurator .t4n-field-block,
    .t4n-configurator .t4n-choice-block{
        margin-bottom:14px!important;
    }

    .t4n-configurator .t4n-colour-row button,
    .t4n-configurator .t4n-colour-row button[type="button"]{
        flex-basis:64px!important;
        width:64px!important;
        min-width:64px!important;
        max-width:64px!important;
    }

    .t4n-configurator .t4n-colour-row button span{
        width:42px!important;
        height:42px!important;
        min-width:42px!important;
        min-height:42px!important;
    }

    .t4n-configurator .t4n-button-row button,
    .t4n-configurator .t4n-button-row button[type="button"]{
        min-width:92px!important;
        min-height:34px!important;
        font-size:10.5px!important;
    }
}