/* ==========================
   RESET GLOBAL ACTIVE
========================== */

.order-page a.active{
    color:inherit;
    border-bottom:none;
    padding-bottom:0;
}

/* ==========================
   ORDERS
========================== */

.order-page{
    min-height:700px;
    padding:60px 20px 90px;
    font-family:Poppins,sans-serif;
}

.order-container{
    width:100%;
    max-width:1400px;

    margin:0 auto;
}


/* ==========================
   HEADER
========================== */

.order-header{
    max-width:720px;

    margin:0 auto 50px;

    text-align:center;
}

.order-header-badge{
    display:inline-flex;

    margin-bottom:14px;
    padding:7px 14px;

    border-radius:999px;

    background:#fff0f2;

    color:#d56578;

    font-size:12px;
    font-weight:600;
}

.order-title{
    margin:0 0 14px;

    color:#282828;

    font-family:Poppins,sans-serif;
    font-size:34px;
    font-weight:700;
}

.order-description{
    margin:0;

    color:#777;

    font-size:14px;
    line-height:1.7;
}


/* ==========================
   PROGRESS
========================== */

.order-progress{
    display:flex;
    align-items:center;

    max-width:950px;

    margin:0 auto 50px;
}

.order-progress-step{
    display:flex;
    align-items:center;

    gap:12px;

    flex-shrink:0;
}

.order-progress-number{
    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:2px solid #ddd;
    border-radius:50%;

    background:#fff;

    color:#999;

    font-size:14px;
    font-weight:600;

    transition:.2s ease;
}

.order-progress-content{
    display:flex;
    flex-direction:column;

    gap:2px;
}

.order-progress-content strong{
    color:#777;

    font-size:13px;
    font-weight:600;
}

.order-progress-content span{
    color:#aaa;

    font-size:11px;
}

.order-progress-line{
    height:2px;

    margin:0 18px;

    flex:1;

    background:#e5e5e5;
}


/* ACTIVE */

.order-progress-step.active .order-progress-number{
    border-color:#d56578;

    background:#d56578;

    color:#fff;
}

.order-progress-step.active .order-progress-content strong{
    color:#d56578;
}

.order-progress-step.active .order-progress-content span{
    color:#777;
}


/* ==========================
   STEP
========================== */

.order-step[data-order-step="2"]{
    width: 100%;
    background: #fff;
    border: 1px solid var(--account-border);
    border-radius: 18px;
    padding: 22px;
}

.order-step{
    padding:38px 42px;

    border:1px solid #ececec;
    border-radius:18px;

    background:#fff;

    box-shadow:
        0 8px 30px rgba(0,0,0,.035);
}

.order-step[hidden]{
    display:none;
}

.order-step-header{
    margin-bottom:32px;
}

.order-step-label{
    display:block;

    margin-bottom:7px;

    color:#d56578;

    font-size:12px;
    font-weight:600;
}

.order-step-header h2{
    margin:0 0 8px;

    color:#282828;

    font-family:Poppins,sans-serif;
    font-size:25px;
    font-weight:700;
}

.order-step-header p{
    margin:0;

    color:#888;

    font-size:13px;
}


/* ==========================
   PRODUCTS
========================== */

.order-products{
    display:grid;
    grid-template-columns:
        repeat(auto-fit,minmax(280px,1fr));

    gap:20px;
}

.order-product-card{
    position:relative;

    display:flex;

    overflow:hidden;

    min-height:170px;

    border:2px solid #ececec;
    border-radius:16px;

    background:#fff;

    cursor:pointer;

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.order-product-card:hover{
    border-color:#e1b5bd;

    box-shadow:
        0 8px 25px rgba(0,0,0,.05);

    transform:translateY(-2px);
}

.order-product-radio{
    position:absolute;

    opacity:0;
    pointer-events:none;
}


/* SELECTED */

.order-product-card:has(
    .order-product-radio:checked
){
    border-color:#d56578;

    box-shadow:
        0 0 0 3px rgba(213,101,120,.08);
}


/* ==========================
   PRODUCT IMAGE
========================== */

.order-product-image{
    width:155px;

    flex-shrink:0;

    background:#f7f7f7;
}

.order-product-image img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
}


/* ==========================
   PRODUCT INFO
========================== */

.order-product-info{
    display:flex;
    flex-direction:column;

    flex:1;

    padding:22px;
}

.order-product-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:15px;
}

.order-product-top h3{
    margin:0;

    color:#282828;

    font-size:16px;
    font-weight:600;
}

.order-product-check{
    width:24px;
    height:24px;

    display:flex;
    align-items:center;
    justify-content:center;

    flex-shrink:0;

    border:2px solid #ddd;
    border-radius:50%;

    color:transparent;

    font-size:10px;

    transition:.2s ease;
}

.order-product-radio:checked
~ .order-product-info
.order-product-check{
    border-color:#d56578;

    background:#d56578;

    color:#fff;
}

.order-product-info > p{
    margin:9px 0 18px;

    color:#888;

    font-size:12px;
    line-height:1.6;
}


/* ==========================
   PRODUCT META
========================== */

.order-product-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:15px;

    margin-top:auto;
}

.order-product-meta span{
    display:flex;
    align-items:center;

    gap:7px;

    color:#888;

    font-size:12px;
}

.order-product-meta span i{
    color:#d56578;
}

.order-product-meta strong{
    color:#d56578;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    font-size:17px;
    font-weight:700;
    gap:3px;
}

.order-product-meta strong small{
    color:#999;

    font-size:10px;
    font-weight:500;
}

.order-product-meta-left{
    display:flex;
    flex-direction:column;

    gap:6px;
}

/* ==========================
   NAVIGATION
========================== */

.order-navigation{
    display:flex;
    align-items:center;

    margin-top:32px;
    padding:26px;

    border-top:1px solid #eee;
}

.order-navigation-end{
    justify-content:flex-end;
}

.order-button{
    min-width:145px;
    height:48px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:10px;

    padding:0 22px;

    border:0;
    border-radius:10px;

    font-family:Poppins,sans-serif;
    font-size:13px;
    font-weight:600;

    cursor:pointer;

    transition:.2s ease;
}

.order-button-primary{
    background:#d56578;

    color:#fff;
}

.order-button-primary:hover:not(:disabled){
    background:#c95569;
}

.order-button:disabled{
    opacity:.45;

    cursor:not-allowed;
}

/* ==========================
   MAGNET PERSONALISATION
========================== */

.magnet-personalisation{
    display:flex;
    flex-direction:column;
    gap:28px;
}


/* ==========================
   UPLOAD
========================== */

.magnet-upload-input{
    position:absolute;

    width:1px;
    height:1px;

    opacity:0;
    pointer-events:none;
}

.magnet-upload-area{
    min-height:42px;

    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;

    gap:9px;

    padding:0 15px;

    border:0;
    border-radius:9px;

    background:#d56578;

    color:#fff;

    cursor:pointer;

    transition:.2s ease;
}

.magnet-upload-area:hover{
    border-color:transparent;

    background:#c95569;
}

.magnet-upload-area i{
    font-size:12px;
}

.magnet-upload.dragging .magnet-upload-area{
    border-color:#d56578;

    background:#fff5f6;

    box-shadow:
        0 0 0 4px rgba(213,101,120,.08);
}

.magnet-upload-area strong{
    color:#fff;

    font-size:12px;
    font-weight:600;
}

.magnet-upload-area span{
    color:#777;

    font-size:13px;
}

.magnet-upload-area small{
    margin-top:4px;

    color:#aaa;

    font-size:11px;
}

.magnet-upload-help{
    display:block;

    margin-top:8px;

    color:#aaa;

    font-size:10px;

    text-align:center;
}

.magnet-upload.dragging .magnet-upload-area{
    border-color:#d56578;
    background:#fff5f6;
    box-shadow:
        0 0 0 4px rgba(213,101,120,.08);
}

/* ==========================
   WORKSPACE
========================== */

.magnet-workspace{
    display:grid;

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

    align-items:stretch;

    gap:18px;

    min-height:620px;

    overflow:visible;

    border:0;

    background:transparent;
}

.magnet-workspace[hidden]{
    display:none;
}


/* ==========================
   PROJECT SIDEBAR
========================== */

.magnet-projects{
    min-width:0;

    padding:22px 18px;

    border:1px solid #e9e9e9;
    border-radius:16px;

    background:#fff;

    box-shadow:
        0 8px 25px rgba(0,0,0,.025);
}

.magnet-projects-header{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;

    margin-bottom:16px;
}

.magnet-projects-header strong{
    color:#333;

    font-size:13px;
    font-weight:600;
}

.magnet-projects-header span{
    min-width:26px;
    height:26px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0 7px;

    border-radius:999px;

    background:#fff0f2;

    color:#d56578;

    font-size:11px;
    font-weight:600;
}

.magnet-projects-list{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:9px;
}

.magnet-projects-intro{
    margin-bottom:18px;
}

.magnet-projects-intro h3{
    margin:0 0 6px;

    color:#282828;

    font-size:15px;
    font-weight:600;
}

.magnet-projects-intro p{
    margin:0;

    color:#888;

    font-size:11px;
    line-height:1.6;
}

.magnet-projects-divider{
    height:1px;

    margin:18px 0;

    background:#eeeeee;
}

/* ==========================
   PROJECT THUMBNAIL
========================== */

.magnet-project-item{
    position:relative;

    width:100%;

    display:block;

    padding:4px;

    overflow:hidden;

    border:1px solid #e8e8e8;
    border-radius:9px;

    background:#fff;

    cursor:pointer;

    transition:.2s ease;
}

.magnet-project-item:hover{
    border-color:#dfb6bd;
}

.magnet-project-item.active{
    border:1px solid #d56578;

    background:#fff7f8;

    color:inherit;

    padding-bottom:8px;
}

.magnet-project-thumbnail{
    width:100%;
    height:auto;

    aspect-ratio:80 / 53;

    overflow:hidden;

    border-radius:6px;

    background:#eee;
}

.magnet-project-thumbnail img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
}

.magnet-project-details{
    min-width:0;

    display:flex;
    flex-direction:column;

    gap:2px;
}

.magnet-project-details strong{
    display:block;

    margin-top:5px;

    color:#666;

    font-size:9px;
    font-weight:500;

    text-align:center;
}

.magnet-project-details span{
    display:none;
}


/* ==========================
   EDITOR
========================== */

.magnet-editor{
    min-width:0;

    padding:24px 28px 28px;

    border:1px solid #e9e9e9;
    border-radius:16px;

    background:#fff;

    box-shadow:
        0 8px 25px rgba(0,0,0,.025);
}

.magnet-editor-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:20px;

    margin-bottom:24px;
}

.magnet-editor-header > div{
    display:flex;
    flex-direction:column;

    gap:3px;
}

.magnet-editor-header strong{
    color:#282828;

    font-size:14px;
    font-weight:600;
}

.magnet-editor-header span{
    color:#999;

    font-size:11px;
}

.magnet-remove-project{
    display:inline-flex;
    align-items:center;

    gap:7px;

    padding:8px 11px;

    border:1px solid #ececec;
    border-radius:8px;

    background:#fff;

    color:#999;

    font-family:Poppins,sans-serif;
    font-size:11px;
    font-weight:500;

    cursor:pointer;

    transition:.2s ease;
}

.magnet-remove-project:hover{
    border-color:#e7a9b2;

    background:#fff6f7;

    color:#d56578;
}


/* ==========================
   MAGNET CANVAS
========================== */

.magnet-canvas-wrapper{
    min-height:360px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:35px;

    border-radius:14px;

    background:#f3f3f3;
}

.magnet-canvas{
    position:relative;

    width:min(100%,620px);

    overflow:hidden;

    border-radius:8px;

    background:#ddd;

    box-shadow:
        0 10px 30px rgba(0,0,0,.12);

    user-select:none;

    cursor:grab;

    touch-action:none;
}


.magnet-canvas.portrait{
    width:min(100%,360px);
}

.magnet-canvas.dragging{
    cursor:grabbing;
}

.magnet-canvas img{
    position:absolute;

    top:50%;
    left:50%;

    display:block;

    max-width:none;
    max-height:none;

    transform-origin:center;

    user-select:none;
    pointer-events:none;
}

.magnet-canvas-frame{
    position:absolute;

    inset:0;

    border:2px solid rgba(255,255,255,.75);
    border-radius:8px;

    pointer-events:none;

    box-shadow:
        inset 0 0 0 1px rgba(0,0,0,.08);
}

.magnet-canvas img:not([src]),
.magnet-canvas img[src=""]{
    display:none;
}

/* ==========================
   CONTROLS
========================== */

.magnet-controls{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:24px;

    margin-top:26px;
}

.magnet-control-group{
    display:flex;
    flex-direction:column;

    gap:10px;
}

.magnet-control-group > label{
    color:#555;

    font-size:12px;
    font-weight:600;
}

/* ==========================
   MAGNET ADVANCED
========================== */

.magnet-advanced{
    grid-column:1 / -1;

    overflow:hidden;

    border:1px solid #e8e8e8;
    border-radius:10px;

    background:#fafafa;
}

.magnet-advanced-toggle{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;

    padding:12px 14px;

    color:#555;

    font-size:11px;
    font-weight:600;

    cursor:pointer;

    list-style:none;
}

.magnet-advanced-toggle::-webkit-details-marker{
    display:none;
}

