@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700;800&display=swap');

.imw-designer{
	--black:#000;
	--charcoal:#18181B;
	--panel:#202023;
	--white:#fff;
	--off:#F4F4F2;
	--muted:#71717A;
	--grey:#A1A1AA;
	width:100%;
	max-width:1500px;
	margin:0 auto;
	background:var(--off);
	color:var(--black);
	font-family:"Inter",sans-serif;
	border:1px solid rgba(0,0,0,.12);
	box-sizing:border-box;
}
.imw-designer *, .imw-designer *::before, .imw-designer *::after{box-sizing:border-box}
.imw-designer button,.imw-designer input,.imw-designer textarea,.imw-designer select{font:inherit}
.imw-designer button{cursor:pointer}
.imw-designer__topbar{
	display:flex;
	align-items:flex-end;
	justify-content:space-between;
	gap:30px;
	padding:28px 32px;
	background:#000;
	color:#fff;
}
.imw-designer__eyebrow,.imw-panel__label{
	display:block;
	margin-bottom:10px;
	color:var(--muted);
	font-size:7px;
	font-weight:800;
	letter-spacing:1.5px;
	text-transform:uppercase;
}
.imw-designer__topbar h2{
	margin:0!important;
	font-family:"Bebas Neue",sans-serif!important;
	font-size:clamp(38px,4vw,60px)!important;
	font-weight:400!important;
	line-height:.85!important;
	color:#fff!important;
	-webkit-text-fill-color:#fff!important;
}
.imw-designer__price{text-align:right}
.imw-designer__price span{display:block;margin-bottom:8px;color:var(--muted);font-size:7px;font-weight:800;letter-spacing:1.3px}
.imw-designer__price strong{font-family:"Bebas Neue",sans-serif;font-size:34px;font-weight:400;color:#fff}
.imw-designer__layout{
	display:grid;
	grid-template-columns:280px minmax(0,1fr) 300px;
	min-height:760px;
}
.imw-designer__tools,.imw-designer__right{
	min-width:0;
	background:#fff;
}
.imw-designer__tools{border-right:1px solid rgba(0,0,0,.12)}
.imw-designer__right{border-left:1px solid rgba(0,0,0,.12)}
.imw-panel{
	padding:23px;
	border-bottom:1px solid rgba(0,0,0,.1);
}
.imw-panel--checkout{background:#18181B;color:#fff}
.imw-panel textarea,.imw-panel select,.imw-panel input[type="search"]{
	width:100%;
	border:1px solid rgba(0,0,0,.16);
	border-radius:0;
	background:#F8F8F6;
	color:#000;
	box-shadow:none;
	outline:none;
}
.imw-panel textarea{min-height:78px;padding:12px;resize:vertical}
.imw-panel input[type="search"]{height:44px;padding:0 12px;margin-top:9px}
.imw-panel select{height:44px;padding:0 10px}
.imw-control-row{display:flex;gap:8px;margin-top:9px;align-items:center}
.imw-control-row--stack{display:block}
.imw-control-row select{flex:1}
.imw-control-row input[type="color"]{width:46px;height:44px;padding:4px;border:1px solid rgba(0,0,0,.16);background:#fff}
.imw-range{display:grid;grid-template-columns:54px minmax(0,1fr);gap:8px;width:100%;align-items:center;color:#52525B;font-size:9px;font-weight:700;text-transform:uppercase}
.imw-range--value{grid-template-columns:70px minmax(0,1fr) 42px}
.imw-range output{font-size:8px;font-weight:800;text-align:right;color:#71717A}
.imw-range input[type="range"]{width:100%;accent-color:#000}
.imw-range input[type="range"]:disabled{opacity:.35;cursor:not-allowed}
.imw-mini-buttons,.imw-action-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:10px}
.imw-mini-buttons{grid-template-columns:46px 46px minmax(0,1fr)}
.imw-mini-buttons button,.imw-action-grid button,.imw-view-tabs button,.imw-workspace__toolbar button{
	min-height:42px;
	padding:0 10px;
	background:#fff;
	color:#000;
	border:1px solid rgba(0,0,0,.18);
	border-radius:0;
	font-size:8px;
	font-weight:800;
	letter-spacing:.7px;
	text-transform:uppercase;
}
.imw-mini-buttons button.is-active{background:#000;color:#fff}
.imw-view-tabs{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.imw-view-tabs button.is-active{background:#000;color:#fff}
.imw-upload-button{
	min-height:52px;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:10px 14px;
	background:#000;
	color:#fff;
	font-size:8px;
	font-weight:800;
	letter-spacing:1px;
	text-align:center;
	text-transform:uppercase;
	cursor:pointer;
}
.imw-upload-button input{display:none}
.imw-panel__help{margin:10px 0 0;color:#71717A;font-size:9px;line-height:1.6}
.imw-designer__workspace{min-width:0;padding:18px;background:#EDEDE9}
.imw-workspace__toolbar{
	min-height:54px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:15px;
	padding:7px;
	background:#fff;
	border:1px solid rgba(0,0,0,.12);
}
.imw-toolbar-group{display:flex;align-items:center;gap:6px}
.imw-toolbar-group span{min-width:48px;text-align:center;font-size:9px;font-weight:700}
.imw-workspace__toolbar button{min-width:40px}
.imw-canvas-shell{
	position:relative;
	width:100%;
	aspect-ratio:1;
	margin-top:12px;
	display:flex;
	align-items:center;
	justify-content:center;
	overflow:hidden;
	background:#D9D9D4;
	border:1px solid rgba(0,0,0,.12);
}
.imw-canvas-stage{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.imw-canvas-stage>div{margin:auto}
.imw-canvas-loading{
	position:absolute;
	z-index:3;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	background:#18181B;
	color:#fff;
	font-size:9px;
	font-weight:800;
	letter-spacing:1.5px;
	text-transform:uppercase;
}
.imw-canvas-loading.is-hidden{display:none}
.imw-workspace__note{
	display:flex;
	justify-content:space-between;
	gap:20px;
	padding:13px 0 0;
	color:#71717A;
	font-size:8px;
	line-height:1.5;
	text-transform:uppercase;
}
.imw-variations{display:grid;gap:12px}
.imw-variation-field label{display:block;margin-bottom:7px;color:#52525B;font-size:7px;font-weight:800;letter-spacing:1px;text-transform:uppercase}
.imw-variation-field select{width:100%}
.imw-layers{display:grid;gap:7px;max-height:330px;overflow:auto}
.imw-layer-item{
	width:100%;
	min-height:48px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:10px;
	padding:0 12px;
	background:#F8F8F6;
	border:1px solid rgba(0,0,0,.12);
	color:#000;
	text-align:left;
}
.imw-layer-item.is-active{background:#000;color:#fff}
.imw-layer-item__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px;font-weight:700}
.imw-layer-item__type{color:#71717A;font-size:7px;text-transform:uppercase}
.imw-empty-state{margin:0;color:#71717A;font-size:10px;line-height:1.7}
.imw-secondary-button,.imw-primary-button{
	width:100%;
	min-height:58px;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:15px;
	padding:0 18px;
	border-radius:0;
	font-size:8px;
	font-weight:800;
	letter-spacing:1.1px;
	text-transform:uppercase;
}
.imw-secondary-button{margin-bottom:8px;background:transparent;color:#fff;border:1px solid rgba(255,255,255,.25)}
.imw-primary-button{justify-content:space-between;background:#fff;color:#000;border:1px solid #fff}
.imw-panel--checkout .imw-panel__help{color:#A1A1AA}
.imw-designer__toast{
	position:fixed;
	z-index:999999;
	right:22px;
	bottom:22px;
	max-width:380px;
	padding:16px 18px;
	background:#000;
	color:#fff;
	font-size:10px;
	line-height:1.6;
	opacity:0;
	transform:translateY(15px);
	pointer-events:none;
	transition:.25s ease;
}
.imw-designer__toast.is-visible{opacity:1;transform:none}
.imw-designer__toast.is-error{background:#7f1d1d}
.imw-designer.is-busy .imw-primary-button,.imw-designer.is-busy .imw-secondary-button{opacity:.45;pointer-events:none}
.imw-designer-error{padding:25px;background:#fff;border:1px solid #dcdcde;color:#000}

@media(max-width:1180px){
	.imw-designer__layout{grid-template-columns:240px minmax(0,1fr)}
	.imw-designer__right{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr 1fr;border-left:0;border-top:1px solid rgba(0,0,0,.12)}
	.imw-designer__right .imw-panel{border-right:1px solid rgba(0,0,0,.1);border-bottom:0}
}
@media(max-width:850px){
	.imw-designer__layout{display:block}
	.imw-designer__tools,.imw-designer__right{display:grid;grid-template-columns:1fr 1fr;border:0}
	.imw-designer__tools{border-bottom:1px solid rgba(0,0,0,.12)}
	.imw-designer__right{border-top:1px solid rgba(0,0,0,.12)}
	.imw-panel{border-right:1px solid rgba(0,0,0,.1)}
	.imw-panel--checkout{grid-column:1/-1}
}
@media(max-width:620px){
	.imw-designer__topbar{align-items:flex-start;flex-direction:column;padding:22px}
	.imw-designer__price{text-align:left}
	.imw-designer__tools,.imw-designer__right{grid-template-columns:1fr}
	.imw-panel,.imw-designer__right .imw-panel{border-right:0;border-bottom:1px solid rgba(0,0,0,.1)}
	.imw-designer__workspace{padding:10px}
	.imw-workspace__toolbar{align-items:stretch;flex-direction:column}
	.imw-toolbar-group{justify-content:center}
	.imw-workspace__note{flex-direction:column;gap:5px}
}

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700;800&display=swap');


/* =========================================================
   BASE
========================================================= */

.imw-dyo-tee-hero{

    --black:#000000;
    --charcoal:#18181B;
    --panel:#202023;
    --white:#FFFFFF;
    --grey:#A1A1AA;
    --muted:#71717A;
    --border:rgba(255,255,255,.14);

    position:relative;

    width:100%;
    max-width:100%;

    overflow:hidden;

    background:#000000;

    color:#FFFFFF;

    font-family:"Inter",sans-serif;

}

.imw-dyo-tee-hero *,
.imw-dyo-tee-hero *::before,
.imw-dyo-tee-hero *::after{

    box-sizing:border-box;

}


/* =========================================================
   BACKGROUND WORD
========================================================= */

.imw-dyo-tee-hero::before{

    content:"CREATE";

    position:absolute;

    left:-25px;
    bottom:-60px;

    white-space:nowrap;

    font-family:"Bebas Neue",sans-serif;

    font-size:clamp(
        190px,
        26vw,
        470px
    );

    line-height:.7;

    color:transparent;

    -webkit-text-fill-color:transparent;

    -webkit-text-stroke:
        1px
        rgba(255,255,255,.035);

    pointer-events:none;

}


/* =========================================================
   MAIN CONTAINER
========================================================= */

.imw-dyo-tee-hero__container{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(540px,.92fr);

    width:100%;

    min-height:820px;

}


/* =========================================================
   LEFT CONTENT
========================================================= */

.imw-dyo-tee-hero__content{

    min-width:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:
        90px
        clamp(40px,6vw,110px);

}


/* EYEBROW */

.imw-dyo-tee-hero__eyebrow{

    display:flex;

    align-items:center;

    gap:13px;

    margin-bottom:27px;

    color:#A1A1AA !important;

    font-size:9px;

    font-weight:700;

    letter-spacing:2.3px;

    text-transform:uppercase;

}

.imw-dyo-tee-hero__eyebrow-line{

    width:38px;

    height:1px;

    flex:0 0 38px;

    background:#FFFFFF;

}


/* =========================================================
   H1
========================================================= */

.imw-dyo-tee-hero
.imw-dyo-tee-hero__title,
.imw-dyo-tee-hero
h1.imw-dyo-tee-hero__title{

    width:100%;

    max-width:820px;

    margin:0 !important;

    font-family:
        "Bebas Neue",
        "Arial Narrow",
        Impact,
        sans-serif !important;

    font-size:clamp(
        74px,
        7vw,
        118px
    ) !important;

    font-weight:400 !important;

    line-height:.82 !important;

    letter-spacing:.3px !important;

    text-transform:uppercase;

    color:#FFFFFF !important;

    -webkit-text-fill-color:#FFFFFF !important;

    -webkit-text-stroke:0 !important;

}


/* =========================================================
   INTRO
========================================================= */

.imw-dyo-tee-hero__intro{

    width:100%;

    max-width:660px;

    margin:
        30px
        0
        0;

    color:#A1A1AA !important;

    font-size:14px;

    line-height:1.85;

}

.imw-dyo-tee-hero__intro strong{

    color:#FFFFFF !important;

    -webkit-text-fill-color:#FFFFFF !important;

    font-weight:600;

}


/* =========================================================
   QUICK STEPS
========================================================= */

.imw-dyo-tee-hero__steps{

    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    width:100%;

    max-width:700px;

    margin-top:35px;

    border-top:
        1px solid
        var(--border);

    border-left:
        1px solid
        var(--border);

}

.imw-dyo-tee-hero__step{

    min-width:0;

    min-height:118px;

    padding:20px;

    border-right:
        1px solid
        var(--border);

    border-bottom:
        1px solid
        var(--border);

}

.imw-dyo-tee-hero__step-number{

    display:block;

    margin-bottom:17px;

    color:#71717A !important;

    font-family:"Bebas Neue",sans-serif;

    font-size:20px;

}

.imw-dyo-tee-hero__step-text{

    display:block;

    color:#FFFFFF !important;

    -webkit-text-fill-color:#FFFFFF !important;

    font-size:8px;

    font-weight:700;

    line-height:1.5;

    letter-spacing:1.1px;

    text-transform:uppercase;

}


/* =========================================================
   CTA
========================================================= */

.imw-dyo-tee-hero__actions{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:34px;

}

.imw-dyo-tee-hero__primary,
.imw-dyo-tee-hero__primary:visited,
.imw-dyo-tee-hero__primary:hover,
.imw-dyo-tee-hero__primary:focus,
.imw-dyo-tee-hero__primary:active{

    min-height:63px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:26px;

    padding:
        0
        31px;

    background:#FFFFFF !important;

    background-color:#FFFFFF !important;

    color:#000000 !important;

    -webkit-text-fill-color:#000000 !important;

    border:
        1px solid
        #FFFFFF !important;

    border-radius:0 !important;

    outline:none !important;

    box-shadow:none !important;

    text-decoration:none !important;

    font-size:9px;

    font-weight:800;

    letter-spacing:1.5px;

    text-transform:uppercase;

    transition:
        transform .3s ease;

}

.imw-dyo-tee-hero__primary:hover{

    transform:translateY(-3px);

}

.imw-dyo-tee-hero__primary svg{

    width:18px;

    height:18px;

}


.imw-dyo-tee-hero__secondary,
.imw-dyo-tee-hero__secondary:visited,
.imw-dyo-tee-hero__secondary:hover,
.imw-dyo-tee-hero__secondary:focus,
.imw-dyo-tee-hero__secondary:active{

    min-height:63px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:
        0
        28px;

    background:transparent !important;

    color:#FFFFFF !important;

    -webkit-text-fill-color:#FFFFFF !important;

    border:
        1px solid
        rgba(255,255,255,.28) !important;

    border-radius:0 !important;

    outline:none !important;

    box-shadow:none !important;

    text-decoration:none !important;

    font-size:9px;

    font-weight:700;

    letter-spacing:1.4px;

    text-transform:uppercase;

}


/* =========================================================
   TRUST
========================================================= */

.imw-dyo-tee-hero__trust{

    display:flex;

    flex-wrap:wrap;

    gap:
        15px
        28px;

    margin-top:28px;

}

.imw-dyo-tee-hero__trust-item{

    display:flex;

    align-items:center;

    gap:9px;

    color:#A1A1AA !important;

    font-size:8px;

    font-weight:700;

    letter-spacing:1.1px;

    text-transform:uppercase;

}

.imw-dyo-tee-hero__trust-dot{

    width:5px;

    height:5px;

    flex:0 0 5px;

    border-radius:50%;

    background:#FFFFFF;

}


/* =========================================================
   RIGHT DESIGNER AREA
========================================================= */

.imw-dyo-tee-hero__designer{

    position:relative;

    min-width:0;

    width:100%;

    min-height:820px;

    padding:
        28px;

    display:flex;

    flex-direction:column;

    background:#18181B;

    border-left:
        1px solid
        var(--border);

}


/* TOP BAR */

.imw-dyo-tee-hero__designer-top{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    min-height:58px;

    padding:
        0
        18px;

    border:
        1px solid
        var(--border);

    background:#000000;

}

.imw-dyo-tee-hero__designer-label{

    color:#FFFFFF !important;

    font-size:8px;

    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;

}

.imw-dyo-tee-hero__designer-status{

    display:flex;

    align-items:center;

    gap:8px;

    color:#A1A1AA !important;

    font-size:7px;

    font-weight:700;

    letter-spacing:1.2px;

    text-transform:uppercase;

}

.imw-dyo-tee-hero__status-dot{

    width:6px;

    height:6px;

    border-radius:50%;

    background:#FFFFFF;

}


/* =========================================================
   DESIGNER BODY
========================================================= */

.imw-dyo-tee-hero__designer-body{

    flex:1;

    display:grid;

    grid-template-columns:
        84px
        minmax(0,1fr);

    min-height:0;

    margin-top:12px;

}


/* =========================================================
   TOOLBAR
========================================================= */

.imw-dyo-tee-hero__toolbar{

    display:flex;

    flex-direction:column;

    gap:1px;

    border:
        1px solid
        var(--border);

    background:#000000;

}

.imw-dyo-tee-hero__tool{

    min-height:78px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:10px;

    border-bottom:
        1px solid
        var(--border);

    color:#71717A;

}

.imw-dyo-tee-hero__tool:first-child{

    background:#FFFFFF;

    color:#000000;

}

.imw-dyo-tee-hero__tool svg{

    width:20px;

    height:20px;

}

.imw-dyo-tee-hero__tool span{

    font-size:6px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}


/* =========================================================
   PREVIEW
========================================================= */

.imw-dyo-tee-hero__preview{

    position:relative;

    min-width:0;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:
        55px
        30px
        90px;

    border-top:
        1px solid
        var(--border);

    border-right:
        1px solid
        var(--border);

    border-bottom:
        1px solid
        var(--border);

    background:

        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),

        #202023;

    background-size:
        28px
        28px;

}


/* =========================================================
   T-SHIRT
========================================================= */

.imw-dyo-tee-hero__shirt{

    position:relative;

    width:
        min(
            420px,
            80%
        );

    filter:
        drop-shadow(
            0
            30px
            40px
            rgba(0,0,0,.4)
        );

}

.imw-dyo-tee-hero__shirt svg{

    display:block;

    width:100%;

    height:auto;

}


/* =========================================================
   DESIGN BOX
========================================================= */

.imw-dyo-tee-hero__design-box{

    position:absolute;

    z-index:4;

    top:34%;

    left:50%;

    transform:
        translateX(-50%);

    width:44%;

    min-height:112px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:12px;

    border:
        1px dashed
        rgba(0,0,0,.42);

    text-align:center;

}

.imw-dyo-tee-hero__design-box::before,
.imw-dyo-tee-hero__design-box::after{

    content:"";

    position:absolute;

    width:7px;

    height:7px;

    background:#000000;

    border:
        1px solid
        #FFFFFF;

}

.imw-dyo-tee-hero__design-box::before{

    top:-4px;

    left:-4px;

}

.imw-dyo-tee-hero__design-box::after{

    right:-4px;

    bottom:-4px;

}

.imw-dyo-tee-hero__design-text{

    font-family:"Bebas Neue",sans-serif;

    font-size:clamp(
        22px,
        2.4vw,
        38px
    );

    line-height:.86;

    color:#000000 !important;

    -webkit-text-fill-color:#000000 !important;

}


/* =========================================================
   PREVIEW LABELS
========================================================= */

.imw-dyo-tee-hero__preview-label{

    position:absolute;

    top:20px;

    left:20px;

    padding:
        9px
        11px;

    background:#000000;

    border:
        1px solid
        var(--border);

    color:#FFFFFF !important;

    font-size:7px;

    font-weight:700;

    letter-spacing:1.3px;

    text-transform:uppercase;

}

.imw-dyo-tee-hero__zoom{

    position:absolute;

    top:20px;

    right:20px;

    color:#71717A !important;

    font-size:7px;

    font-weight:700;

    letter-spacing:1.2px;

}


/* =========================================================
   BOTTOM CONTROL
========================================================= */

.imw-dyo-tee-hero__preview-bottom{

    position:absolute;

    z-index:7;

    left:20px;
    right:20px;
    bottom:20px;

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    gap:10px;

}

.imw-dyo-tee-hero__selected{

    min-width:0;

    padding:
        14px
        16px;

    border:
        1px solid
        var(--border);

    background:
        rgba(0,0,0,.8);

}

.imw-dyo-tee-hero__selected small{

    display:block;

    margin-bottom:5px;

    color:#71717A !important;

    font-size:6px;

    font-weight:700;

    letter-spacing:1.1px;

}

.imw-dyo-tee-hero__selected strong{

    display:block;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

    color:#FFFFFF !important;

    -webkit-text-fill-color:#FFFFFF !important;

    font-size:8px;

    font-weight:700;

    letter-spacing:1px;

}

.imw-dyo-tee-hero__price{

    min-width:105px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:
        0
        16px;

    background:#FFFFFF;

    font-family:"Bebas Neue",sans-serif;

    font-size:29px;

    color:#000000 !important;

    -webkit-text-fill-color:#000000 !important;

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1100px){

    .imw-dyo-tee-hero__container{

        grid-template-columns:
            minmax(0,1fr)
            minmax(460px,.9fr);

    }

}


@media(max-width:991px){

    .imw-dyo-tee-hero{

        overflow-x:hidden !important;

    }

    .imw-dyo-tee-hero::before{

        display:none;

    }

    .imw-dyo-tee-hero__container{

        display:flex;

        flex-direction:column;

        min-height:0;

    }

    .imw-dyo-tee-hero__content{

        width:100%;

        padding:
            80px
            40px
            70px;

    }

    .imw-dyo-tee-hero__designer{

        width:100%;

        min-height:760px;

        border-left:0;

        border-top:
            1px solid
            var(--border);

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767px){

    .imw-dyo-tee-hero{

        width:100% !important;

        max-width:100% !important;

        overflow:hidden !important;

    }


    .imw-dyo-tee-hero__container{

        display:block !important;

        width:100% !important;

        max-width:100% !important;

        min-width:0 !important;

        margin:0 !important;

    }


    /* CONTENT */

    .imw-dyo-tee-hero__content{

        width:100% !important;

        max-width:100% !important;

        min-width:0 !important;

        padding:
            60px
            18px
            55px !important;

        overflow:hidden !important;

    }


    .imw-dyo-tee-hero__eyebrow{

        font-size:8px;

        letter-spacing:1.6px;

    }


    .imw-dyo-tee-hero__eyebrow-line{

        width:27px;

        flex-basis:27px;

    }


    .imw-dyo-tee-hero
    .imw-dyo-tee-hero__title{

        width:100% !important;

        max-width:100% !important;

        font-size:clamp(
            43px,
            12.5vw,
            58px
        ) !important;

        line-height:.88 !important;

        letter-spacing:0 !important;

        word-break:normal !important;

        overflow-wrap:normal !important;

    }


    .imw-dyo-tee-hero__intro{

        width:100%;

        max-width:100%;

        font-size:13px;

        line-height:1.75;

    }


    /* STEPS */

    .imw-dyo-tee-hero__steps{

        grid-template-columns:
            minmax(0,1fr);

        width:100%;

        max-width:100%;

    }


    .imw-dyo-tee-hero__step{

        min-height:90px;

    }


    /* BUTTONS */

    .imw-dyo-tee-hero__actions{

        flex-direction:column;

        width:100%;

    }


    .imw-dyo-tee-hero__primary,
    .imw-dyo-tee-hero__secondary{

        width:100% !important;

        max-width:100% !important;

        min-width:0 !important;

        padding:
            0
            16px;

        white-space:normal;

        text-align:center;

    }


    /* TRUST */

    .imw-dyo-tee-hero__trust{

        display:grid;

        grid-template-columns:1fr;

        gap:11px;

    }


    /* DESIGNER */

    .imw-dyo-tee-hero__designer{

        width:100% !important;

        max-width:100% !important;

        min-width:0 !important;

        min-height:auto;

        padding:
            12px;

        overflow:hidden;

    }


    .imw-dyo-tee-hero__designer-top{

        padding:
            0
            13px;

    }


    .imw-dyo-tee-hero__designer-body{

        display:block;

    }


    /* MOBILE TOOLBAR */

    .imw-dyo-tee-hero__toolbar{

        display:grid;

        grid-template-columns:
            repeat(4,minmax(0,1fr));

        width:100%;

        border-bottom:0;

    }


    .imw-dyo-tee-hero__tool{

        min-width:0;

        min-height:70px;

        border-right:
            1px solid
            var(--border);

    }


    /* PREVIEW */

    .imw-dyo-tee-hero__preview{

        width:100%;

        max-width:100%;

        min-width:0;

        min-height:540px;

        padding:
            60px
            15px
            100px;

        border-left:
            1px solid
            var(--border);

    }


    .imw-dyo-tee-hero__shirt{

        width:
            min(
                340px,
                88%
            );

    }


    .imw-dyo-tee-hero__design-text{

        font-size:26px;

    }


    .imw-dyo-tee-hero__preview-bottom{

        left:10px;

        right:10px;

        bottom:10px;

    }


    .imw-dyo-tee-hero__selected{

        padding:
            12px;

    }


    .imw-dyo-tee-hero__price{

        min-width:90px;

        font-size:25px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:420px){

    .imw-dyo-tee-hero__content{

        padding:
            55px
            15px
            50px !important;

    }


    .imw-dyo-tee-hero
    .imw-dyo-tee-hero__title{

        font-size:39px !important;

    }


    .imw-dyo-tee-hero__designer-label{

        font-size:7px;

    }


    .imw-dyo-tee-hero__designer-status{

        display:none;

    }


    .imw-dyo-tee-hero__preview{

        min-height:490px;

    }


    .imw-dyo-tee-hero__shirt{

        width:95%;

    }


    .imw-dyo-tee-hero__design-text{

        font-size:23px;

    }

}



/* =========================================================
   ORIGINAL DESIGN-YOUR-OWN-T-SHIRT HERO
   REAL DESIGNER EMBED OVERRIDES ONLY

   The original page design above is preserved unchanged.
   These rules only make the real designer fit inside the
   original right-side hero column.
========================================================= */

.imw-dyo-tee-hero__designer--live{
	min-width:0;
	overflow:hidden;
	padding:18px;
}

.imw-dyo-tee-hero__designer-live{
	width:100%;
	max-width:100%;
	min-width:0;
	flex:1;
	display:flex;
	align-items:stretch;
}

.imw-dyo-tee-hero__designer-live > .imw-designer{
	width:100%;
	max-width:none;
	min-width:0;
	margin:0;
	border:1px solid rgba(255,255,255,.14);
	box-shadow:0 28px 70px rgba(0,0,0,.28);
}

.imw-dyo-tee-hero__designer-live .imw-designer__topbar{
	padding:17px 18px;
}

.imw-dyo-tee-hero__designer-live .imw-designer__topbar h2{
	font-size:clamp(28px,2.6vw,45px)!important;
}

.imw-dyo-tee-hero__designer-live .imw-designer__layout{
	grid-template-columns:185px minmax(0,1fr);
	min-height:760px;
}

.imw-dyo-tee-hero__designer-live .imw-designer__right{
	grid-column:1/-1;
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	border-left:0;
	border-top:1px solid rgba(0,0,0,.12);
}

.imw-dyo-tee-hero__designer-live .imw-designer__right .imw-panel{
	border-right:1px solid rgba(0,0,0,.1);
	border-bottom:0;
}

.imw-dyo-tee-hero__designer-live .imw-panel{
	padding:15px;
}

.imw-dyo-tee-hero__designer-live .imw-canvas-shell{
	aspect-ratio:1;
}

.imw-dyo-tee-hero__designer-live .imw-designer__workspace{
	padding:12px;
}

/* Large screens: give the real editor a little more room. */
@media(min-width:1500px){
	.imw-dyo-tee-hero__container{
		grid-template-columns:minmax(0,.78fr) minmax(720px,1.22fr);
	}

	.imw-dyo-tee-hero__designer-live .imw-designer__layout{
		grid-template-columns:205px minmax(0,1fr) 230px;
	}

	.imw-dyo-tee-hero__designer-live .imw-designer__right{
		grid-column:auto;
		display:block;
		border-left:1px solid rgba(0,0,0,.12);
		border-top:0;
	}

	.imw-dyo-tee-hero__designer-live .imw-designer__right .imw-panel{
		border-right:0;
		border-bottom:1px solid rgba(0,0,0,.1);
	}
}

/* Tablet: original hero already stacks; let the real editor use full width. */
@media(max-width:991px){
	.imw-dyo-tee-hero__designer--live{
		padding:16px;
	}

	.imw-dyo-tee-hero__designer-live .imw-designer__layout{
		grid-template-columns:220px minmax(0,1fr);
	}

	.imw-dyo-tee-hero__designer-live .imw-designer__right{
		grid-template-columns:repeat(3,minmax(0,1fr));
	}
}

/* Mobile: use the plugin's natural stacked editor layout. */
@media(max-width:767px){
	.imw-dyo-tee-hero__designer--live{
		padding:10px!important;
	}

	.imw-dyo-tee-hero__designer-live .imw-designer__layout{
		display:block;
		min-height:0;
	}

	.imw-dyo-tee-hero__designer-live .imw-designer__tools,
	.imw-dyo-tee-hero__designer-live .imw-designer__right{
		display:grid;
		grid-template-columns:1fr;
		border-left:0;
	}

	.imw-dyo-tee-hero__designer-live .imw-designer__right{
		border-top:1px solid rgba(0,0,0,.12);
	}

	.imw-dyo-tee-hero__designer-live .imw-designer__right .imw-panel{
		border-right:0;
		border-bottom:1px solid rgba(0,0,0,.1);
	}
}

/* ORIGINAL DESIGN YOUR OWN HOODIE HERO STYLES */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;500;600;700;800&display=swap');


/* =========================================================
   BASE
========================================================= */

.imw-dyo-hoodie-hero{

    --black:#000000;
    --charcoal:#18181B;
    --panel:#202023;
    --white:#FFFFFF;
    --grey:#A1A1AA;
    --muted:#71717A;
    --border:rgba(255,255,255,.14);

    position:relative;

    width:100%;
    max-width:100%;

    overflow:hidden;

    background:#000000;

    color:#FFFFFF;

    font-family:"Inter",sans-serif;

}


.imw-dyo-hoodie-hero *,
.imw-dyo-hoodie-hero *::before,
.imw-dyo-hoodie-hero *::after{

    box-sizing:border-box;

}


/* =========================================================
   BACKGROUND WORD
========================================================= */

.imw-dyo-hoodie-hero::before{

    content:"YOURS";

    position:absolute;

    left:-25px;
    bottom:-70px;

    white-space:nowrap;

    font-family:"Bebas Neue",sans-serif;

    font-size:clamp(
        210px,
        29vw,
        520px
    );

    line-height:.7;

    color:transparent;

    -webkit-text-fill-color:transparent;

    -webkit-text-stroke:
        1px rgba(255,255,255,.035);

    pointer-events:none;

}


/* =========================================================
   MAIN GRID
========================================================= */

.imw-dyo-hoodie-hero__container{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(550px,.92fr);

    width:100%;

    min-height:840px;

}


/* =========================================================
   LEFT CONTENT
========================================================= */

.imw-dyo-hoodie-hero__content{

    min-width:0;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:
        90px
        clamp(40px,6vw,110px);

}


/* =========================================================
   EYEBROW
========================================================= */

.imw-dyo-hoodie-hero__eyebrow{

    display:flex;

    align-items:center;

    gap:13px;

    margin-bottom:27px;

    color:#A1A1AA !important;

    font-size:9px;

    font-weight:700;

    letter-spacing:2.3px;

    text-transform:uppercase;

}


.imw-dyo-hoodie-hero__eyebrow-line{

    width:38px;

    height:1px;

    flex:0 0 38px;

    background:#FFFFFF;

}


/* =========================================================
   H1
========================================================= */

.imw-dyo-hoodie-hero
.imw-dyo-hoodie-hero__title,
.imw-dyo-hoodie-hero
h1.imw-dyo-hoodie-hero__title{

    width:100%;

    max-width:840px;

    margin:0 !important;

    font-family:
        "Bebas Neue",
        "Arial Narrow",
        Impact,
        sans-serif !important;

    font-size:clamp(
        75px,
        7.2vw,
        120px
    ) !important;

    font-weight:400 !important;

    line-height:.81 !important;

    letter-spacing:.3px !important;

    text-transform:uppercase;

    color:#FFFFFF !important;

    -webkit-text-fill-color:#FFFFFF !important;

    -webkit-text-stroke:0 !important;

}


/* =========================================================
   INTRO
========================================================= */

.imw-dyo-hoodie-hero__intro{

    width:100%;

    max-width:650px;

    margin:
        30px
        0
        0;

    color:#A1A1AA !important;

    font-size:14px;

    line-height:1.85;

}


.imw-dyo-hoodie-hero__intro strong{

    color:#FFFFFF !important;

    -webkit-text-fill-color:#FFFFFF !important;

    font-weight:600;

}


/* =========================================================
   MINI FEATURES
========================================================= */

.imw-dyo-hoodie-hero__features{

    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    width:100%;

    max-width:700px;

    margin-top:35px;

    border-top:
        1px solid
        var(--border);

    border-left:
        1px solid
        var(--border);

}


.imw-dyo-hoodie-hero__feature{

    min-width:0;

    min-height:120px;

    padding:20px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    border-right:
        1px solid
        var(--border);

    border-bottom:
        1px solid
        var(--border);

}


.imw-dyo-hoodie-hero__feature-number{

    font-family:"Bebas Neue",sans-serif;

    font-size:20px;

    color:#71717A !important;

}


.imw-dyo-hoodie-hero__feature-text{

    color:#FFFFFF !important;

    -webkit-text-fill-color:#FFFFFF !important;

    font-size:8px;

    font-weight:700;

    line-height:1.5;

    letter-spacing:1.1px;

    text-transform:uppercase;

}


/* =========================================================
   ACTIONS
========================================================= */

.imw-dyo-hoodie-hero__actions{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    margin-top:34px;

}


/* PRIMARY */

.imw-dyo-hoodie-hero__primary,
.imw-dyo-hoodie-hero__primary:visited,
.imw-dyo-hoodie-hero__primary:hover,
.imw-dyo-hoodie-hero__primary:focus,
.imw-dyo-hoodie-hero__primary:active{

    min-height:63px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:25px;

    padding:
        0
        31px;

    background:#FFFFFF !important;

    background-color:#FFFFFF !important;

    background-image:none !important;

    color:#000000 !important;

    -webkit-text-fill-color:#000000 !important;

    border:
        1px solid
        #FFFFFF !important;

    border-radius:0 !important;

    outline:none !important;

    box-shadow:none !important;

    text-decoration:none !important;

    font-size:9px;

    font-weight:800;

    letter-spacing:1.5px;

    text-transform:uppercase;

    transition:
        transform .3s ease;

}


.imw-dyo-hoodie-hero__primary:hover{

    transform:translateY(-3px);

}


.imw-dyo-hoodie-hero__primary svg{

    width:18px;

    height:18px;

}


/* SECONDARY */

.imw-dyo-hoodie-hero__secondary,
.imw-dyo-hoodie-hero__secondary:visited,
.imw-dyo-hoodie-hero__secondary:hover,
.imw-dyo-hoodie-hero__secondary:focus,
.imw-dyo-hoodie-hero__secondary:active{

    min-height:63px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:
        0
        28px;

    background:transparent !important;

    background-color:transparent !important;

    color:#FFFFFF !important;

    -webkit-text-fill-color:#FFFFFF !important;

    border:
        1px solid
        rgba(255,255,255,.28) !important;

    border-radius:0 !important;

    outline:none !important;

    box-shadow:none !important;

    text-decoration:none !important;

    font-size:9px;

    font-weight:700;

    letter-spacing:1.4px;

    text-transform:uppercase;

}


/* =========================================================
   TRUST
========================================================= */

.imw-dyo-hoodie-hero__trust{

    display:flex;

    flex-wrap:wrap;

    gap:
        15px
        28px;

    margin-top:28px;

}


.imw-dyo-hoodie-hero__trust-item{

    display:flex;

    align-items:center;

    gap:9px;

    color:#A1A1AA !important;

    font-size:8px;

    font-weight:700;

    letter-spacing:1.1px;

    text-transform:uppercase;

}


.imw-dyo-hoodie-hero__trust-dot{

    width:5px;

    height:5px;

    flex:0 0 5px;

    border-radius:50%;

    background:#FFFFFF;

}


/* =========================================================
   RIGHT DESIGNER
========================================================= */

.imw-dyo-hoodie-hero__designer{

    position:relative;

    min-width:0;

    width:100%;

    min-height:840px;

    padding:28px;

    display:flex;

    flex-direction:column;

    background:#18181B;

    border-left:
        1px solid
        var(--border);

}


/* =========================================================
   DESIGNER TOP
========================================================= */

.imw-dyo-hoodie-hero__designer-top{

    min-height:58px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:
        0
        18px;

    border:
        1px solid
        var(--border);

    background:#000000;

}


.imw-dyo-hoodie-hero__designer-label{

    color:#FFFFFF !important;

    -webkit-text-fill-color:#FFFFFF !important;

    font-size:8px;

    font-weight:700;

    letter-spacing:1.5px;

    text-transform:uppercase;

}


.imw-dyo-hoodie-hero__designer-status{

    display:flex;

    align-items:center;

    gap:8px;

    color:#A1A1AA !important;

    font-size:7px;

    font-weight:700;

    letter-spacing:1.2px;

    text-transform:uppercase;

}


.imw-dyo-hoodie-hero__status-dot{

    width:6px;

    height:6px;

    border-radius:50%;

    background:#FFFFFF;

}


/* =========================================================
   DESIGNER BODY
========================================================= */

.imw-dyo-hoodie-hero__designer-body{

    flex:1;

    display:grid;

    grid-template-columns:
        84px
        minmax(0,1fr);

    min-height:0;

    margin-top:12px;

}


/* =========================================================
   TOOLBAR
========================================================= */

.imw-dyo-hoodie-hero__toolbar{

    display:flex;

    flex-direction:column;

    border:
        1px solid
        var(--border);

    background:#000000;

}


.imw-dyo-hoodie-hero__tool{

    min-height:78px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:10px;

    color:#71717A;

    border-bottom:
        1px solid
        var(--border);

}


.imw-dyo-hoodie-hero__tool:first-child{

    background:#FFFFFF;

    color:#000000;

}


.imw-dyo-hoodie-hero__tool svg{

    width:20px;

    height:20px;

}


.imw-dyo-hoodie-hero__tool span{

    font-size:6px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}


/* =========================================================
   PREVIEW
========================================================= */

.imw-dyo-hoodie-hero__preview{

    position:relative;

    min-width:0;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:
        55px
        25px
        95px;

    border-top:
        1px solid
        var(--border);

    border-right:
        1px solid
        var(--border);

    border-bottom:
        1px solid
        var(--border);

    background:

        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),

        #202023;

    background-size:
        28px
        28px;

}


/* =========================================================
   HOODIE
========================================================= */

.imw-dyo-hoodie-hero__hoodie{

    position:relative;

    width:
        min(
            440px,
            82%
        );

    filter:
        drop-shadow(
            0
            32px
            42px
            rgba(0,0,0,.45)
        );

}


.imw-dyo-hoodie-hero__hoodie svg{

    display:block;

    width:100%;

    height:auto;

}


/* =========================================================
   DESIGN AREA
========================================================= */

.imw-dyo-hoodie-hero__design-box{

    position:absolute;

    z-index:5;

    top:39%;

    left:50%;

    transform:
        translateX(-50%);

    width:42%;

    min-height:110px;

    padding:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    border:
        1px dashed
        rgba(255,255,255,.45);

}


.imw-dyo-hoodie-hero__design-box::before,
.imw-dyo-hoodie-hero__design-box::after{

    content:"";

    position:absolute;

    width:7px;

    height:7px;

    background:#FFFFFF;

    border:
        1px solid
        #000000;

}


.imw-dyo-hoodie-hero__design-box::before{

    top:-4px;

    left:-4px;

}


.imw-dyo-hoodie-hero__design-box::after{

    right:-4px;

    bottom:-4px;

}


.imw-dyo-hoodie-hero__design-text{

    font-family:"Bebas Neue",sans-serif;

    font-size:clamp(
        23px,
        2.5vw,
        40px
    );

    line-height:.85;

    color:#FFFFFF !important;

    -webkit-text-fill-color:#FFFFFF !important;

}


/* =========================================================
   PREVIEW LABELS
========================================================= */

.imw-dyo-hoodie-hero__preview-label{

    position:absolute;

    top:20px;

    left:20px;

    padding:
        9px
        11px;

    background:#000000;

    border:
        1px solid
        var(--border);

    color:#FFFFFF !important;

    font-size:7px;

    font-weight:700;

    letter-spacing:1.3px;

    text-transform:uppercase;

}


.imw-dyo-hoodie-hero__zoom{

    position:absolute;

    top:20px;

    right:20px;

    color:#71717A !important;

    font-size:7px;

    font-weight:700;

    letter-spacing:1.2px;

}


/* =========================================================
   PREVIEW BOTTOM
========================================================= */

.imw-dyo-hoodie-hero__preview-bottom{

    position:absolute;

    z-index:7;

    left:20px;
    right:20px;
    bottom:20px;

    display:grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    gap:10px;

}


.imw-dyo-hoodie-hero__selected{

    min-width:0;

    padding:
        14px
        16px;

    border:
        1px solid
        var(--border);

    background:
        rgba(0,0,0,.82);

}


.imw-dyo-hoodie-hero__selected small{

    display:block;

    margin-bottom:5px;

    color:#71717A !important;

    font-size:6px;

    font-weight:700;

    letter-spacing:1.1px;

}


.imw-dyo-hoodie-hero__selected strong{

    display:block;

    overflow:hidden;

    text-overflow:ellipsis;

    white-space:nowrap;

    color:#FFFFFF !important;

    -webkit-text-fill-color:#FFFFFF !important;

    font-size:8px;

    font-weight:700;

    letter-spacing:1px;

}


.imw-dyo-hoodie-hero__price{

    min-width:110px;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:
        0
        16px;

    background:#FFFFFF;

    font-family:"Bebas Neue",sans-serif;

    font-size:29px;

    color:#000000 !important;

    -webkit-text-fill-color:#000000 !important;

}


/* =========================================================
   FLOATING CARD
========================================================= */

.imw-dyo-hoodie-hero__promise{

    position:absolute;

    z-index:8;

    right:20px;
    top:90px;

    width:130px;

    padding:
        16px;

    background:#FFFFFF;

    color:#000000;

    box-shadow:
        0
        15px
        35px
        rgba(0,0,0,.25);

}


.imw-dyo-hoodie-hero__promise small{

    display:block;

    margin-bottom:10px;

    color:#71717A !important;

    font-size:6px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

}


.imw-dyo-hoodie-hero__promise strong{

    display:block;

    font-family:"Bebas Neue",sans-serif;

    font-size:36px;

    line-height:.8;

    color:#000000 !important;

    -webkit-text-fill-color:#000000 !important;

}


.imw-dyo-hoodie-hero__promise span{

    display:block;

    margin-top:9px;

    color:#52525B !important;

    font-size:6px;

    font-weight:700;

    line-height:1.4;

    letter-spacing:.7px;

    text-transform:uppercase;

}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1100px){

    .imw-dyo-hoodie-hero__container{

        grid-template-columns:
            minmax(0,1fr)
            minmax(470px,.9fr);

    }

}


@media(max-width:991px){

    .imw-dyo-hoodie-hero{

        overflow-x:hidden !important;

    }


    .imw-dyo-hoodie-hero::before{

        display:none;

    }


    .imw-dyo-hoodie-hero__container{

        display:flex;

        flex-direction:column;

        min-height:0;

    }


    .imw-dyo-hoodie-hero__content{

        width:100%;

        padding:
            80px
            40px
            70px;

    }


    .imw-dyo-hoodie-hero__designer{

        width:100%;

        min-height:780px;

        border-left:0;

        border-top:
            1px solid
            var(--border);

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767px){

    .imw-dyo-hoodie-hero{

        width:100% !important;

        max-width:100% !important;

        overflow:hidden !important;

    }


    .imw-dyo-hoodie-hero__container{

        display:block !important;

        width:100% !important;

        max-width:100% !important;

        min-width:0 !important;

    }


    /* CONTENT */

    .imw-dyo-hoodie-hero__content{

        width:100% !important;

        max-width:100% !important;

        min-width:0 !important;

        padding:
            60px
            18px
            55px !important;

        overflow:hidden !important;

    }


    .imw-dyo-hoodie-hero__eyebrow{

        font-size:8px;

        letter-spacing:1.6px;

    }


    .imw-dyo-hoodie-hero__eyebrow-line{

        width:27px;

        flex-basis:27px;

    }


    .imw-dyo-hoodie-hero
    .imw-dyo-hoodie-hero__title{

        width:100% !important;

        max-width:100% !important;

        font-size:clamp(
            44px,
            13vw,
            60px
        ) !important;

        line-height:.87 !important;

        letter-spacing:0 !important;

        word-break:normal !important;

        overflow-wrap:normal !important;

    }


    .imw-dyo-hoodie-hero__intro{

        width:100%;

        max-width:100%;

        font-size:13px;

        line-height:1.75;

    }


    /* FEATURES */

    .imw-dyo-hoodie-hero__features{

        grid-template-columns:
            minmax(0,1fr);

        width:100%;

        max-width:100%;

    }


    .imw-dyo-hoodie-hero__feature{

        min-height:88px;

    }


    /* ACTIONS */

    .imw-dyo-hoodie-hero__actions{

        flex-direction:column;

        width:100%;

    }


    .imw-dyo-hoodie-hero__primary,
    .imw-dyo-hoodie-hero__secondary{

        width:100% !important;

        max-width:100% !important;

        min-width:0 !important;

        padding:
            0
            16px;

        white-space:normal;

        text-align:center;

    }


    /* TRUST */

    .imw-dyo-hoodie-hero__trust{

        display:grid;

        grid-template-columns:1fr;

        gap:11px;

    }


    /* DESIGNER */

    .imw-dyo-hoodie-hero__designer{

        width:100% !important;

        max-width:100% !important;

        min-width:0 !important;

        min-height:auto;

        padding:12px;

        overflow:hidden;

    }


    .imw-dyo-hoodie-hero__designer-top{

        padding:
            0
            13px;

    }


    .imw-dyo-hoodie-hero__designer-body{

        display:block;

    }


    /* TOOLBAR */

    .imw-dyo-hoodie-hero__toolbar{

        display:grid;

        grid-template-columns:
            repeat(4,minmax(0,1fr));

        width:100%;

    }


    .imw-dyo-hoodie-hero__tool{

        min-width:0;

        min-height:70px;

        border-right:
            1px solid
            var(--border);

    }


    /* PREVIEW */

    .imw-dyo-hoodie-hero__preview{

        width:100%;

        max-width:100%;

        min-width:0;

        min-height:570px;

        padding:
            65px
            15px
            105px;

        border-left:
            1px solid
            var(--border);

    }


    .imw-dyo-hoodie-hero__hoodie{

        width:
            min(
                355px,
                92%
            );

    }


    .imw-dyo-hoodie-hero__design-text{

        font-size:25px;

    }


    .imw-dyo-hoodie-hero__promise{

        right:10px;

        top:65px;

        width:105px;

        padding:12px;

    }


    .imw-dyo-hoodie-hero__promise strong{

        font-size:29px;

    }


    .imw-dyo-hoodie-hero__preview-bottom{

        left:10px;

        right:10px;

        bottom:10px;

    }


    .imw-dyo-hoodie-hero__selected{

        padding:12px;

    }


    .imw-dyo-hoodie-hero__price{

        min-width:92px;

        font-size:25px;

    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media(max-width:420px){

    .imw-dyo-hoodie-hero__content{

        padding:
            55px
            15px
            50px !important;

    }


    .imw-dyo-hoodie-hero
    .imw-dyo-hoodie-hero__title{

        font-size:40px !important;

    }


    .imw-dyo-hoodie-hero__designer-label{

        font-size:7px;

    }


    .imw-dyo-hoodie-hero__designer-status{

        display:none;

    }


    .imw-dyo-hoodie-hero__preview{

        min-height:510px;

    }


    .imw-dyo-hoodie-hero__hoodie{

        width:98%;

    }


    .imw-dyo-hoodie-hero__design-text{

        font-size:21px;

    }


    .imw-dyo-hoodie-hero__promise{

        width:92px;

    }


    .imw-dyo-hoodie-hero__promise strong{

        font-size:25px;

    }

}



/* DESIGN YOUR OWN HOODIE — ORIGINAL HERO + LIVE DESIGNER */

/*
 * The original hoodie hero styling above is preserved.
 * Only the old fake preview inside the right column is replaced
 * with the actual working INKMYWEAR product designer.
 */

.imw-dyo-hoodie-hero__designer--live{
	min-width:0;
	overflow:hidden;
	padding:18px;
}

.imw-dyo-hoodie-hero__designer-live{
	width:100%;
	max-width:100%;
	min-width:0;
	flex:1;
	display:flex;
	align-items:stretch;
}

.imw-dyo-hoodie-hero__designer-live > .imw-designer{
	width:100%;
	max-width:none;
	min-width:0;
	margin:0;
	border:1px solid rgba(255,255,255,.14);
	box-shadow:0 28px 70px rgba(0,0,0,.28);
}

.imw-dyo-hoodie-hero__designer-live .imw-designer__topbar{
	padding:17px 18px;
}

.imw-dyo-hoodie-hero__designer-live .imw-designer__topbar h2{
	font-size:clamp(28px,2.6vw,45px)!important;
}

.imw-dyo-hoodie-hero__designer-live .imw-designer__layout{
	grid-template-columns:185px minmax(0,1fr);
	min-height:760px;
}

.imw-dyo-hoodie-hero__designer-live .imw-designer__right{
	grid-column:1/-1;
	display:grid;
	grid-template-columns:repeat(3,minmax(0,1fr));
	border-left:0;
	border-top:1px solid rgba(0,0,0,.12);
}

.imw-dyo-hoodie-hero__designer-live .imw-designer__right .imw-panel{
	border-right:1px solid rgba(0,0,0,.1);
	border-bottom:0;
}

.imw-dyo-hoodie-hero__designer-live .imw-panel{
	padding:15px;
}

.imw-dyo-hoodie-hero__designer-live .imw-designer__workspace{
	padding:12px;
}

.imw-dyo-hoodie-hero__designer-live .imw-canvas-shell{
	aspect-ratio:1;
}

/* Wider desktop gives the editor all three columns again. */
@media(min-width:1500px){

	.imw-dyo-hoodie-hero__container{
		grid-template-columns:minmax(0,.78fr) minmax(720px,1.22fr);
	}

	.imw-dyo-hoodie-hero__designer-live .imw-designer__layout{
		grid-template-columns:205px minmax(0,1fr) 230px;
	}

	.imw-dyo-hoodie-hero__designer-live .imw-designer__right{
		grid-column:auto;
		display:block;
		border-left:1px solid rgba(0,0,0,.12);
		border-top:0;
	}

	.imw-dyo-hoodie-hero__designer-live .imw-designer__right .imw-panel{
		border-right:0;
		border-bottom:1px solid rgba(0,0,0,.1);
	}

}

/* Tablet: hero stacks exactly like the original page. */
@media(max-width:991px){

	.imw-dyo-hoodie-hero__designer--live{
		padding:16px;
	}

	.imw-dyo-hoodie-hero__designer-live .imw-designer__layout{
		grid-template-columns:220px minmax(0,1fr);
	}

	.imw-dyo-hoodie-hero__designer-live .imw-designer__right{
		grid-template-columns:repeat(3,minmax(0,1fr));
	}

}

/* Mobile: use the designer's natural stacked layout. */
@media(max-width:767px){

	.imw-dyo-hoodie-hero__designer--live{
		padding:10px!important;
	}

	.imw-dyo-hoodie-hero__designer-live .imw-designer__layout{
		display:block;
		min-height:0;
	}

	.imw-dyo-hoodie-hero__designer-live .imw-designer__tools,
	.imw-dyo-hoodie-hero__designer-live .imw-designer__right{
		display:grid;
		grid-template-columns:1fr;
		border-left:0;
	}

	.imw-dyo-hoodie-hero__designer-live .imw-designer__right{
		border-top:1px solid rgba(0,0,0,.12);
	}

	.imw-dyo-hoodie-hero__designer-live .imw-designer__right .imw-panel{
		border-right:0;
		border-bottom:1px solid rgba(0,0,0,.1);
	}

}