.magnet-advanced-toggle i{
    color:#999;

    font-size:10px;

    transition:transform .2s ease;
}

.magnet-advanced[open]
.magnet-advanced-toggle i{
    transform:rotate(180deg);
}


/* ==========================
   ADVANCED CONTENT
========================== */

.magnet-advanced-content{
    display:flex;
    flex-direction:column;

    gap:18px;

    padding:16px 14px 14px;

    border-top:1px solid #ececec;

    background:#fff;
}


/* ==========================
   RESET STRETCH
========================== */

.magnet-stretch-reset{
    align-self:flex-start;

    display:inline-flex;
    align-items:center;

    gap:7px;

    padding:8px 11px;

    border:1px solid #e4e4e4;
    border-radius:8px;

    background:#fff;

    color:#777;

    font-family:Poppins,sans-serif;
    font-size:10px;
    font-weight:500;

    cursor:pointer;

    transition:.2s ease;
}

.magnet-stretch-reset:hover{
    border-color:#dfb1b9;

    background:#fff6f7;

    color:#d56578;
}

/* ==========================
   ORIENTATION
========================== */

.magnet-orientation{
    display:grid;
    grid-template-columns:1fr 1fr;

    gap:8px;
}

.magnet-orientation-button{
    height:43px;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:8px;

    border:1px solid #e3e3e3;
    border-radius:9px;

    background:#fff;

    color:#777;

    font-family:Poppins,sans-serif;
    font-size:11px;
    font-weight:500;

    cursor:pointer;

    transition:.2s ease;
}

.magnet-orientation-button:hover{
    border-color:#dfb1b9;
}

.magnet-orientation-button.active{
    border:1px solid #d56578;

    padding-bottom:0;

    background:#fff5f6;

    color:#d56578;
}


/* ==========================
   QUANTITY
========================== */

.magnet-quantity{
    width:180px;
    height:43px;

    display:grid;
    grid-template-columns:42px 1fr 42px;

    overflow:hidden;

    border:1px solid #e3e3e3;
    border-radius:9px;

    background:#fff;
}

.magnet-quantity button{
    border:0;

    background:#fafafa;

    color:#555;

    font-family:Poppins,sans-serif;
    font-size:18px;

    cursor:pointer;

    transition:.2s ease;
}

.magnet-quantity button:hover{
    background:#fff0f2;

    color:#d56578;
}

.magnet-quantity input{
    width:100%;

    border:0;
    border-right:1px solid #eee;
    border-left:1px solid #eee;

    outline:none;

    background:#fff;

    color:#333;

    font-family:Poppins,sans-serif;
    font-size:13px;
    font-weight:600;

    text-align:center;
}

.magnet-quantity input::-webkit-inner-spin-button,
.magnet-quantity input::-webkit-outer-spin-button{
    margin:0;

    -webkit-appearance:none;
}


/* ==========================
   MAGNET ORDER SUMMARY
========================== */

.magnet-order-summary{
    min-width:0;

    display:flex;
    flex-direction:column;

    padding:22px;

    border:1px solid #e9e9e9;
    border-radius:16px;

    background:#fff;

    box-shadow:
        0 8px 25px rgba(0,0,0,.025);
}


/* ==========================
   SUMMARY HEADER
========================== */

.magnet-order-summary-header{
    margin-bottom:18px;
}

.magnet-order-summary-header strong{
    color:#282828;

    font-size:16px;
    font-weight:600;
}


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

.magnet-summary-product{
    display:flex;
    align-items:center;

    gap:12px;

    margin-bottom:18px;
}

.magnet-summary-product-image{
    width:78px;
    height:52px;

    overflow:hidden;

    flex-shrink:0;

    border-radius:8px;

    background:#f3f3f3;
}

.magnet-summary-product-image img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
}

.magnet-summary-product-info{
    min-width:0;

    display:flex;
    flex-direction:column;

    gap:4px;
}

.magnet-summary-product-info strong{
    color:#333;

    font-size:12px;
    font-weight:600;
}

.magnet-summary-product-info span{
    color:#999;

    font-size:10px;
}


/* ==========================
   SUMMARY CONTENT
========================== */

.magnet-order-summary-content{
    display:flex;
    flex-direction:column;

    gap:14px;
}

.magnet-order-summary-row{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:15px;
}

.magnet-order-summary-row span{
    color:#777;

    font-size:11px;
}

.magnet-order-summary-row strong{
    color:#333;

    font-size:12px;
    font-weight:600;
}

.magnet-order-summary-divider{
    height:1px;

    margin:18px 0;

    background:#eeeeee;
}


/* ==========================
   DELIVERY VALUE
========================== */

#magnetSummaryDelivery{
    color:#555;
}

#magnetSummaryDelivery.free{
    color:#4f9a68;
}


/* ==========================
   TOTAL
========================== */

.magnet-order-summary-total{
    margin:0;
}

.magnet-order-summary-total span{
    color:#282828;

    font-size:14px;
    font-weight:600;
}

.magnet-order-summary-total strong{
    color:#d56578;

    font-size:22px;
    font-weight:700;
}


/* ==========================
   MINIMUM NOTICE
========================== */

.magnet-order-summary-notice{
    display:flex;
    align-items:flex-start;

    gap:9px;

    margin-top:18px;
    padding:12px;

    border-radius:9px;

    background:#fff7ed;

    color:#9a6a2c;

    font-size:10px;
    line-height:1.5;
}

.magnet-order-summary-notice[hidden]{
    display:none;
}

.magnet-order-summary-notice i{
    margin-top:2px;

    flex-shrink:0;

    color:#e2a344;
}


/* ==========================
   FREE DELIVERY
========================== */

.magnet-order-summary-delivery{
    display:flex;
    align-items:flex-start;

    gap:11px;

    margin-top:12px;
    padding:13px;

    border:1px solid #f1dadd;
    border-radius:10px;

    background:#fff7f8;
}

.magnet-order-summary-delivery > i{
    margin-top:3px;

    flex-shrink:0;

    color:#d56578;
}

.magnet-order-summary-delivery > div{
    display:flex;
    flex-direction:column;

    gap:3px;
}

.magnet-order-summary-delivery strong{
    color:#444;

    font-size:11px;
    font-weight:600;
}

.magnet-order-summary-delivery span{
    color:#888;

    font-size:10px;
    line-height:1.5;
}


/* FREE DELIVERY UNLOCKED */

.magnet-order-summary-delivery.free{
    border-color:#d9ecdf;

    background:#f4fbf6;
}

.magnet-order-summary-delivery.free > i{
    color:#4f9a68;
}

.magnet-order-summary-delivery.free strong{
    color:#407b52;
}


/* ==========================
   PRICE TIERS
========================== */

.magnet-price-tiers{
    display:flex;
    flex-direction:column;

    gap:8px;

    margin-top:auto;
    padding-top:22px;

    border-top:1px solid #eee;
}

.magnet-price-tiers-title{
    margin-bottom:4px;

    color:#555;

    font-size:11px;
    font-weight:600;
}

.magnet-price-tier{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;
}

.magnet-price-tier span{
    color:#999;

    font-size:10px;
}

.magnet-price-tier strong{
    color:#555;

    font-size:10px;
    font-weight:600;
}



/* ==========================
   MAGNET NAVIGATION
========================== */

.magnet-navigation{
    justify-content:space-between;
}

.magnet-navigation-right{
    display:flex;
    align-items:center;

    gap:10px;
}

.magnet-back-button{
    border:1px solid #e3e3e3;

    background:#fff;

    color:#666;
}

.magnet-back-button:hover{
    border-color:#ccc;

    background:#fafafa;
}

.magnet-cart-button{
    border:1px solid #d56578;

    background:#fff;

    color:#d56578;
}

.magnet-cart-button:hover:not(:disabled){
    background:#fff2f4;
}

/* ==========================
   MAGNET ZOOM
========================== */

.magnet-zoom-control{
    grid-column:1 / -1;
}

.magnet-control-label-row{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:15px;
}

.magnet-control-label-row label{
    color:#555;

    font-size:12px;
    font-weight:600;
}

.magnet-control-label-row span{
    color:#d56578;

    font-size:11px;
    font-weight:600;
}

.magnet-zoom{
    width:100%;

    accent-color:#d56578;

    cursor:pointer;
}

/* ==========================
   MAGNET MINIMUM NOTICE
========================== */

.magnet-order-minimum{
    display:flex;
    align-items:flex-start;

    gap:12px;

    padding:15px;

    border:1px solid #f1dadd;
    border-radius:10px;

    background:#fff7f8;
}

.magnet-order-minimum[hidden]{
    display:none;
}

.magnet-order-minimum > i{
    width:30px;
    height:30px;

    display:flex;
    align-items:center;
    justify-content:center;

    flex-shrink:0;

    border-radius:50%;

    background:#fff0f2;

    color:#d56578;

    font-size:13px;
}

.magnet-order-minimum > div{
    min-width:0;

    display:flex;
    flex-direction:column;

    gap:4px;
}

.magnet-order-minimum strong{
    color:#444;

    font-size:12px;
    font-weight:600;
    line-height:1.45;
}

.magnet-order-minimum span{
    color:#888;

    font-size:10px;
    line-height:1.55;
}

.magnet-project-thumbnail{
    position:relative;
    overflow:hidden;
}

.magnet-project-upload-status{
    position:absolute;
    left:6px;
    right:6px;
    bottom:6px;

    padding:6px 7px;

    border-radius:7px;

    background:rgba(255,255,255,.94);

    font-family:Poppins,sans-serif;

    box-shadow:0 2px 8px rgba(0,0,0,.08);
}

.magnet-project-upload-content{
    display:flex;
    align-items:center;
    gap:5px;

    font-size:9px;
    font-weight:600;

    line-height:1;
}

.magnet-project-upload-status.ready{
    color:#43845b;
}

.magnet-project-upload-status.error{
    color:#b85050;
}

.magnet-project-upload-progress{
    height:3px;
    margin-top:5px;

    overflow:hidden;

    border-radius:10px;

    background:#ececec;
}

.magnet-project-upload-bar{
    width:0;
    height:100%;

    border-radius:inherit;

    background:#d56578;

    transition:width .15s ease;
}

.magnet-project-upload-status.ready
.magnet-project-upload-progress,

.magnet-project-upload-status.error
.magnet-project-upload-progress{

    display:none;
}

/* ==========================================================
   ORDER - STEP 3 / DELIVERY
========================================================== */

.order-step[data-order-step="3"]{
    font-family: Poppins, sans-serif;
}


.order-delivery{
    margin-top: 30px;
}


.order-delivery-layout{
    display: grid;
    grid-template-columns: 1.15fr 1fr 0.9fr;
    gap: 24px;
    align-items: start;
}


/* ==========================================================
   CARDS
========================================================== */

.order-delivery-card{
    background: #ffffff;
    border: 1px solid #ece7e8;
    border-radius: 16px;
    padding: 24px;
    box-shadow:
        0 8px 30px rgba(30, 20, 22, 0.05);
}


.order-delivery-middle{
    display: flex;
    flex-direction: column;
    gap: 18px;
}


.order-delivery-card-header{
    margin-bottom: 20px;
}


.order-delivery-card-header h3,
.order-delivery-summary-header h3{
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #292426;
}


.order-delivery-card-header p{
    margin: 7px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: #81797c;
}


/* ==========================================================
   PAYMENT INFO
========================================================== */

.order-delivery-payment-info{
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    background: #fff7f8;
    border: 1px solid #f4dfe3;
    border-radius: 12px;
}


.order-delivery-payment-icon{
    flex: 0 0 42px;
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    background: #ffffff;
    color: #d56578;
    font-size: 16px;
}


.order-delivery-payment-info strong{
    display: block;
    margin-bottom: 5px;
    font-size: 13px;
    font-weight: 600;
    color: #352f31;
}


.order-delivery-payment-info p{
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: #81797c;
}


/* ==========================================================
   ORDER SUMMARY
========================================================== */

.order-delivery-summary{
    top: 24px;
}


.order-delivery-summary-header{
    padding-bottom: 18px;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee9ea;
}


.order-delivery-summary-loading{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 180px;

    font-size: 13px;
    color: #8b8385;
}

.order-delivery-summary-loading[hidden],
.order-delivery-summary-content[hidden]{
    display: none !important;
}

.order-delivery-summary-loading i{
    color: #d56578;
}


/* ==========================================================
   ORDER PROJECT VIEWER
========================================================== */

.order-project-viewer{
    width:100%;
    max-width:520px;

    margin:0 auto;
}


/* ==========================================================
   PROJECT SWITCHER
========================================================== */

.order-project-switcher{
    display:grid;

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

    align-items:center;

    gap:12px;

    margin-bottom:16px;
}


.order-project-heading{
    min-width:0;

    display:flex;
    flex-direction:column;
    align-items:center;

    gap:3px;

    text-align:center;
}


.order-project-heading strong{
    color:#282828;

    font-size:13px;
    font-weight:600;
}


.order-project-heading span{
    width:100%;

    overflow:hidden;

    color:#8b8385;

    font-size:10px;
    font-weight:500;

    white-space:nowrap;
    text-overflow:ellipsis;
}


.order-project-switch,
.order-project-preview-arrow{
    width:38px;
    height:38px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0;

    border:1px solid #e8e1e3;
    border-radius:50%;

    background:#fff;

    color:#5c5557;

    cursor:pointer;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease;
}


.order-project-switch:hover:not(:disabled),
.order-project-preview-arrow:hover:not(:disabled){
    background:#d56578;
    border-color:#d56578;

    color:#fff;

    transform:translateY(-1px);
}


.order-project-switch:disabled,
.order-project-preview-arrow:disabled{
    opacity:.3;

    cursor:default;
}


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

.order-project-preview{
    display:grid;

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

    align-items:center;

    gap:10px;
}


.order-project-preview-image{
    position:relative;

    width:100%;
    height:180px;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;

    border:1px solid #eee8e9;
    border-radius:14px;

    background:
        linear-gradient(
            145deg,
            #faf8f8,
            #f3eff0
        );
}


.order-project-preview-image img{
    display:block;

    width:100%;
    height:100%;

    object-fit:contain;
}


.order-project-preview-counter{
    margin-top:10px;

    color:#958d90;

    font-size:11px;
    font-weight:500;

    text-align:center;
}


/* ==========================================================
   EDIT PROJECT
========================================================== */

.order-project-edit{
    position:absolute;

    top:10px;
    right:10px;
    z-index:5;

    width:36px;
    height:36px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0;

    border:1px solid rgba(0,0,0,.08);
    border-radius:50%;

    background:rgba(255,255,255,.94);

    color:#333;

    font-size:14px;

    cursor:pointer;

    box-shadow:
        0 3px 12px rgba(0,0,0,.14);

    backdrop-filter:blur(5px);

    transition:
        transform .18s ease,
        background .18s ease,
        box-shadow .18s ease;
}


.order-project-edit:hover{
    background:#fff;

    transform:
        translateY(-1px)
        scale(1.05);

    box-shadow:
        0 5px 16px rgba(0,0,0,.18);
}


.order-project-edit:active{
    transform:scale(.96);
}


.order-project-edit[hidden]{
    display:none;
}


/* ==========================================================
   PROJECT VIEWER - MOBILE
========================================================== */

@media(max-width:768px){

    .order-project-switcher{
        grid-template-columns:
            30px
            minmax(0,1fr)
            30px;

        gap:8px;

        margin-bottom:12px;
    }


    .order-project-switch,
    .order-project-preview-arrow{
        width:30px;
        height:30px;

        font-size:10px;
    }


    .order-project-heading strong{
        font-size:12px;
    }


    .order-project-heading span{
        font-size:9px;
    }


    .order-project-preview{
        grid-template-columns:
            30px
            minmax(0,1fr)
            30px;

        gap:8px;
    }


    .order-project-preview-image{
        height:150px;

        border-radius:10px;
    }


    .order-project-edit{
        top:5px;
        right:5px;

        width:28px;
        height:28px;

        font-size:10px;
    }


    .order-project-preview-counter{
        margin-top:7px;

        font-size:10px;
    }

}

/* ==========================================================
   CURRENT ITEM
========================================================== */

.order-delivery-summary-items{
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #eee9ea;
}


.order-delivery-summary-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}


.order-delivery-summary-item-info{
    min-width: 0;

    display: flex;
    flex-direction: column;
    gap: 5px;
}


.order-delivery-summary-item-info strong{
    font-size: 13px;
    font-weight: 600;
    color: #332d2f;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.order-delivery-summary-item-info span{
    font-size: 12px;
    color: #8c8487;
}


.order-delivery-summary-item-total{
    flex-shrink: 0;

    font-size: 13px;
    font-weight: 600;
    color: #332d2f;
}


/* ==========================================================
   TOTALS
========================================================== */

.order-delivery-summary-totals{
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #eee9ea;
}


.order-delivery-summary-total-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 12px;

    font-size: 12px;
    color: #777074;
}


.order-delivery-summary-total-row strong{
    font-size: 13px;
    font-weight: 600;
    color: #342e30;
}


.order-delivery-summary-total-divider{
    height: 1px;
    margin: 18px 0;
    background: #e9e3e5;
}


.order-delivery-summary-total-row.final{
    margin-bottom: 0;
}


.order-delivery-summary-total-row.final span{
    font-size: 15px;
    font-weight: 600;
    color: #2e292a;
}


.order-delivery-summary-total-row.final strong{
    font-size: 21px;
    font-weight: 700;
    color: #d56578;
}

/* ==========================================================
   DELIVERY - ADDRESS FORM
========================================================== */

.order-delivery-fields{
    display: flex;
    flex-direction: column;
    gap: 16px;
}


.order-delivery-field-row{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}


.order-delivery-field{
    display: flex;
    flex-direction: column;
    gap: 7px;
}


.order-delivery-field label,
.order-delivery-saved-address > label{
    font-size: 12px;
    font-weight: 600;
    color: #4a4345;
}


.order-delivery-field label span{
    margin-left: 4px;
    font-size: 10px;
    font-weight: 400;
    color: #a0999b;
}


.order-delivery-field input,
.order-delivery-saved-address select{
    width: 100%;
    height: 46px;

    padding: 0 13px;

    border: 1px solid #e3dddf;
    border-radius: 10px;

    background: #ffffff;

    font-family: Poppins, sans-serif;
    font-size: 13px;
    color: #302a2c;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}


.order-delivery-field input::placeholder{
    color: #b8b1b3;
}


.order-delivery-field input:hover,
.order-delivery-saved-address select:hover{
    border-color: #d8ced1;
}


.order-delivery-field input:focus,
.order-delivery-saved-address select:focus{
    border-color: #d56578;

    box-shadow:
        0 0 0 3px rgba(213, 101, 120, 0.10);
}

.order-delivery-field input[readonly]{
    background: #f7f5f6;
    color: #777074;
    cursor: not-allowed;
}

/* ==========================================================
   SAVED ADDRESS
========================================================== */

.order-delivery-saved-address{
    margin-bottom: 22px;
    padding-bottom: 22px;

    border-bottom: 1px solid #eee9ea;
}


.order-delivery-saved-address > label{
    display: block;
    margin-bottom: 8px;
}


.order-delivery-saved-address select{
    cursor: pointer;
}


/* ==========================================================
   SAVE ADDRESS
========================================================== */

.order-delivery-save-address{
    margin-top: 20px;
    padding-top: 18px;

    border-top: 1px solid #eee9ea;
}


.order-delivery-save-address[hidden],
.order-delivery-save-address-name[hidden]{
    display: none !important;
}


.order-delivery-checkbox{
    display: inline-flex;
    align-items: center;
    gap: 10px;

    cursor: pointer;
    user-select: none;

    font-size: 12px;
    font-weight: 500;
    color: #4b4446;
}


.order-delivery-checkbox input{
    width: 17px;
    height: 17px;
    margin: 0;

    accent-color: #d56578;

    cursor: pointer;
}


.order-delivery-save-address-name{
    margin-top: 16px;
    padding: 16px;

    background: #fff8f9;

    border: 1px solid #f1e1e4;
    border-radius: 12px;
}


.order-delivery-save-address-name small{
    font-size: 10px;
    line-height: 1.5;
    color: #958d90;
}


/* ==========================================================
   VALIDATION
========================================================== */

.order-delivery-field-error{
    margin-top: 1px;

    font-size: 10px;
    font-weight: 500;
    color: #c94d61;
}


.order-delivery-field-error[hidden]{
    display: none !important;
}


.order-delivery-field input[aria-invalid="true"]{
    border-color: #cf596d;
    background: #fffafb;

    box-shadow:
        0 0 0 3px rgba(207, 89, 109, 0.08);
}

/* ==========================================================
   DELIVERY - METHODS
========================================================== */

.order-delivery-methods{
    display: flex;
    flex-direction: column;
    gap: 10px;
}


.order-delivery-method{
    position: relative;

    display: flex;
    align-items: center;
    gap: 13px;

    min-height: 72px;
    padding: 14px 15px;

    border: 1px solid #e6dfe1;
    border-radius: 12px;

    background: #ffffff;

    cursor: pointer;

    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}


.order-delivery-method:hover{
    border-color: #d9cdd0;
}


.order-delivery-method.active{
    color: inherit;
    padding-bottom: 14px;

    border: 1px solid #d56578;
    background: #fff9fa;

    box-shadow:
        0 0 0 3px rgba(213, 101, 120, 0.07);
}


.order-delivery-method input{
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
    pointer-events: none;
}


.order-delivery-method-radio{
    flex: 0 0 18px;

    width: 18px;
    height: 18px;

    border: 2px solid #cfc6c8;
    border-radius: 50%;

    background: #ffffff;

    position: relative;
}


.order-delivery-method input:checked +
.order-delivery-method-radio{
    border-color: #d56578;
}


.order-delivery-method input:checked +
.order-delivery-method-radio::after{
    content: "";

    position: absolute;
    top: 50%;
    left: 50%;

    width: 8px;
    height: 8px;

    border-radius: 50%;
    background: #d56578;

    transform:
        translate(-50%, -50%);
}


.order-delivery-method-content{
    min-width: 0;

    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
}


.order-delivery-method-content strong{
    font-size: 13px;
    font-weight: 600;
    color: #342e30;
}


.order-delivery-method-content > span{
    font-size: 11px;
    line-height: 1.5;
    color: #8d8588;
}


.order-delivery-method-price{
    flex-shrink: 0;

    font-size: 13px;
    font-weight: 600;
    color: #d56578;
}

.order-delivery-method.disabled{
    opacity: 0.5;
    cursor: not-allowed;
    background: #faf9f9;
}


.order-delivery-method.disabled:hover{
    border-color: #e6dfe1;
}


.order-delivery-method.disabled
.order-delivery-method-price{
    color: #aaa2a5;
}

.order-delivery-field textarea{
    width: 100%;
    min-height: 105px;

    padding: 12px 13px;

    border: 1px solid #e3dddf;
    border-radius: 10px;

    background: #ffffff;

    font-family: Poppins, sans-serif;
    font-size: 13px;
    line-height: 1.6;
    color: #302a2c;

    outline: none;
    resize: vertical;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.order-delivery-field textarea::placeholder{
    color: #b8b1b3;
}


.order-delivery-field textarea:focus{
    border-color: #d56578;

    box-shadow:
        0 0 0 3px rgba(213, 101, 120, 0.10);
}


.order-delivery-field > small{
    font-size: 10px;
    line-height: 1.5;
    color: #958d90;
}

/* ==========================================================
   DELIVERY - DISCOUNT CODE
========================================================== */

.order-delivery-discount{
    margin-top: 18px;
    padding-top: 18px;

    border-top: 1px solid #eee9ea;
}


.order-delivery-discount > label{
    display: block;

    margin-bottom: 8px;

    font-size: 11px;
    font-weight: 600;
    color: #4a4345;
}


.order-delivery-discount-form{
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
}


.order-delivery-discount-form input{
    min-width: 0;
    height: 42px;

    padding: 0 12px;

    border: 1px solid #e3dddf;
    border-radius: 9px;

    background: #ffffff;

    font-family: Poppins, sans-serif;
    font-size: 12px;
    color: #302a2c;

    outline: none;

    text-transform: uppercase;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


.order-delivery-discount-form input::placeholder{
    text-transform: none;
    color: #b8b1b3;
}


.order-delivery-discount-form input:focus{
    border-color: #d56578;

    box-shadow:
        0 0 0 3px rgba(213, 101, 120, 0.10);
}


.order-delivery-discount-form button{
    height: 42px;

    padding: 0 15px;

    border: none;
    border-radius: 9px;

    background: #d56578;
    color: #ffffff;

    font-family: Poppins, sans-serif;
    font-size: 11px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.2s ease,
        transform 0.2s ease,
        opacity 0.2s ease;
}


.order-delivery-discount-form button:hover:not(:disabled){
    background: #c95569;
    transform: translateY(-1px);
}


.order-delivery-discount-form button:disabled{
    opacity: 0.6;
    cursor: default;
}


.order-delivery-discount-message{
    margin-top: 8px;

    font-size: 10px;
    font-weight: 500;
    line-height: 1.5;
}


.order-delivery-discount-message.success{
    color: #40845b;
}


.order-delivery-discount-message.error{
    color: #c94d61;
}


.order-delivery-discount-message[hidden],
.order-delivery-summary-total-row[hidden]{
    display: none !important;
}


.order-delivery-summary-total-row.discount{
    margin-top: 14px;
}


.order-delivery-summary-total-row.discount span{
    color: #5f575a;
}


.order-delivery-summary-total-row.discount strong{
    color: #40845b;
}

/* ==========================================================
   DELIVERY - ACTIONS
========================================================== */

.order-delivery-actions{
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;

    margin-top: 26px;
}


.order-delivery-actions button{
    min-height: 46px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    padding: 0 20px;

    border-radius: 10px;

    font-family: Poppins, sans-serif;
    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}


.order-delivery-back{
    border: 1px solid #e2dcde;
    background: #ffffff;
    color: #5e5759;
}


.order-delivery-back:hover{
    border-color: #d4c9cc;
    background: #faf8f8;
    transform: translateY(-1px);
}


.order-delivery-continue{
    border: 1px solid #d56578;
    background: #d56578;
    color: #ffffff;
}


.order-delivery-continue:hover{
    border-color: #c95569;
    background: #c95569;
    transform: translateY(-1px);
}


.order-delivery-continue:disabled{
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

/* ==========================================================
   ORDER - STEP 4 / CONFIRMATION
========================================================== */

.order-step[data-order-step="4"]{
    font-family: Poppins, sans-serif;
}


.order-confirmation{
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
    align-items: start;

    margin-top: 30px;
}


.order-confirmation-main{
    display: flex;
    flex-direction: column;
    gap: 18px;
}


/* ==========================================================
   CARDS
========================================================== */

.order-confirmation-card{
    background: #ffffff;

    border: 1px solid #ece7e8;
    border-radius: 16px;

    padding: 24px;

    box-shadow:
        0 8px 30px rgba(30, 20, 22, 0.05);
}


.order-confirmation-card[hidden]{
    display: none !important;
}


.order-confirmation-card-header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    margin-bottom: 18px;
    padding-bottom: 16px;

    border-bottom: 1px solid #eee9ea;
}


.order-confirmation-card-header h3,
.order-confirmation-summary > h3{
    margin: 0;

    font-size: 16px;
    font-weight: 600;
    color: #302a2c;
}


/* ==========================================================
   EDIT BUTTON
========================================================== */

.order-confirmation-card-header button{
    padding: 7px 12px;

    border: 1px solid #eadfe1;
    border-radius: 8px;

    background: #ffffff;
    color: #d56578;

    font-family: Poppins, sans-serif;
    font-size: 11px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}


.order-confirmation-card-header button:hover{
    background: #fff7f8;
    border-color: #d56578;
}


/* ==========================================================
   ADDRESS
========================================================== */

.order-confirmation-address{
    display: flex;
    flex-direction: column;
    gap: 5px;

    font-size: 13px;
    line-height: 1.55;
    color: #5f585a;
}


.order-confirmation-address > div:first-child{
    margin-bottom: 3px;

    font-size: 14px;
    font-weight: 600;
    color: #302a2c;
}


/* ==========================================================
   DELIVERY
========================================================== */

.order-confirmation-delivery{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}


.order-confirmation-delivery strong{
    font-size: 13px;
    font-weight: 600;
    color: #342e30;
}


.order-confirmation-delivery span{
    font-size: 13px;
    font-weight: 600;
    color: #d56578;
}


/* ==========================================================
   PRODUCT
========================================================== */

.order-confirmation-product{
    min-height: 80px;

    display: flex;
    align-items: center;

    font-size: 13px;
    color: #6f676a;
}


/* ==========================================================
   NOTE
========================================================== */

.order-confirmation-note{
    margin: 0;

    padding: 14px 16px;

    background: #fff9fa;

    border: 1px solid #f1e3e5;
    border-radius: 10px;

    font-size: 12px;
    line-height: 1.7;
    color: #655d60;

    white-space: pre-wrap;
}


/* ==========================================================
   SUMMARY
========================================================== */

.order-confirmation-summary{
    top: 24px;
}


.order-confirmation-summary > h3{
    margin-bottom: 20px;
    padding-bottom: 16px;

    border-bottom: 1px solid #eee9ea;
}


.order-confirmation-summary-rows{
    display: flex;
    flex-direction: column;
    gap: 13px;
}


.order-confirmation-summary-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    font-size: 12px;
    color: #777074;
}


.order-confirmation-summary-row strong{
    font-size: 13px;
    font-weight: 600;
    color: #342e30;
}


.order-confirmation-summary-row.discount strong{
    color: #40845b;
}


.order-confirmation-summary-row[hidden]{
    display: none !important;
}


.order-confirmation-summary-divider{
    height: 1px;

    margin: 20px 0;

    background: #e9e3e5;
}


.order-confirmation-summary-total{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}


.order-confirmation-summary-total span{
    font-size: 15px;
    font-weight: 600;
    color: #302a2c;
}


.order-confirmation-summary-total strong{
    font-size: 22px;
    font-weight: 700;
    color: #d56578;
}


/* ==========================================================
   TERMS
========================================================== */

.order-confirmation-terms{
    display: flex;
    align-items: flex-start;
    gap: 10px;

    margin-top: 24px;
    padding-top: 20px;

    border-top: 1px solid #eee9ea;

    cursor: pointer;
}


.order-confirmation-terms input{
    flex: 0 0 17px;

    width: 17px;
    height: 17px;

    margin: 1px 0 0;

    accent-color: #d56578;

    cursor: pointer;
}


.order-confirmation-terms span{
    font-size: 11px;
    line-height: 1.55;
    color: #686063;
}


/* ==========================================================
   SUBMIT
========================================================== */

.order-confirmation-submit{
    width: 100%;
    min-height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    margin-top: 18px;

    border: 1px solid #d56578;
    border-radius: 10px;

    background: #d56578;
    color: #ffffff;

    font-family: Poppins, sans-serif;
    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        opacity 0.2s ease;
}


.order-confirmation-submit:hover:not(:disabled){
    background: #c95569;
    border-color: #c95569;

    transform: translateY(-1px);
}


.order-confirmation-submit:disabled{
    opacity: 0.45;
    cursor: not-allowed;
}

/*
==========================
ORDER SUCCESS VISIBILITY
==========================
*/

.order-confirmation[hidden],
.order-step-header[hidden],
.order-success[hidden]{
    display:none !important;
}

/*
|--------------------------------------------------------------------------
| Order Success
|--------------------------------------------------------------------------
*/

.order-success[hidden]{
    display: none !important;
}

.order-success{
    max-width: 860px;
    margin: 0 auto;
    padding: 56px 48px;
    background: #ffffff;
    border: 1px solid #efe7e7;
    border-radius: 28px;
    box-shadow: 0 20px 60px rgba(25, 30, 45, 0.06);
    text-align: center;
}

.order-success-icon{
    width: 72px;
    height: 72px;
    margin: 0 auto 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ec5f7c 0%, #f28aa0 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 14px 34px rgba(236, 95, 124, 0.24);
}

.order-success-icon i{
    color: #ffffff;
    font-size: 27px;
}

.order-success h2{
    margin: 0 0 18px;
    font-size: 38px;
    line-height: 1.15;
    font-weight: 700;
    color: #1f2430;
    letter-spacing: -0.02em;
}

.order-success-description{
    max-width: 760px;
    margin: 0 auto 34px;
    font-size: 17px;
    line-height: 1.65;
    color: #5f6675;
}

.order-success-number{
    max-width: 560px;
    margin: 0 auto 28px;
    text-align: left;
}

.order-success-number > span{
    display: block;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #8c90a0;
}

.order-success-number-box{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    border: 1px solid #f1d8de;
    background: #fff7f9;
    border-radius: 18px;
}

#orderSuccessNumber{
    display: block;
    font-size: 23px;
    line-height: 1.2;
    font-weight: 700;
    color: #1f2430;
    letter-spacing: 0.01em;
    word-break: break-word;
}

#orderSuccessCopy{
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border: 1px solid #ec5f7c;
    border-radius: 12px;
    background: #ffffff;
    color: #ec5f7c;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

#orderSuccessCopy:hover{
    background: #ec5f7c;
    color: #ffffff;
    transform: translateY(-1px);
}

#orderSuccessCopy i{
    font-size: 15px;
}

.order-success-copy-message{
    display: inline-block;
    margin-top: 10px;
    font-size: 14px;
    color: #2f8f57;
    font-weight: 600;
}

.order-success-payment{
    max-width: 560px;
    margin: 0 auto 22px;
    padding: 20px 22px;
    border: 1px solid #e7edf5;
    border-radius: 18px;
    background: #f8fafc;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    text-align: left;
}

.order-success-payment i{
    flex-shrink: 0;
    font-size: 28px;
    color: #0084ff;
    margin-top: 2px;
}

.order-success-payment strong{
    display: block;
    margin-bottom: 6px;
    font-size: 16px;
    font-weight: 700;
    color: #1f2430;
}

.order-success-payment p{
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #616777;
}

.order-success-summary{
    max-width: 560px;
    margin: 0 auto;
    padding: 18px 22px;
    border-top: 1px solid #ece7ea;
}

.order-success-summary > div{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.order-success-summary span{
    font-size: 15px;
    color: #6a7080;
}

#orderSuccessTotal{
    font-size: 25px;
    font-weight: 700;
    color: #ec5f7c;
    line-height: 1.1;
}


/*
|--------------------------------------------------------------------------
| Responsive
|--------------------------------------------------------------------------
*/

@media (max-width: 768px){

    .order-success{
        padding: 36px 22px;
        border-radius: 22px;
    }

    .order-success h2{
        font-size: 34px;
    }

    .order-success-description{
        font-size: 17px;
        line-height: 1.65;
        margin-bottom: 26px;
    }

    .order-success-number-box{
        flex-direction: column;
        align-items: stretch;
    }

    #orderSuccessNumber{
        font-size: 22px;
        text-align: center;
    }

    #orderSuccessCopy{
        width: 100%;
        justify-content: center;
    }

    .order-success-payment{
        flex-direction: column;
        align-items: flex-start;
    }

    .order-success-summary > div{
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    #orderSuccessTotal{
        font-size: 26px;
    }
}

.order-page .order-step.active{
    padding-bottom:38px;
}

/*
|--------------------------------------------------------------------------
| Order Success Actions
|--------------------------------------------------------------------------
*/

.order-success-actions{
    margin-top: 28px;
    text-align: center;
}

.order-success-new-order{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 20px;
    border: none;
    border-radius: 12px;
    background: #1f2430;
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}

.order-success-new-order:hover{
    transform: translateY(-1px);
    opacity: 0.92;
}

/* ==========================================================
   ORDER PAGE - MOBILE
========================================================== */

@media(max-width:768px){

    /* ======================================================
       PAGE
    ====================================================== */

    .order-page{
        min-height:0;

		padding:
			32px
			14px
			32px;

        background:#fbf8f6;
    }

    .order-container{
        width:100%;
        max-width:none;
    }


    /* ======================================================
       ORDER HEADER
    ====================================================== */

    .order-header{
        max-width:370px;

        margin:
            0
            auto
            32px;

        padding:0 4px;

        text-align:center;
    }

    .order-header-badge{
        margin-bottom:14px;

        padding:
            7px
            16px;

        font-size:11px;
    }

    .order-title{
        max-width:360px;

        margin:
            0
            auto
            12px;

        font-size:30px;
        line-height:1.12;

        letter-spacing:-.5px;
    }

    .order-description{
        max-width:350px;

        margin:0 auto;

        font-size:13px;
        line-height:1.6;
    }


    /* ======================================================
       PROGRESS
    ====================================================== */

    .order-progress{
        position:relative;

        width:100%;
        max-width:390px;

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

        align-items:start;

        gap:0;

        margin:
            0
            auto
            34px;
    }

    .order-progress::before{
        content:"";

        position:absolute;

        top:21px;

        left:12.5%;
        right:12.5%;

        height:2px;

        background:#e2e2e2;

        z-index:0;
    }

    .order-progress-line{
        display:none;
    }

    .order-progress-step{
        position:relative;
        z-index:1;

        min-width:0;

        display:flex;
        flex-direction:column;
        align-items:center;

        gap:8px;

        text-align:center;
    }

    .order-progress-number{
        width:44px;
        height:44px;

        flex-shrink:0;

        background:#fff;

        font-size:13px;
    }

    .order-progress-content{
        width:100%;
        min-width:0;

        display:flex;
        flex-direction:column;
        align-items:center;

        gap:3px;
    }

    .order-progress-content strong{
        font-size:10.5px;
        line-height:1.25;

        text-align:center;
    }

    .order-progress-content span{
        font-size:9px;
        line-height:1.35;

        text-align:center;
    }


    /* ======================================================
       ORDER STEP
    ====================================================== */

    .order-step,
    .order-page .order-step.active{
        width:100%;

        padding:
            24px
            14px
            18px;

        border-radius:18px;

        box-shadow:
            0 8px 28px
            rgba(50,40,40,.045);
    }

    .order-step-header{
        margin-bottom:22px;
    }

    .order-step-label{
        margin-bottom:7px;

        font-size:11px;
    }

    .order-step-header h2{
        margin-bottom:7px;

        font-size:24px;
        line-height:1.25;
    }

    .order-step-header p{
        font-size:12px;
        line-height:1.55;
    }


    /* ======================================================
       PRODUCTS
    ====================================================== */

    .order-products{
        display:grid;
        grid-template-columns:1fr;

        gap:14px;
    }

    .order-product-card{
        width:100%;
        min-height:155px;

        display:flex;
        align-items:stretch;

        border-radius:14px;

        background:#fff;

        overflow:hidden;
    }

    .order-product-card:hover{
        transform:none;
    }


    /* ======================================================
       PRODUCT IMAGE
    ====================================================== */

    .order-product-image{
        width:112px;
        min-height:155px;

        flex:0 0 112px;

        background:#f5f5f5;
    }

    .order-product-image img{
        width:100%;
        height:100%;

        object-fit:cover;
    }


    /* ======================================================
       PRODUCT INFO
    ====================================================== */

    .order-product-info{
        min-width:0;

        flex:1;

        padding:
            14px
            13px;
    }

    .order-product-top{
        gap:8px;
    }

    .order-product-top h3{
        min-width:0;

        font-size:13px;
        line-height:1.35;
    }

    .order-product-info > p{
        margin:
            7px
            0
            13px;

        font-size:10.5px;
        line-height:1.5;
    }


    /* ======================================================
       RADIO
    ====================================================== */

    .order-product-check{
        position:relative;

        width:26px;
        height:26px;

        flex:0 0 26px;

        border:2px solid #d8d8d8;

        background:#fff;

        color:transparent;
    }

    .order-product-check i{
        display:none;
    }

    .order-product-check::after{
        content:"";

        position:absolute;

        top:50%;
        left:50%;

        width:12px;
        height:12px;

        border-radius:50%;

        background:#d56578;

        transform:
            translate(-50%,-50%)
            scale(0);

        transition:transform .18s ease;
    }

    .order-product-radio:checked
    ~ .order-product-info
    .order-product-check{
        border-color:#d56578;

        background:#fff;
    }

    .order-product-radio:checked
    ~ .order-product-info
    .order-product-check::after{
        transform:
            translate(-50%,-50%)
            scale(1);
    }


    /* ======================================================
       META + PRICE
    ====================================================== */

    .order-product-meta{
        align-items:flex-end;

        gap:8px;
    }

    .order-product-meta-left{
        gap:5px;
    }

    .order-product-meta span{
        gap:6px;

        font-size:10px;

        white-space:nowrap;
    }

    .order-product-meta span i{
        width:12px;

        text-align:center;
    }

    .order-product-meta strong{
        flex-shrink:0;

        gap:2px;

        font-size:16px;
        line-height:1.2;

        white-space:nowrap;
    }

    .order-product-meta strong small{
        font-size:8px;

        white-space:nowrap;
    }


    /* ======================================================
       NAVIGATION
    ====================================================== */

    .order-navigation{
        margin-top:20px;

        padding:
            20px
            0
            0;

        border-top:1px solid #eeeeee;
    }

    .order-navigation-end{
        justify-content:stretch;
    }

    .order-button{
        width:100%;
        min-width:0;

        height:52px;

        border-radius:12px;

        font-size:14px;
    }

    .order-button-primary{
        background:
            linear-gradient(
                90deg,
                #ed667b,
                #df5d75
            );
    }

}


/* ==========================================================
   ORDER PAGE - SMALL MOBILE
========================================================== */

@media(max-width:380px){

    .order-page{
        padding-left:10px;
        padding-right:10px;
    }

    .order-title{
        font-size:27px;
    }

    .order-description{
        font-size:12px;
    }

    .order-progress-content strong{
        font-size:9.5px;
    }

    .order-progress-content span{
        font-size:8px;
    }

    .order-step,
    .order-page .order-step.active{
        padding-left:11px;
        padding-right:11px;
    }

    .order-product-image{
        width:100px;

        flex-basis:100px;
    }

    .order-product-info{
        padding:
            12px
            10px;
    }

    .order-product-top h3{
        font-size:12px;
    }

    .order-product-meta strong{
        font-size:14px;
    }

}

/* ==========================================================
   ORDER STEP 2 - PERSONALISATION - MOBILE
========================================================== */

@media(max-width:768px){

    /* ======================================================
       STEP CARD
    ====================================================== */

    .order-step[data-order-step="2"],
    .order-page .order-step[data-order-step="2"].active{
        width:100%;

        padding:
            22px
            12px
            16px;

        border-radius:18px;
    }

    .order-step[data-order-step="2"] .order-step-header{
        margin-bottom:18px;
    }

    .order-step[data-order-step="2"] .order-step-header h2{
        font-size:23px;
        line-height:1.25;
    }

    .order-step[data-order-step="2"] .order-step-header p{
        max-width:360px;

        font-size:12px;
        line-height:1.55;
    }


    /* ======================================================
       PERSONALISATION
    ====================================================== */

    .magnet-personalisation{
        gap:14px;
    }


    /* ======================================================
       WORKSPACE
    ====================================================== */

    .magnet-workspace{
        width:100%;
        min-height:0;

        display:grid;
        grid-template-columns:1fr;

        gap:12px;
    }


    /* ======================================================
       YOUR PHOTOS
    ====================================================== */

    .magnet-projects{
        position:relative;

        width:100%;
        min-width:0;

        display:grid;
        grid-template-columns:1fr auto;

        padding:
            14px
            14px
            15px;

        border-radius:14px;

        box-shadow:none;
    }

    .magnet-projects-intro{
        grid-column:1;

        margin:0;
    }

    .magnet-projects-intro h3{
        margin:0;

        font-size:14px;
        line-height:1.4;
    }

    .magnet-projects-intro p{
        display:none;
    }

	.magnet-projects-header{
		grid-column:2;
		grid-row:1;

		align-self:center;
		justify-self:end;

		margin:0;
	}

	.magnet-projects-header strong{
		display:none;
	}

	.magnet-projects-header span{
		min-width:24px;
		height:24px;

		display:flex;
		align-items:center;
		justify-content:center;

		padding:0 7px;

		border-radius:999px;

		background:#fff0f2;

		color:#d56578;

		font-size:10px;
		font-weight:600;
	}

	.magnet-projects-intro{
		grid-column:1;
		grid-row:1;
	}

	.magnet-upload{
		grid-column:1 / -1;
		grid-row:2;
	}

    .magnet-upload-area{
        width:100%;
        min-height:44px;

        border-radius:10px;

        font-size:11px;
    }

    .magnet-upload-area strong{
        font-size:11px;
    }

    .magnet-upload-help{
        display:none;
    }

    .magnet-projects-divider{
        display:none;
    }

    .magnet-projects-list{
		grid-column:1 / -1;
		grid-row:3;
        display:flex;

        gap:9px;

        margin-top:12px;

        overflow-x:auto;
        overflow-y:hidden;

        padding-bottom:2px;

        scrollbar-width:none;
    }

    .magnet-projects-list::-webkit-scrollbar{
        display:none;
    }

    .magnet-project-item{
        width:78px;
        min-width:78px;

        flex:0 0 78px;

        padding:3px;

        border-radius:9px;
    }

    .magnet-project-thumbnail{
        width:100%;
    }

    .magnet-project-details strong{
        margin-top:4px;

        font-size:8px;
    }


    /* ======================================================
       EDITOR
    ====================================================== */

    .magnet-editor{
        width:100%;
        min-width:0;

        padding:
            14px
            12px
            15px;

        border-radius:14px;

        box-shadow:none;
    }

    .magnet-editor-header{
        align-items:center;

        gap:10px;

        margin-bottom:14px;
    }

    .magnet-editor-header strong{
        font-size:14px;
    }

    .magnet-editor-header span{
        font-size:10px;
    }

    .magnet-remove-project{
        padding:
            8px
            10px;

        font-size:10px;
    }


    /* ======================================================
       CANVAS
    ====================================================== */

    .magnet-canvas-wrapper{
        width:100%;
        min-height:0;

        padding:12px;

        border-radius:12px;

        background:#f3f3f3;
    }

    .magnet-canvas{
        width:100%;
        max-width:100%;

        border-radius:8px;
    }

    .magnet-canvas.portrait{
        width:min(72vw, 245px);

        margin:0 auto;
    }


    /* ======================================================
       CONTROLS
    ====================================================== */

    .magnet-controls{
        display:grid;

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

        gap:
            16px
            10px;

        margin-top:18px;
    }

    .magnet-control-group{
        min-width:0;

        gap:8px;
    }

    .magnet-control-group > label,
    .magnet-control-label-row label{
        font-size:10px;
        line-height:1.35;
    }

    .magnet-control-label-row span{
        font-size:10px;
    }


    /* Zoom */

    .magnet-zoom-control{
        order:1;

        grid-column:1 / -1;
    }

    .magnet-zoom{
        width:100%;
    }


    /* Orientation */

    .magnet-controls > .magnet-control-group:nth-last-of-type(2){
        order:2;

        grid-column:1;
    }

    .magnet-orientation{
        width:100%;

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

        gap:6px;
    }

    .magnet-orientation-button{
        min-width:0;
        height:44px;

        gap:5px;

        padding:
            0
            6px;

        font-size:9px;
    }


    /* Quantity */

    .magnet-controls > .magnet-control-group:last-child{
        order:3;

        grid-column:2;
    }

    .magnet-quantity{
        width:100%;
        height:44px;

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

    .magnet-quantity button{
        font-size:16px;
    }

    .magnet-quantity input{
        font-size:12px;
    }


    /* Advanced */

    .magnet-advanced{
        order:4;

        grid-column:1 / -1;

        border-radius:10px;
    }

    .magnet-advanced-toggle{
        min-height:44px;

        padding:
            0
            12px;

        font-size:10px;
    }

    .magnet-advanced-content{
        padding:
            14px
            12px;
    }


    /* ======================================================
       SUMMARY
    ====================================================== */

    .magnet-order-summary{
        width:100%;
        min-width:0;

        padding:14px;

        border-radius:14px;

        box-shadow:none;
    }

    .magnet-order-summary-header{
        margin-bottom:14px;
    }

    .magnet-order-summary-header strong{
        font-size:14px;
    }

    .magnet-order-minimum{
        gap:9px;

        padding:11px;

        border-radius:9px;
    }

    .magnet-order-minimum > i{
        width:26px;
        height:26px;

        font-size:11px;
    }

    .magnet-order-minimum strong{
        font-size:10px;
    }

    .magnet-order-minimum span{
        font-size:9px;
    }

    .magnet-summary-product{
        gap:10px;
    }

    .magnet-summary-product-image{
        width:66px;
        height:44px;
    }

    .magnet-order-summary-row span{
        font-size:10px;
    }

    .magnet-order-summary-row strong{
        font-size:11px;
    }

    .magnet-order-summary-total span{
        font-size:12px;
    }

    .magnet-order-summary-total strong{
        font-size:18px;
    }

    .magnet-price-tiers{
        gap:6px;

        margin-top:18px;
        padding-top:16px;
    }

    .magnet-price-tiers-title{
        font-size:10px;
    }

    .magnet-price-tier span,
    .magnet-price-tier strong{
        font-size:9px;
    }


    /* ======================================================
       NAVIGATION
    ====================================================== */

    .magnet-navigation{
        width:100%;

        display:grid;

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

        align-items:center;

        gap:8px;

        margin-top:14px;

        padding:
            16px
            0
            0;
    }

    .magnet-navigation-right{
        min-width:0;

        display:grid;

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

        gap:8px;
    }

    .magnet-navigation .order-button{
        width:100%;
        min-width:0;
        height:46px;

        gap:6px;

        padding:
            0
            9px;

        border-radius:10px;

        font-size:10px;

        white-space:nowrap;
    }

    .magnet-navigation .magnet-back-button{
        grid-column:1;
    }

    .magnet-navigation .magnet-cart-button{
        font-size:10px;
    }

}


/* ==========================================================
   STEP 2 - VERY SMALL MOBILE
========================================================== */

@media(max-width:380px){

    .order-step[data-order-step="2"],
    .order-page .order-step[data-order-step="2"].active{
        padding-left:10px;
        padding-right:10px;
    }

    .magnet-editor,
    .magnet-projects,
    .magnet-order-summary{
        padding-left:10px;
        padding-right:10px;
    }

    .magnet-orientation-button{
        font-size:8px;
    }

    .magnet-navigation{
        grid-template-columns:
            78px
            minmax(0,1fr);
    }

    .magnet-navigation-right{
        grid-template-columns:
            minmax(0,1fr)
            78px;
    }

    .magnet-navigation .order-button{
        padding-left:6px;
        padding-right:6px;

        font-size:9px;
    }

}

/* ==========================================================
   ORDER STEP 2 - TABLET / COMPACT DESKTOP
========================================================== */

@media(min-width:769px) and (max-width:1180px){

    /* STEP */

    .order-step[data-order-step="2"],
    .order-page .order-step[data-order-step="2"].active{
        width:100%;

        padding:
            28px
            24px;
    }


    /* WORKSPACE */

    .magnet-workspace{
        width:100%;
        min-height:0;

        display:grid;
        grid-template-columns:1fr;

        gap:18px;
    }


    /* ======================================================
       PHOTOS
    ====================================================== */

    .magnet-projects{
        width:100%;
        min-width:0;

        display:grid;
        grid-template-columns:1fr auto;

        padding:20px;

        box-shadow:none;
    }

    .magnet-projects-intro{
        grid-column:1;
        grid-row:1;

        margin:0;
    }

    .magnet-projects-header{
        grid-column:2;
        grid-row:1;

        align-self:center;
        justify-self:end;

        margin:0;
    }

    .magnet-projects-header strong{
        display:none;
    }

    .magnet-projects-header span{
        min-width:26px;
        height:26px;

        display:flex;
        align-items:center;
        justify-content:center;

        padding:0 8px;

        border-radius:999px;

        background:#fff0f2;

        color:#d56578;

        font-size:11px;
        font-weight:600;
    }

    .magnet-upload{
        grid-column:1 / -1;
        grid-row:2;

        margin-top:16px;
    }

    .magnet-upload-area{
        width:100%;
    }

    .magnet-upload-help{
        margin-top:7px;
    }

    .magnet-projects-divider{
        display:none;
    }

    .magnet-projects-list{
        grid-column:1 / -1;
        grid-row:3;

        display:flex;

        gap:10px;

        margin-top:16px;

        overflow-x:auto;
        overflow-y:hidden;

        padding-bottom:3px;

        scrollbar-width:none;
    }

    .magnet-projects-list::-webkit-scrollbar{
        display:none;
    }

    .magnet-project-item{
        width:92px;
        min-width:92px;

        flex:0 0 92px;
    }


    /* ======================================================
       EDITOR
    ====================================================== */

    .magnet-editor{
        width:100%;
        min-width:0;

        padding:
            22px
            24px;

        box-shadow:none;
    }

    .magnet-canvas-wrapper{
        min-height:380px;
    }

    .magnet-canvas{
        max-width:620px;
    }


    /* ======================================================
       EDITOR CONTROLS
    ====================================================== */

    .magnet-controls{
        grid-template-columns:
            minmax(0,1fr)
            minmax(0,1fr);

        gap:
            20px
            18px;
    }

    .magnet-control-group{
        min-width:0;
    }

    .magnet-orientation{
        width:100%;

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

    .magnet-orientation-button{
        width:100%;
        min-width:0;

        padding-left:8px;
        padding-right:8px;

        white-space:nowrap;
    }

    .magnet-quantity{
        width:100%;
        min-width:0;
    }


    /* ======================================================
       SUMMARY
    ====================================================== */

    .magnet-order-summary{
        width:100%;
        min-width:0;

        padding:22px;

        box-shadow:none;
    }

    .magnet-price-tiers{
        margin-top:22px;
    }


    /* ======================================================
       NAVIGATION
    ====================================================== */

    .magnet-navigation{
        width:100%;

        display:grid;

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

        align-items:center;

        gap:12px;
    }

    .magnet-navigation-right{
        min-width:0;

        display:grid;

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

        gap:10px;
    }

    .magnet-navigation .order-button{
        width:100%;
        min-width:0;

        padding-left:14px;
        padding-right:14px;

        white-space:nowrap;
    }

}

/* ==========================================================
   ORDER STEP 3 - COMPACT DESKTOP / TABLET
========================================================== */

@media(min-width:769px) and (max-width:1180px){

    .order-delivery-layout{
        grid-template-columns:1fr;

        gap:18px;
    }

    .order-delivery-middle{
        gap:18px;
    }

    .order-delivery-card{
        width:100%;
    }

    .order-delivery-summary{
        width:100%;
    }

    .order-delivery-actions{
        margin-top:20px;
    }

}


/* ==========================================================
   ORDER STEP 3 - MOBILE
========================================================== */

@media(max-width:768px){

    /* ======================================================
       STEP
    ====================================================== */

    .order-step[data-order-step="3"],
    .order-page .order-step[data-order-step="3"].active{
        width:100%;

        padding:
            22px
            12px
            16px;

        border-radius:18px;
    }

    .order-step[data-order-step="3"] .order-step-header{
        margin-bottom:18px;
    }

    .order-step[data-order-step="3"] .order-step-header h2{
        font-size:23px;
        line-height:1.25;
    }

    .order-step[data-order-step="3"] .order-step-header p{
        font-size:12px;
        line-height:1.55;
    }


    /* ======================================================
       DELIVERY
    ====================================================== */

    .order-delivery{
        margin-top:18px;
    }

    .order-delivery-layout{
        display:grid;
        grid-template-columns:1fr;

        gap:10px;
    }

    .order-delivery-middle{
        display:flex;
        flex-direction:column;

        gap:10px;
    }


    /* ======================================================
       CARDS / ACCORDION
    ====================================================== */

    .order-delivery-card{
        width:100%;

        padding:
            14px
            14px;

        border-radius:14px;

        box-shadow:none;
    }

	.order-delivery-card-header,
	.order-delivery-summary-header{
		position:relative;

		margin:0;

		cursor:default;
		user-select:auto;
	}
	
	.order-delivery-card-header{
		margin-bottom:16px;
	}

	.order-delivery-summary-header{
		margin-bottom:16px;
		padding-bottom:14px;

		border-bottom:1px solid #eee9ea;
	}

    .order-delivery-card-header h3,
    .order-delivery-summary-header h3{
        font-size:14px;
        line-height:1.4;
    }

    .order-delivery-card-header p{
        margin-top:5px;

        font-size:11px;
        line-height:1.5;
    }

    /* ======================================================
       ADDRESS
    ====================================================== */

    .order-delivery-fields{
        gap:13px;
    }

    .order-delivery-field-row{
        grid-template-columns:
            repeat(
                2,
                minmax(0,1fr)
            );

        gap:10px;
    }

    .order-delivery-field{
        min-width:0;

        gap:6px;
    }

    .order-delivery-field label,
    .order-delivery-saved-address > label{
        font-size:10px;
    }

    .order-delivery-field label span{
        font-size:8px;
    }

    .order-delivery-field input,
    .order-delivery-saved-address select{
        height:42px;

        padding:
            0
            10px;

        border-radius:9px;

        font-size:11px;
    }

    .order-delivery-saved-address{
        margin-bottom:16px;
        padding-bottom:16px;
    }

    .order-delivery-save-address{
        margin-top:16px;
        padding-top:15px;
    }

    .order-delivery-checkbox{
        font-size:10px;
    }


    /* ======================================================
       DELIVERY METHODS
    ====================================================== */

    .order-delivery-methods{
        gap:8px;
    }

    .order-delivery-method{
        min-height:64px;

        gap:10px;

        padding:
            11px
            12px;

        border-radius:10px;
    }

    .order-delivery-method.active{
        padding-bottom:11px;
    }

    .order-delivery-method-radio{
        width:17px;
        height:17px;

        flex-basis:17px;
    }

    .order-delivery-method-content strong{
        font-size:11px;
    }

    .order-delivery-method-content > span{
        font-size:9px;
        line-height:1.45;
    }

    .order-delivery-method-price{
        font-size:11px;
    }


    /* ======================================================
       PAYMENT
    ====================================================== */

    .order-delivery-payment-info{
        gap:11px;

        padding:12px;

        border-radius:10px;
    }

    .order-delivery-payment-icon{
        width:34px;
        height:34px;

        flex-basis:34px;

        font-size:13px;
    }

    .order-delivery-payment-info strong{
        margin-bottom:3px;

        font-size:11px;
    }

    .order-delivery-payment-info p{
        font-size:9px;
        line-height:1.5;
    }


    /* ======================================================
       ADDITIONAL INFORMATION
    ====================================================== */

    .order-delivery-field textarea{
        min-height:95px;

        padding:
            10px
            11px;

        font-size:11px;

        border-radius:9px;
    }

    .order-delivery-field > small{
        font-size:9px;
    }


    /* ======================================================
       SUMMARY
    ====================================================== */

    .order-delivery-summary{
        top:auto;

        width:100%;
    }

    .order-delivery-summary-header{
        margin:0;
    }

    .order-delivery-summary-content{
        width:100%;
    }


    /* Preview */

	.order-delivery-preview{
		width:max-content;
		max-width:100%;

		grid-template-columns:
			30px
			clamp(145px, 36vw, 200px)
			30px;

		gap:10px;

		margin:
			20px
			auto
			0;
	}

	.order-delivery-preview-image{
		width:100%;
		height:auto;

		aspect-ratio:80 / 53;

		border-radius:10px;
	}

	.order-delivery-preview-image img{
		width:100%;
		height:100%;

		object-fit:cover;
	}

	.order-delivery-preview-arrow{
		width:30px;
		height:30px;

		font-size:10px;
	}

    .order-delivery-preview-edit{
        top:5px;
        right:5px;

        width:26px;
        height:26px;

        font-size:10px;
    }

	.order-delivery-preview-counter{
		margin-top:8px;

		font-size:10px;
	}


    /* Product */

    .order-delivery-summary-items{
        margin-top:14px;
        padding-top:14px;
    }

    .order-delivery-summary-item{
        gap:10px;
    }

    .order-delivery-summary-item-info{
        gap:3px;
    }

    .order-delivery-summary-item-info strong{
        font-size:11px;
    }

    .order-delivery-summary-item-info span{
        font-size:9px;
    }

    .order-delivery-summary-item-total{
        font-size:11px;
    }


    /* Totals */

    .order-delivery-summary-totals{
        margin-top:14px;
        padding-top:14px;
    }

    .order-delivery-summary-total-row{
        gap:10px;

        margin-bottom:9px;

        font-size:10px;
    }

    .order-delivery-summary-total-row strong{
        font-size:11px;
    }

    .order-delivery-summary-total-divider{
        margin:
            13px
            0;
    }

    .order-delivery-summary-total-row.final span{
        font-size:12px;
    }

    .order-delivery-summary-total-row.final strong{
        font-size:19px;
    }


    /* Discount */

    .order-delivery-discount{
        margin-top:14px;
        padding-top:14px;
    }

    .order-delivery-discount > label{
        font-size:10px;
    }

    .order-delivery-discount-form{
        grid-template-columns:
            minmax(0,1fr)
            auto;

        gap:7px;
    }

    .order-delivery-discount-form input,
    .order-delivery-discount-form button{
        height:40px;
    }

    .order-delivery-discount-form input{
        font-size:10px;
    }

    .order-delivery-discount-form button{
        padding:
            0
            12px;

        font-size:9px;
    }


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

    .order-delivery-actions{
        width:100%;

        margin-top:16px;

        justify-content:flex-end;
    }

    .order-delivery-actions button{
        min-width:145px;
        min-height:48px;

        padding:
            0
            20px;

        font-size:12px;
    }

}


/* ==========================================================
   ORDER STEP 3 - VERY SMALL MOBILE
========================================================== */

@media(max-width:440px){

    .order-delivery-field-row{
        grid-template-columns:1fr;
    }

}

/* ==========================================================
   ORDER STEP 4 - COMPACT DESKTOP / TABLET
========================================================== */

@media(min-width:769px) and (max-width:1180px){

    .order-confirmation{
        grid-template-columns:1fr;

        gap:18px;
    }

    .order-confirmation-summary{
        top:auto;
    }

    .order-confirmation-product-gallery{
        max-width:560px;
    }

}


/* ==========================================================
   ORDER STEP 4 - MOBILE
========================================================== */

@media(max-width:768px){

    /* ======================================================
       STEP
    ====================================================== */

    .order-step[data-order-step="4"],
    .order-page .order-step[data-order-step="4"].active{
        width:100%;

        padding:
            22px
            12px
            16px;

        border-radius:18px;
    }

    .order-step[data-order-step="4"] .order-step-header{
        margin-bottom:18px;
    }

    .order-step[data-order-step="4"] .order-step-header h2{
        font-size:23px;
        line-height:1.25;
    }

    .order-step[data-order-step="4"] .order-step-header p{
        font-size:12px;
        line-height:1.55;
    }


    /* ======================================================
       LAYOUT
    ====================================================== */

    .order-confirmation{
        width:100%;

        display:grid;
        grid-template-columns:1fr;

        gap:10px;

        margin-top:18px;
    }

    .order-confirmation-main{
        gap:10px;
    }


    /* ======================================================
       CARDS
    ====================================================== */

    .order-confirmation-card{
        width:100%;

        padding:
            14px
            14px;

        border-radius:14px;

        box-shadow:none;
    }

    .order-confirmation-card-header{
        gap:10px;

        margin-bottom:14px;
        padding-bottom:12px;
    }

    .order-confirmation-card-header h3,
    .order-confirmation-summary > h3{
        font-size:14px;
        line-height:1.4;
    }

    .order-confirmation-card-header button{
        padding:
            7px
            11px;

        border-radius:8px;

        font-size:10px;
    }


    /* ======================================================
       ADDRESS
    ====================================================== */

    .order-confirmation-address{
        gap:4px;

        font-size:11px;
        line-height:1.55;
    }

    .order-confirmation-address > div:first-child{
        margin-bottom:3px;

        font-size:12px;
    }


    /* ======================================================
       DELIVERY
    ====================================================== */

    .order-confirmation-delivery{
        gap:12px;
    }

    .order-confirmation-delivery strong{
        font-size:11px;
    }

    .order-confirmation-delivery span{
        font-size:12px;
    }


    /* ======================================================
       PRODUCT
    ====================================================== */

    .order-confirmation-product{
        min-height:0;

        padding:
            2px
            0
            0;
    }

    .order-confirmation-product-gallery{
        width:100%;
        max-width:360px;
        height:150px;

        margin:
            0
            auto;
    }


    /* Current */

    .order-confirmation-product-current{
        width:170px;

        padding:7px;

        border-radius:12px;
    }

    .order-confirmation-product-current-image{
        height:105px;

        border-radius:8px;
    }

    .order-confirmation-product-multiplier{
        margin-top:5px;

        font-size:9px;
    }


    /* Side projects */

    .order-confirmation-product-side{
        width:112px;
        height:88px;

        padding:5px;

        border-radius:9px;
    }

    .order-confirmation-product-side.previous{
        left:20px;
    }

    .order-confirmation-product-side.next{
        right:20px;
    }

    .order-confirmation-product-side img{
        border-radius:6px;
    }


    /* Gallery arrows */

    .order-confirmation-product-navigation{
        width:30px;
        height:30px;

        font-size:10px;
    }

    .order-confirmation-product-navigation.previous{
        left:4px;
    }

    .order-confirmation-product-navigation.next{
        right:4px;
    }


    /* Counter */

    .order-confirmation-product-counter{
        margin-top:5px;

        font-size:10px;
    }


    /* ======================================================
       NOTE
    ====================================================== */

    .order-confirmation-note{
        padding:
            11px
            12px;

        border-radius:9px;

        font-size:10px;
        line-height:1.6;
    }


    /* ======================================================
       SUMMARY
    ====================================================== */

    .order-confirmation-summary{
        top:auto;
    }

    .order-confirmation-summary > h3{
        margin-bottom:14px;
        padding-bottom:12px;
    }

    .order-confirmation-summary-rows{
        gap:10px;
    }

    .order-confirmation-summary-row{
        gap:12px;

        font-size:11px;
    }

    .order-confirmation-summary-row strong{
        font-size:11px;
    }

    .order-confirmation-summary-divider{
        margin:
            14px
            0;
    }

    .order-confirmation-summary-total span{
        font-size:13px;
    }

    .order-confirmation-summary-total strong{
        font-size:21px;
    }


    /* ======================================================
       TERMS
    ====================================================== */

    .order-confirmation-terms{
        gap:9px;

        margin-top:16px;
        padding-top:14px;
    }

    .order-confirmation-terms input{
        width:17px;
        height:17px;

        flex-basis:17px;
    }

    .order-confirmation-terms span{
        font-size:10px;
        line-height:1.5;
    }


    /* ======================================================
       SUBMIT
    ====================================================== */

    .order-confirmation-submit{
        min-height:48px;

        margin-top:15px;

        border-radius:10px;

        font-size:12px;
    }

}


/* ==========================================================
   ORDER STEP 4 - SMALL MOBILE
========================================================== */

@media(max-width:440px){

    .order-confirmation-product-gallery{
        height:135px;
    }

    .order-confirmation-product-current{
        width:150px;
    }

    .order-confirmation-product-current-image{
        height:92px;
    }

    .order-confirmation-product-side{
        width:96px;
        height:76px;
    }

    .order-confirmation-product-side.previous{
        left:14px;
    }

    .order-confirmation-product-side.next{
        right:14px;
    }

}

/* ==========================================================
   ORDER SUCCESS - MOBILE
========================================================== */

@media(max-width:768px){

    .order-success{
        width:100%;
        max-width:none;

        margin:0 auto;

        padding:
            32px
            18px;

        border-radius:18px;

        box-shadow:
            0 10px 35px
            rgba(25,30,45,.05);
    }


    /* Success icon */

    .order-success-icon{
        width:60px;
        height:60px;

        margin:
            0
            auto
            22px;
    }

    .order-success-icon i{
        font-size:22px;
    }


    /* Title */

    .order-success h2{
        margin-bottom:12px;

        font-size:28px;
        line-height:1.2;

        letter-spacing:-.02em;
    }


    /* Description */

    .order-success-description{
        max-width:520px;

        margin:
            0
            auto
            24px;

        font-size:13px;
        line-height:1.6;
    }


    /* ======================================================
       ORDER NUMBER
    ====================================================== */

    .order-success-number{
        width:100%;
        max-width:520px;

        margin:
            0
            auto
            22px;
    }

    .order-success-number > span{
        margin-bottom:8px;

        font-size:10px;
        letter-spacing:.07em;
    }

    .order-success-number-box{
        width:100%;

        gap:10px;

        padding:
            13px
            14px;

        border-radius:12px;
    }

    #orderSuccessNumber{
        min-width:0;
        flex:1;

        font-size:17px;
        line-height:1.3;

        word-break:break-word;
    }

    #orderSuccessCopy{
        flex-shrink:0;

        width:auto;

        gap:6px;

        padding:
            9px
            12px;

        border-radius:9px;

        font-size:11px;
    }

    #orderSuccessCopy i{
        font-size:11px;
    }

    .order-success-copy-message{
        margin-top:7px;

        font-size:10px;
    }


    /* ======================================================
       PAYMENT MESSAGE
    ====================================================== */

    .order-success-payment{
        width:100%;
        max-width:520px;

        flex-direction:row;
        align-items:flex-start;

        gap:12px;

        margin:
            0
            auto
            18px;

        padding:
            14px
            15px;

        border-radius:12px;
    }

    .order-success-payment i{
        margin-top:1px;

        font-size:22px;
    }

    .order-success-payment strong{
        margin-bottom:4px;

        font-size:12px;
    }

    .order-success-payment p{
        font-size:10px;
        line-height:1.6;
    }


    /* ======================================================
       TOTAL
    ====================================================== */

    .order-success-summary{
        width:100%;
        max-width:520px;

        margin:0 auto;

        padding:
            15px
            12px;

        border-top:1px solid #ece7ea;
    }

    .order-success-summary > div{
        flex-direction:row;
        align-items:center;
        justify-content:space-between;

        gap:12px;
    }

    .order-success-summary span{
        font-size:11px;
    }

    #orderSuccessTotal{
        font-size:21px;
    }


    /* ======================================================
       NEW ORDER
    ====================================================== */

    .order-success-actions{
        margin-top:20px;
    }

    .order-success-new-order{
        min-height:46px;

        padding:
            0
            18px;

        gap:8px;

        border-radius:10px;

        font-size:11px;
    }

}

/* ==========================================================
   ORDER SUCCESS - SMALL MOBILE
========================================================== */

@media(max-width:440px){

    .order-success{
        padding:
            26px
            12px;

        border-radius:16px;
    }

    .order-success-icon{
        width:54px;
        height:54px;

        margin-bottom:18px;
    }

    .order-success-icon i{
        font-size:20px;
    }

    .order-success h2{
        font-size:24px;
    }

    .order-success-description{
        margin-bottom:20px;

        font-size:11px;
    }


    /* Order number */

    .order-success-number-box{
        flex-direction:column;
        align-items:stretch;

        padding:12px;
    }

    #orderSuccessNumber{
        width:100%;

        font-size:15px;

        text-align:center;
    }

    #orderSuccessCopy{
        width:100%;

        justify-content:center;
    }


    /* Messenger */

    .order-success-payment{
        padding:13px;
    }

    .order-success-payment i{
        font-size:20px;
    }


    /* New order */

    .order-success-new-order{
        width:100%;
    }

}

/* ==========================
   MUG PERSONALISATION
========================== */

.mug-personalisation{
    width:100%;
}


.mug-design-mode{
    margin-bottom:18px;
}


.mug-section-header{
    margin-bottom:10px;
}


.mug-section-header h3{
    margin:0 0 4px;

    color:#202630;

    font-size:11px;
    font-weight:700;
}


.mug-section-header p{
    margin:0;

    color:#7b8492;

    font-size:9px;
    line-height:1.6;
}


.mug-design-mode-options{
    display:grid;

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

    gap:10px;
}


.mug-design-mode-button{
    width:100%;

    display:flex;

    align-items:center;

    gap:12px;

    padding:14px;

    border:
        1px
        solid
        #e1e5ea;

    border-radius:10px;

    background:#fff;

    color:#344054;

    text-align:left;

    cursor:pointer;

    transition:
        border-color .18s ease,
        box-shadow .18s ease,
        background .18s ease;
}


.mug-design-mode-button:hover{
    border-color:#cfd5dd;
}


.mug-design-mode-button.active{
	border-bottom: 1px solid;
    border-color:#f23867;

    background:#fff9fb;

    box-shadow:
        0 0 0 3px
        rgba(242,56,103,.07);
	padding: 14px;
}


.mug-design-mode-button > i{
    width:30px;
    height:30px;

    display:flex;

    align-items:center;
    justify-content:center;

    flex:0 0 auto;

    border-radius:8px;

    background:#f7f8fa;

    color:#f23867;

    font-size:12px;
}


.mug-design-mode-button span{
    min-width:0;

    display:flex;

    flex-direction:column;

    gap:3px;
}


.mug-design-mode-button strong{
    font-size:10px;
}


.mug-design-mode-button small{
    color:#7b8492;

    font-size:8px;
    line-height:1.5;
}


/* ==========================
   TEMPLATE BROWSER
========================== */

.mug-template-browser{
    margin-bottom:18px;

    padding:14px;

    border:
        1px
        solid
        #e5e8ec;

    border-radius:10px;

    background:#fff;
}


.mug-template-browser[hidden]{
    display:none;
}


/* ==========================
   WORKSPACE
========================== */

.mug-workspace{
    display:grid;

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

    gap:14px;

    align-items:start;
}


/* ==========================
   PHOTOS
========================== */

.mug-photos-panel,
.mug-editor-panel,
.mug-preview-panel{
    min-width:0;

    border:
        1px
        solid
        #e4e7ec;

    border-radius:12px;

    background:#fff;
}


.mug-photos-panel{
    padding:12px;
}


.mug-upload-input{
    position:absolute;

    width:1px;
    height:1px;

    opacity:0;

    pointer-events:none;
}


.mug-upload-area{
    min-height:72px;

    display:flex;

    flex-direction:column;

    align-items:center;
    justify-content:center;

    gap:7px;

    padding:12px;

    border:
        1px
        dashed
        #d2d7df;

    border-radius:9px;

    background:#fafbfc;

    color:#566171;

    cursor:pointer;

    transition:
        border-color .18s ease,
        background .18s ease;
}


.mug-upload-area:hover{
    border-color:#f23867;

    background:#fff8fa;
}


.mug-upload-area i{
    color:#f23867;

    font-size:14px;
}


.mug-upload-area strong{
    font-size:9px;
}


.mug-upload-help{
    display:block;

    margin-top:6px;

    color:#98a2b3;

    font-size:8px;

    text-align:center;
}


.mug-editor-message{
    margin-top:8px;

    padding:8px 9px;

    border-radius:7px;

    font-size:8px;
    line-height:1.5;
}


.mug-editor-message[data-type="error"]{
    border:
        1px
        solid
        #fecdca;

    background:#fef3f2;

    color:#b42318;
}


.mug-photo-list-header{
    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:8px;

    margin-top:14px;
    margin-bottom:8px;

    padding-top:10px;

    border-top:
        1px
        solid
        #eceff2;
}


.mug-photo-list-header strong{
    color:#344054;

    font-size:9px;
}


.mug-photo-list-header span{
    color:#8b95a5;

    font-size:8px;
}


.mug-photo-list{
    display:flex;

    flex-direction:column;

    gap:6px;
}


.mug-photo-item{
    display:grid;

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

    gap:7px;

    align-items:center;

    padding:5px;

    border:
        1px
        solid
        #e5e8ec;

    border-radius:8px;

    background:#fff;
}


.mug-photo-item.active{
    border-color:#f23867;

    background:#fff8fa;
}


.mug-photo-item-preview,
.mug-photo-item-info,
.mug-photo-item-remove{
    padding:0;

    border:0;

    background:none;

    font:inherit;

    cursor:pointer;
}


.mug-photo-item-preview{
    width:38px;
    height:38px;

    overflow:hidden;

    border-radius:6px;

    background:#f3f4f6;
}


.mug-photo-item-preview img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
}


.mug-photo-item-info{
    min-width:0;

    display:flex;

    flex-direction:column;

    gap:2px;

    text-align:left;
}


.mug-photo-item-info strong{
    overflow:hidden;

    color:#344054;

    font-size:8px;

    text-overflow:ellipsis;

    white-space:nowrap;
}


.mug-photo-item-info span{
    color:#98a2b3;

    font-size:7px;
}


.mug-photo-item-remove{
    width:26px;
    height:26px;

    display:flex;

    align-items:center;
    justify-content:center;

    border-radius:6px;

    color:#98a2b3;
}


.mug-photo-item-remove:hover{
    background:#fef3f2;

    color:#d92d20;
}


/* ==========================
   EDITOR
========================== */

.mug-editor-panel{
    padding:12px;
}


.mug-editor-header{
    display:flex;

    align-items:center;
    justify-content:space-between;

    gap:10px;

    margin-bottom:10px;
}


.mug-editor-header > div{
    display:flex;

    flex-direction:column;

    gap:2px;
}


.mug-editor-header strong{
    color:#344054;

    font-size:10px;
}


.mug-editor-header span{
    color:#98a2b3;

    font-size:8px;
}


.mug-canvas-wrapper{
    width:100%;

    padding:12px;

    border-radius:10px;

    background:#eef1f5;
}


.mug-canvas-stage{
    position:relative;

    width:100%;

    aspect-ratio:
        200 / 95;

    overflow:hidden;

    border:
        1px
        solid
        #d8dde5;

    background:#fff;

    box-shadow:
        0 10px 30px
        rgba(16,24,40,.08);
}

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

.mug-preview-protection{
    position:absolute;

    inset:-18%;

    z-index:5;

    display:grid;

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

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

    align-items:center;
    justify-items:center;

    gap:
        12px
        24px;

    transform:
        rotate(-16deg);

    pointer-events:none;

    user-select:none;

    overflow:hidden;
}


.mug-preview-protection span{
    display:flex;
    flex-direction:column;

    align-items:center;
    justify-content:center;

    gap:2px;

    opacity:.22;

    white-space:nowrap;
}


.mug-preview-protection strong{
    color:#172033;

    font-size:9px;
    font-weight:800;

    letter-spacing:.7px;

    text-shadow:
        0 1px 1px
        rgba(255,255,255,.85);
}


.mug-preview-protection small{
    color:#f23867;

    font-size:6px;
    font-weight:700;

    letter-spacing:.4px;

    text-shadow:
        0 1px 1px
        rgba(255,255,255,.85);
}

/*
 * Fabric ustawia rozmiary inline.
 * Tutaj skalujemy jedynie sposób
 * wyświetlania, nie logiczne 2362 × 1122.
 */

.mug-canvas-stage .canvas-container{
    width:100% !important;
    height:100% !important;
}


.mug-canvas-stage .lower-canvas,
.mug-canvas-stage .upper-canvas{
    width:100% !important;
    height:100% !important;
}


.mug-canvas-help{
    margin:
        8px
        2px
        0;

    color:#8993a1;

    font-size:8px;
    line-height:1.6;
}


/* ==========================
   3D PREVIEW PLACEHOLDER
========================== */

.mug-preview-panel{
    padding:12px;
}


.mug-preview-viewer{
    position:relative;

    width:100%;

    aspect-ratio:
        1 / 1;

    overflow:hidden;

    border-radius:10px;

    background:
        radial-gradient(
            circle at 50% 42%,
            #ffffff 0%,
            #eef1f5 45%,
            #d9e0e8 100%
        );
}


#mugPreviewCanvas{
    width:100%;
    height:100%;

    display:block;

    cursor:grab;

    touch-action:none;
}


#mugPreviewCanvas.dragging{
    cursor:grabbing;
}


.mug-preview-loading{
    position:absolute;

    inset:0;

    z-index:6;

    display:flex;

    flex-direction:column;

    align-items:center;
    justify-content:center;

    gap:8px;

    color:#7b8492;

    font-size:9px;

    pointer-events:none;
}


.mug-preview-loading[hidden]{
    display:none;
}


.mug-preview-loading i{
    color:#f23867;

    font-size:14px;
}


/* ==========================
   NAVIGATION
========================== */

.mug-navigation{
    margin-top:18px;

    justify-content:space-between;
    align-items:center;
}


.mug-navigation-right{
    display:flex;
    align-items:center;

    gap:8px;
}


/* ==========================
   RESPONSIVE
========================== */

@media(max-width:1050px){

    .mug-workspace{
        grid-template-columns:
            180px
            minmax(0, 1fr);
    }


    .mug-preview-panel{
        grid-column:
            1 / -1;
    }


    .mug-preview-viewer{
        max-width:420px;

        margin:auto;
    }

}


@media(max-width:700px){

    .mug-design-mode-options{
        grid-template-columns:
            1fr;
    }


    .mug-workspace{
        grid-template-columns:
            1fr;
    }


    .mug-photos-panel,
    .mug-editor-panel,
    .mug-preview-panel{
        grid-column:auto;
    }


    .mug-photo-list{
        display:grid;

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


	.mug-navigation{
		width:100%;

		display:grid;

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

		align-items:center;

		gap:8px;

		margin-top:14px;

		padding:
			16px
			0
			0;
	}


	.mug-navigation-right{
		min-width:0;

		display:grid;

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

		gap:8px;
	}


	.mug-navigation .order-button{
		width:100%;
		min-width:0;
		height:46px;

		gap:6px;

		padding:
			0
			9px;

		border-radius:10px;

		font-size:10px;

		white-space:nowrap;
	}


	.mug-navigation .mug-back-button{
		grid-column:1;
	}

}

/* ==========================
   MUG OBJECT TOOLBAR
========================== */

.mug-object-toolbar{
    display:flex;

    flex-wrap:wrap;

    gap:6px;

    margin-bottom:10px;
}


.mug-object-tool{
    min-height:32px;

    display:inline-flex;

    align-items:center;
    justify-content:center;

    gap:6px;

    padding:
        0
        10px;

    border:
        1px
        solid
        #e1e5ea;

    border-radius:7px;

    background:#fff;

    color:#586273;

    font-family:inherit;

    font-size:8px;
    font-weight:600;

    cursor:pointer;

    transition:
        border-color .18s ease,
        background .18s ease,
        color .18s ease,
        opacity .18s ease;
}


.mug-object-tool:hover:not(:disabled){
    border-color:#f23867;

    background:#fff8fa;

    color:#f23867;
}


.mug-object-tool i{
    font-size:9px;
}


.mug-object-tool:disabled{
    opacity:.42;

    cursor:not-allowed;
}


.mug-object-tool-danger:hover:not(:disabled){
    border-color:#fda29b;

    background:#fef3f2;

    color:#d92d20;
}

@media(max-width:700px){

    .mug-object-toolbar{
        display:grid;

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


    .mug-object-tool{
        width:100%;
    }

}

/* ==========================
   TEMPLATE PICKER
========================== */

.mug-template-picker{
    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:12px;
}


.mug-template-picker-current{
    min-width:0;

    display:flex;
    align-items:center;

    gap:10px;
}


.mug-template-picker-current[hidden]{
    display:none;
}


.mug-template-picker-preview{
    width:78px;

    aspect-ratio:200 / 95;

    flex:0 0 auto;

    overflow:hidden;

    border:1px solid #e5e8ec;
    border-radius:7px;

    background:#f5f6f8;
}


.mug-template-picker-preview img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
}


.mug-template-picker-info{
    min-width:0;

    display:flex;
    flex-direction:column;

    gap:2px;
}


.mug-template-picker-info > span{
    color:#98a2b3;

    font-size:7px;
    font-weight:600;
}


.mug-template-picker-info strong{
    overflow:hidden;

    color:#344054;

    font-size:10px;
    font-weight:700;

    text-overflow:ellipsis;
    white-space:nowrap;
}


.mug-template-picker-info small{
    color:#7b8492;

    font-size:8px;
}


.mug-template-picker-button{
    min-height:34px;

    flex:0 0 auto;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:7px;

    padding:
        0
        13px;

    border:1px solid #f23867;
    border-radius:7px;

    background:#f23867;

    color:#fff;

    font-size:8px;
    font-weight:700;

    cursor:pointer;

    transition:
        background .15s ease,
        border-color .15s ease;
}


.mug-template-picker-button:hover{
    border-color:#dc2d57;

    background:#dc2d57;
}


/* ==========================
   TEMPLATE MODAL
========================== */

body.mug-template-modal-open{
    overflow:hidden;
}


.mug-template-modal{
    position:fixed;

    inset:0;

    z-index:3000;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:18px;
}


.mug-template-modal[hidden]{
    display:none;
}


.mug-template-modal-backdrop{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    padding:0;

    border:0;

    background:rgba(16,24,40,.55);

    cursor:default;
}


.mug-template-modal-panel{
    position:relative;

    z-index:1;

    width:min(
        1100px,
        100%
    );

    max-height:
        calc(
            100vh
            -
            36px
        );

    display:flex;
    flex-direction:column;

    overflow:hidden;

    border:1px solid #e5e8ec;
    border-radius:14px;

    background:#fff;

    box-shadow:
        0 24px 70px
        rgba(16,24,40,.20);
}


.mug-template-modal-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    gap:20px;

    padding:18px 20px;

    border-bottom:1px solid #eceff3;
}


.mug-template-modal-header h3{
    margin:0;

    color:#344054;

    font-size:14px;
    font-weight:700;
}


.mug-template-modal-header p{
    margin:
        4px
        0
        0;

    color:#7b8492;

    font-size:8px;
    line-height:1.5;
}


.mug-template-modal-close{
    width:32px;
    height:32px;

    flex:0 0 auto;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0;

    border:1px solid #e5e8ec;
    border-radius:7px;

    background:#fff;

    color:#778499;

    cursor:pointer;
}


.mug-template-modal-close:hover{
    border-color:#f23867;

    color:#f23867;
}


.mug-template-modal-toolbar{
    padding:14px 20px;

    border-bottom:1px solid #eceff3;
}

/* ==========================
   TEMPLATE TAG FILTERS
========================== */

.mug-template-tag-filters{
    display:flex;
    flex-wrap:wrap;

    gap:7px;

    margin-top:10px;
}


.mug-template-tag-filters[hidden]{
    display:none;
}


.mug-template-filter-tag{
    min-height:28px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:
        0
        11px;

    border:1px solid #dfe4ea;
    border-radius:999px;

    background:#fff;

    color:#667085;

    font-size:8px;
    font-weight:600;

    cursor:pointer;

    transition:
        border-color .15s ease,
        background .15s ease,
        color .15s ease;
}


.mug-template-filter-tag:hover{
    border-color:#f5a2b6;

    color:#f23867;
}


.mug-template-filter-tag.active{
    border-color:#f23867;

    background:#fff0f4;

    color:#f23867;
}

.mug-template-search{
    width:100%;
    max-width:360px;

    min-height:36px;

    display:flex;
    align-items:center;

    gap:8px;

    padding:
        0
        11px;

    border:1px solid #dfe4ea;
    border-radius:8px;

    background:#fff;

    color:#98a2b3;
}


.mug-template-search:focus-within{
    border-color:#f23867;

    box-shadow:
        0 0 0 3px
        rgba(242,56,103,.08);
}


.mug-template-search input{
    width:100%;
    min-width:0;

    padding:0;

    border:0;
    outline:0;

    background:transparent;

    color:#344054;

    font:inherit;
    font-size:9px;
}


.mug-template-search input::placeholder{
    color:#98a2b3;
}


.mug-template-modal-content{
    min-height:0;

    overflow-y:auto;

    padding:18px 20px 20px;
}


/* ==========================
   TEMPLATE MODAL RESPONSIVE
========================== */

@media(max-width:700px){

    .mug-template-picker{
        align-items:stretch;
        flex-direction:column;
    }


    .mug-template-picker-button{
        width:100%;
    }


    .mug-template-modal{
        padding:8px;
    }


    .mug-template-modal-panel{
        max-height:
            calc(
                100vh
                -
                16px
            );

        border-radius:10px;
    }


    .mug-template-modal-header{
        padding:14px;
    }


    .mug-template-modal-toolbar{
        padding:12px 14px;
    }


    .mug-template-search{
        max-width:none;
    }


    .mug-template-modal-content{
        padding:14px;
    }

}

/* ==========================
   MUG TEMPLATE TILES
========================== */

.mug-template-list{
    display:grid;

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

    gap:12px;
}


/* ==========================
   TEMPLATE TILE
========================== */

.mug-template-card{
    min-width:0;

    display:flex;
    flex-direction:column;

    gap:8px;

    padding:9px;

    border:1px solid #e4e7ec;
    border-radius:10px;

    background:#fff;

    transition:
        border-color .15s ease,
        box-shadow .15s ease,
        transform .15s ease;
}


.mug-template-card:hover{
    border-color:#d4d9e1;

    transform:translateY(-1px);
}


.mug-template-card.active{
    border:1px solid #f23867;

    box-shadow:
        0 0 0 2px rgba(242,56,103,.08);
}


/* ==========================
   THUMBNAIL
========================== */

.mug-template-thumb{
    width:100%;

    aspect-ratio:200 / 95;

    overflow:hidden;

    border:1px solid #eceff3;
    border-radius:7px;

    background:#f5f6f8;
}


.mug-template-thumb img{
    width:100%;
    height:100%;

    display:block;

    object-fit:cover;
}


/* ==========================
   TEMPLATE INFO
========================== */

.mug-template-info{
    min-width:0;

    display:flex;
    flex-direction:column;

    gap:3px;
}


.mug-template-info strong{
    overflow:hidden;

    color:#344054;

    font-size:9px;
    font-weight:700;

    text-overflow:ellipsis;
    white-space:nowrap;
}


.mug-template-info p{
    min-height:24px;

    margin:0;

    display:-webkit-box;

    overflow:hidden;

    color:#7b8492;

    font-size:7px;
    line-height:1.5;

    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
}


.mug-template-meta{
    color:#98a2b3;

    font-size:7px;
}


/*
 * Ukrywamy osobny napis "Warianty".
 * Poniżej zostają same przyciski wariantów.
 */

.mug-template-card > .mug-template-meta{
    display:none;
}


/* ==========================
   VARIANTS
========================== */

.mug-template-variants{
    display:flex;
    flex-wrap:wrap;

    gap:5px;

    min-height:24px;
}


.mug-template-variants:empty{
    min-height:0;
}


.mug-template-variant{
    min-height:22px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:
        0
        8px;

    border:1px solid #e1e5ea;
    border-radius:999px;

    background:#fff;

    color:#586273;

    font-size:7px;
    font-weight:600;

    cursor:pointer;

    transition:
        border-color .15s ease,
        background .15s ease,
        color .15s ease;
}


.mug-template-variant:hover{
    border-color:#f5a2b6;

    color:#f23867;
}


.mug-template-variant.active{
    border-color:#f23867;

    background:#fff8fa;

    color:#f23867;
}


/* ==========================
   SELECT BUTTON
========================== */

.mug-template-action{
    width:100%;
    min-height:30px;

    margin-top:auto;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:
        0
        10px;

    border:1px solid #f23867;
    border-radius:7px;

    background:#f23867;

    color:#fff;

    font-size:7px;
    font-weight:700;

    cursor:pointer;

    transition:
        background .15s ease,
        border-color .15s ease,
        color .15s ease;
}


.mug-template-action:hover{
    background:#dc2d57;

    border-color:#dc2d57;
}


.mug-template-action.is-selected{
    background:#fff8fa;

    color:#f23867;
}


.mug-template-action.is-selected:hover{
    background:#fff1f5;
}


/* ==========================
   EMPTY / LOADING
========================== */

.mug-template-list-state{
    grid-column:1 / -1;

    padding:16px;

    border:1px dashed #d6dbe3;
    border-radius:10px;

    background:#fafbfc;

    color:#7b8492;

    font-size:9px;
    text-align:center;
}


/* ==========================
   RESPONSIVE
========================== */

@media(max-width:1200px){

    .mug-template-list{
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

}


@media(max-width:900px){

    .mug-template-list{
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media(max-width:520px){

    .mug-template-list{
        grid-template-columns:
            1fr;
    }

}