/* ===================================================================
   Step 6 — Saved-design preview
   Shows after the user closes the editor modal: front + back canvas
   snapshots side-by-side with an "Edit Design" button that re-opens
   the modal. Markup lives in customize.html.twig.
   =================================================================== */
.ed-saved-preview{
    border: 1px solid #e4e4e4;
    border-radius: 8px;
    padding: 28px 20px 24px;
    margin: 16px 0 18px;
    background: #fff;
}
.ed-saved-preview-grid{
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    /* flex-wrap: wrap; */
    gap: 24px;
    width: 100%;
    margin-bottom: 18px;
}
.ed-saved-preview-side{
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
}
/* Stacked container: the product mockup IMG sets the box dimensions, and
   the canvas-snapshot IMG is positioned absolutely on top so the design
   appears on the can-cooler exactly as the user laid it out. */
.ed-preview-stack{
    position: relative;
    display: inline-block;
    line-height: 0;
    max-width: 100%;
    max-height: 280px;
}
.ed-preview-bg{
    display: block;
    max-width: 100%;
    max-height: 280px;
    width: 100%;
    height: auto;
}
.ed-preview-design{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}
.ed-preview-design[src=""],
.ed-preview-bg[src=""]{
    display: none;
}
/* Lanyard saved preview: lock the stack to the strap band aspect so the strap
   (bg) and the design overlay always occupy the exact same box. The bg strap
   is cover-fit (matches the studio canvas crop) and the design fills the band —
   so swapping the strap colour recolours cleanly with no mismatched edges. */
#ds-saved-preview .ed-preview-stack{
    display: block;
    width: 100%;
    max-width: 800px;
    aspect-ratio: 800 / 120;
    max-height: none;
    margin: 0 auto;
}
#ds-saved-preview .ed-preview-bg{
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}
#ds-saved-preview .ed-preview-design{
    object-fit: fill;
}
.ed-saved-preview-label{
    margin: 12px 0 0;
    color: #2c5282;
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
}
.ed-edit-design-btn{
    background: #2b5b8b;
    color: #fff;
    border: 0;
    padding: 12px 32px;
    border-radius: 4px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s;
    display: block;
    width: 100%;
}
.ed-edit-design-btn:hover{
    background: #244c75;
}
@media (max-width: 575px){
    .ed-saved-preview-grid{ gap: 12px; }
    .ed-saved-preview-side img{ max-height: 200px; }
}

/* ===================================================================
   Step 6 launch card (in customize.html.twig — opens the editor modal)
   =================================================================== */
.ed-launch-card{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    border: 1px solid #e4e4e4;
    border-radius: 10px;
    background: linear-gradient(135deg, #f4faff 0%, #ffffff 60%);
    margin: 12px 0 18px;
    flex-wrap: wrap;
}
.ed-launch-text strong{
    display: block;
    font-size: 16px;
    color: #091D4F;
    margin-bottom: 4px;
}
.ed-launch-text p{
    font-size: 13px;
    color: #555;
}
.ed-launch-btn{
    background: #2dc7ff;
    color: #000;
    border: 0;
    padding: 12px 28px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(45,199,255,.25);
    transition: all .15s;
}
.ed-launch-btn:hover{
    background: #009DFE;
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,157,254,.35);
    transform: translateY(-1px);
}

#ds-email-modal .default-btn{
    padding: 7px 25px;
    font-size: 14px;
}
#ds-email-modal .default-btn.btn-light{
    background: #ccc;
}
/* ===================================================================
   Email-Design popup (#ds-email-modal)
   Opens over the editor modal when the Email button is clicked. Layered
   above the fullscreen editor via z-index so the form sits on top. The
   preview row shows the front + back canvas snapshots that get attached.
   =================================================================== */
#ds-email-modal{ z-index: 2080; }
/* The backdrop Bootstrap injects for nested modals — bump it above the
   editor modal's content so the email form's dim layer covers the editor. */
.modal-backdrop.show + .modal-backdrop.show{ z-index: 2070; }
#ds-email-modal .modal-title{ font-size: 16px; font-weight: 700; }
#ds-email-modal .modal-body{ padding: 20px 24px; }
#ds-email-modal .form-label{ font-size: 13px; font-weight: 600; }
.ed-email-previews{
    display: flex;
    gap: 14px;
    justify-content: center;
    margin: 0 0 18px;
    flex-wrap: wrap;
}
.ed-email-preview-side{
    flex: 0 1 140px;
    /* Flex column so the .ed-preview-stack (inline-block by default) sits
       on its own row with the "Front" / "Back" label below it. Without
       this, text-align: center alone lets the label wrap inline next to
       the stack when there's horizontal room. */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    border: 1px solid #e4e4e4;
    border-radius: 8px;
    padding: 8px;
    background: #fafafa;
}
/* The email popup stacks two imgs per side: the product-mockup .ed-preview-bg
   (sizes the box) and the canvas-overlay .ed-preview-design (absolutely
   positioned on top — see .ed-preview-design above). Only the bg img gets
   block/sized styles here; targeting `img` generically would clobber the
   design overlay's absolute positioning and the design would no longer sit
   on the can-cooler mockup. */
.ed-email-preview-side .ed-preview-stack{
    max-width: 100%;
    max-height: 140px;
    margin: 0 auto 6px;
}
.ed-email-preview-side .ed-preview-bg{
    max-height: 140px;
    margin: 0 auto;
}
.ed-email-preview-side .ed-preview-bg[src=""],
.ed-email-preview-side .ed-preview-bg:not([src]){ display: none; }
.ed-email-preview-side span{
    font-size: 12px;
    color: #555;
    font-weight: 500;
}
.ed-email-status{
    margin-top: 4px;
    font-size: 13px;
    padding: 6px 0;
}

/* ===================================================================
   Cancooler Editor Modal — full-screen design surface
   =================================================================== */

/* ---- Modal shell ---- */

.modal{
    height: 100%;
}
.fullscreen-modal{
    /* width: 100%;
    height: 100vh; */
    height: 100%;
    max-width: none;
    display: block;
    margin: 0;
}
.fullscreen-modal .modal-content{
    /* width: 100vw;
    height: 100vh; */
    height: 100%;
    border: 0;
    border-radius: 0;
    background: #fff;
}
.fullscreen-modal .modal-header{
    padding: 12px 24px;
    border-bottom: 1px solid #e4e4e4;
    align-items: center;
}
.fullscreen-modal .modal-logo img{ max-height: 48px; }
.fullscreen-modal .modal-body{
    padding: 0;
    height: calc(100vh - 73px);
    overflow: hidden;
}

/* ---- Header buttons ---- */
.gray-circle-box{
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: #f1f1f1;
    border: 0;
    font-size: 11px;
    color: #000;
    text-align: center;
    padding: 6px;
    font-weight: 600;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1.1;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.gray-circle-box:hover{ background: #e0e0e0; color: #009DFE; }
.gray-circle-box svg{
    width: 18px;
    height: 18px;
    margin-bottom: 2px;
}
/* Finish button — same .gray-circle-box layout but the primary
   gradient + white foreground so it reads as the main "I'm done
   designing" action in the editor header. Targeted by #id so the
   Email button next to it keeps the neutral gray. Label and icon
   stay unchanged. */
#ds-finish,
#ds-finish span{
    color: #fff;
}
#ds-finish{
    background: #091D4F;
    box-shadow: 0 2px 8px rgba(9, 29, 79, .35);
}
#ds-finish svg{ stroke: #fff; color: #fff; }
#ds-finish:hover,
#ds-finish:hover span{
    color: #fff;
}
#ds-finish:hover{
    background: #091D4F;
    box-shadow: 0 4px 14px rgba(9, 29, 79, .45);
}
#ds-finish:hover svg{ stroke: #fff; color: #fff; }
.fullscreen-modal .btn-close{
    width: 32px;
    height: 32px;
    margin-left: 8px;
    opacity: .7;
}
.fullscreen-modal .btn-close:hover{ opacity: 1; }

/* ---- Layout: rail + content panel + canvas ---- */
.ed-layout{
    display: flex;
    height: 100%;
    overflow: hidden;
}
.ed-side{
    display: flex;
    flex: 0 0 480px;
    max-width: 480px;
    border-right: 1px solid #e4e4e4;
    height: 100%;
    overflow: hidden;
}
.ed-rail{
    flex: 0 0 92px;
    background: #fff;
    border-right: 1px solid #e4e4e4;
    padding: 8px 0;
    gap: 4px;
    overflow-y: auto;
}
.ed-rail::-webkit-scrollbar{ width: 0; }
.ed-rail .nav-link{
    width: 84px;
    height: 80px;
    margin: 4px auto;
    border-radius: 8px;
    background: transparent;
    color: #091D4F;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 0;
    padding: 6px;
    transition: background .15s, color .15s;
}
.ed-rail .nav-link svg{ width: 26px; height: 26px; }
.ed-rail .nav-link:hover{ background: #f4faff; color: #009DFE; }
.ed-rail .nav-link.active{ background: #2dc7ff; color: #000; }

.ed-panel{
    flex: 1;
    height: 100%;
    overflow-y: auto;
    padding: 16px;
}
.ed-panel::-webkit-scrollbar{ width: 8px; }
.ed-panel::-webkit-scrollbar-thumb{ background: #d8d3d3; border-radius: 4px; }
.ed-panel::-webkit-scrollbar-thumb:hover{ background: #b0b0b0; }

/* ---- Tab titles ---- */
.design-partial-title{
    margin: 0 0 14px;
    font-size: 18px;
    line-height: 1;
    background: #091D4F;
    color: #fff;
    padding: 10px 12px;
    border-radius: 4px;
}
.selected-color{
    background: #fff;
    font-size: 14px;
    margin: 0 0 10px;
    color: #444;
}
.selected-color strong{ font-weight: 800; color: #091D4F; }

/* ---- Generic card grid (colors / templates / art / uploads) ---- */
.fullscreen-modal .custom-tab-body{
    display: flex;
    flex-wrap: wrap;
    max-height: unset;
    margin: 0 -6px;
    align-content: flex-start;
}
.fullscreen-modal .card-p-style{
    border: 1px solid #d8d3d3;
    width: calc(33.333% - 12px);
    margin: 6px;
    padding: 8px;
    min-height: unset;
    border-radius: 8px;
    cursor: pointer;
    transition: all .15s;
    position: relative;
    background: #fff;
}

.fullscreen-modal .card-p-style.js-ed-tmpl-cat,
.fullscreen-modal .card-p-style.js-ed-tmpl-item,
.fullscreen-modal .card-p-style.js-ed-art-item,
.fullscreen-modal .card-p-style.js-ed-art-cat{
    width: calc(50% - 20px);
}

.fullscreen-modal .card-p-style.js-ed-tmpl-cat .custom-color-picker,
.fullscreen-modal .card-p-style.js-ed-tmpl-item .custom-color-picker,
.fullscreen-modal .card-p-style.js-ed-art-item .custom-color-picker,
.fullscreen-modal .card-p-style.js-ed-art-cat .custom-color-picker{
    height: 130px;
}
.fullscreen-modal .browse_topsrch .goBackCat>a>span{
    color: #fff;
}
.fullscreen-modal .browse_tempitem.card-p-style{ width: calc(50% - 12px); }
.fullscreen-modal .card-p-style:hover{
    border-color: #009DFE;
    background: transparent;
    /* box-shadow: 0 2px 8px rgba(0,157,254,.1); */
}
.fullscreen-modal .card-p-style:hover .product-name{ color: #009DFE; }
.fullscreen-modal .card-p-style.active{
    border-color: #009DFE;
    /* box-shadow: 0 0 0 2px #009DFE40; */
}
.fullscreen-modal .custom-color-picker{
    background: #ccc;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fullscreen-modal .custom-color-picker img{ max-width: 100%; max-height: 100%; }
.fullscreen-modal .product-name{
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.2;
    word-break: break-word;
}
.fullscreen-modal .check-icon{
    display: none;
    position: absolute;
    top: 6px;
    right: 6px;
    width: 18px;
    height: 18px;
    background: #091D4F;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff;
}
.fullscreen-modal .check-icon::after{
    content: '';
    position: absolute;
    left: 8px;
    top: 5px;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.fullscreen-modal .card-p-style.active .check-icon{ display: block; }
.fullscreen-modal .browse_topsrch{ margin-bottom: 10px; }
.fullscreen-modal .browse_topsrch .catagory_srch_fill{ margin: 8px 0; }
.fullscreen-modal .browse_topsrch label{ font-weight: 600; font-size: 13px; }
.fullscreen-modal .browse_topsrch input.form-control{
    border: 1px solid #d8d3d3;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 14px;
}
.fullscreen-modal .browse_topsrch input.form-control:focus{
    outline: none;
    border-color: #009DFE;
    box-shadow: 0 0 0 2px #009DFE20;
}
.fullscreen-modal .goBackCat a{ color: #009DFE; text-decoration: none; }

.ed-empty{
    padding: 24px 12px;
    text-align: center;
    color: #999;
    font-size: 13px;
    width: 100%;
}

/* ---- Templates: dedicated grid with scroll ---- */
#ds-tmpl-grid{
    max-height: calc(100vh - 280px);
    overflow-y: auto;
}
.ed-tmpl-meta{ display: none; }

/* ---- Text tab ---- */
.ed-field{ margin-bottom: 12px; }
.ed-field-label{
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #091D4F;
}
.input-textarea{
    width: 100%;
    border: 1px solid #d8d3d3;
    border-radius: 6px;
    padding: 10px;
    min-height: 80px;
    font-size: 14px;
    resize: vertical;
}
.input-textarea:focus{
    outline: none;
    border-color: #009DFE;
    box-shadow: 0 0 0 2px #009DFE20;
}
.fullscreen-modal .default-btn{
    background: #2dc7ff;
    color: #000;
    border: 0;
    padding: 8px 18px;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
}
.fullscreen-modal .default-btn:hover{ background: #009DFE; color: #fff; }

.ed-row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
    gap: 12px;
    flex-wrap: wrap;
}
.ed-row.ed-row-top{ align-items: flex-start; }
.ed-row-label{
    font-size: 14px;
    color: #091D4F;
    font-weight: 500;
    flex: 1 1 130px;
    min-width: 130px;
}
.ed-select,
.ed-num{
    border: 1px solid #d8d3d3;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 14px;
    height: 36px;
    background: #fff;
}
.ed-select{ flex: 0 0 200px; }
.ed-num{ flex: 0 0 90px; text-align: right; }
.ed-select:focus,
.ed-num:focus,
.form-control:focus{
    outline: none;
    border-color: #009DFE;
    box-shadow: 0 0 0 2px #009DFE20;
}

/* ---- Color triggers (legacy WPmsColor pattern) ----
   .js-dfs-fill-color / .js-dfs-outline-color are clickable squares; the
   inner .imprint-value div carries the swatch background. Clicking opens
   the global PMS color modal (.sd-clr-menu .js-pms-color-modal). */
.ed-color-trigger{
    width: 38px;
    height: 38px;
    border: 1px solid #d8d3d3;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    padding: 3px;
    flex: 0 0 38px;
    transition: border-color .12s, box-shadow .12s;
}
.ed-color-trigger:hover{
    border-color: #009DFE;
    box-shadow: 0 0 0 2px #009DFE20;
}
.ed-color-trigger .imprint-value{
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background-color: #000;
}
.ed-color-trigger.ed-no-color .imprint-value{
    background-color: #fff !important;
    /* No colour picked yet → show a colour-wheel icon (invites a colour choice)
       instead of the old red X. */
    background-image: url('../../images/designstudio/color-wheel.png') !important;
    background-size: 78% !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* ---- Font picker (Select2) ---- */
.ed-font-wrap{
    flex: 1 1 220px;
    min-width: 180px;
}
.ed-font-wrap .select2-container{
    width: 100% !important;
}
.ed-font-wrap .select2-selection--single{
    height: 38px;
    border-color: #d8d3d3;
    border-radius: 6px;
    padding: 4px 6px;
}
.ed-font-wrap .select2-selection__rendered{
    line-height: 28px !important;
    padding-left: 6px;
}
.ed-font-wrap .select2-selection__arrow{
    height: 36px !important;
}
.ed-font-wrap .select2-selection--single:focus,
.ed-font-wrap .select2-container--focus .select2-selection--single{
    border-color: #009DFE;
    box-shadow: 0 0 0 2px #009DFE20;
    outline: none;
}
/* Select2 dropdown lives at body level by default, but we set
   dropdownParent: #ds-modal so it renders inside the modal's stacking
   context. Make sure it's above the modal-body content. */
.fullscreen-modal .select2-dropdown{
    z-index: 1080;
    border-color: #009DFE;
    border-radius: 6px;
}
.fullscreen-modal .select2-results__option{
    padding: 8px 12px;
    font-size: 14px;
}
.fullscreen-modal .select2-results__option--highlighted[aria-selected]{
    background: #009DFE !important;
    color: #fff !important;
}

/* PMS color modal — legacy WPmsColor's .sd-clr-menu sits at body level via
   $('body').append. Bump it above the editor modal so it's clickable when
   triggered from inside the modal. */
.sd-clr-menu.js-pms-color-modal.active{
    z-index: 1090;
}

/* Toggle switch */
.ed-switch{
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
    flex: 0 0 46px;
}
.ed-switch input{ opacity: 0; width: 0; height: 0; }
.ed-switch-slider{
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #ccc;
    border-radius: 24px;
    transition: background .2s;
}
.ed-switch-slider:before{
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    bottom: 3px;
    background: white;
    border-radius: 50%;
    transition: transform .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.ed-switch input:checked + .ed-switch-slider{ background: #2dc7ff; }
.ed-switch input:checked + .ed-switch-slider:before{ transform: translateX(22px); }

/* Icon button groups */
.ed-btn-group{
    display: inline-flex;
    gap: 4px;
    flex-wrap: wrap;
}
.ed-icon-btn{
    width: 36px;
    height: 36px;
    border: 1px solid #d8d3d3;
    background: #fff;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #333;
    font-size: 14px;
    font-weight: 700;
    padding: 0;
    transition: all .12s;
}
.ed-icon-btn svg{ width: 18px; height: 18px; }
.ed-icon-btn:hover{ background: #f4faff; border-color: #009DFE; color: #009DFE; }
.ed-icon-btn.active{ background: #009DFE; border-color: #009DFE; color: #fff; }
.ed-icon-btn-danger:hover{ background: #fff5f5; border-color: #d33; color: #d33; }
.ed-icon-btn-sm{ width: 28px; height: 28px; }
.ed-icon-btn-sm svg{ width: 14px; height: 14px; }
.ed-overline{ text-decoration: overline; }

/* Layer alignment grid (10 buttons in two rows of 5) */
.ed-align-grid{
    display: grid;
    grid-template-columns: repeat(5, 36px);
    gap: 4px;
}

/* ---- Layers tab list ---- */
.ed-layers-list{
    list-style: none;
    padding: 0;
    margin: 0;
}
.ed-layer-row{
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px;
    border: 1px solid #e4e4e4;
    border-radius: 6px;
    margin-bottom: 6px;
    cursor: pointer;
    background: #fff;
    transition: all .15s;
}
.ed-layer-row:hover{ background: #f4faff; border-color: #009DFE; }
.ed-layer-row.active{ background: #f4faff; border-color: #009DFE; box-shadow: 0 0 0 2px #009DFE20; }
.ed-layer-row.sortable-ghost{ opacity: .4; }
.ed-layer-row.sortable-chosen{ background: #e6f4ff; }
.ed-layer-handle{
    width: 16px;
    height: 24px;
    color: #aaa;
    cursor: grab;
    flex: 0 0 16px;
}
.ed-layer-handle:active{ cursor: grabbing; }
.ed-layer-handle svg{ width: 16px; height: 24px; }
.ed-layer-thumb{
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
    overflow: hidden;
}
.ed-layer-thumb img{ max-width: 100%; max-height: 100%; }
.ed-layer-thumb-text{
    font-weight: 700;
    color: #091D4F;
    font-size: 16px;
}
.ed-layer-name{
    flex: 1;
    font-size: 13px;
    color: #091D4F;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.ed-layer-action{
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    color: #666;
    cursor: pointer;
    flex: 0 0 26px;
}
.ed-layer-action:hover{ background: #e8f4ff; color: #009DFE; }
.ed-layer-action svg{ width: 15px; height: 15px; }

/* ---- Art tab ---- */
.ed-art-toolbar{
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    padding: 6px 8px;
    background: #f4faff;
    border-radius: 6px;
}
.ed-art-back{
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fff;
    border: 1px solid #009DFE;
    color: #009DFE;
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.ed-art-back:hover{ background: #009DFE; color: #fff; }
.ed-art-back svg{ width: 14px; height: 14px; }
.ed-art-active-cat{
    font-size: 13px;
    color: #091D4F;
    font-weight: 600;
}
/* Let the panel handle scrolling — no nested overflow on the grids.
   IntersectionObserver in the JS triggers infinite-scroll regardless. */
.ed-art-cats-grid,
.ed-art-items-grid{
    margin: 0 -6px;
    overflow: visible;
    max-height: none;
}

/* ---- Upload tab dropzone ---- */
.ed-upload-box{
    border: 2px dashed #d8d3d3;
    border-radius: 8px;
    padding: 32px 12px;
    text-align: center;
    cursor: pointer;
    transition: all .15s;
    color: #555;
}
.ed-upload-box:hover,
.ed-upload-box.dragging{
    border-color: #009DFE;
    background: #f4faff;
    color: #009DFE;
}
.ed-upload-box.uploading{ opacity: .6; pointer-events: none; }
.ed-upload-inner svg{ color: #009DFE; }
.ed-upload-progress{
    height: 4px;
    background: #e4e4e4;
    border-radius: 2px;
    overflow: hidden;
    margin-top: 8px;
}
.ed-upload-progress .ed-upload-bar{
    height: 100%;
    background: linear-gradient(90deg, #2dc7ff, #009DFE);
    width: 0;
    animation: ed-progress 1.4s linear infinite;
}
@keyframes ed-progress{
    0%   { width: 0;   margin-left: 0; }
    50%  { width: 80%; margin-left: 10%; }
    100% { width: 0;   margin-left: 100%; }
}

/* ===================================================================
   Right column — Canvas area (portrait can-cooler)
   =================================================================== */
.ed-canvas-area{
    flex: 1;
    position: relative;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 24px;
    overflow: hidden;
}
.ed-side-toggle{ margin-bottom: 12px; }
.ed-view-pill{
    display: inline-block;
    background: #4d4d4d;
    color: #fff;
    border: 0;
    border-radius: 4px;
    padding: 6px 26px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
}

.ed-canvas-stage{
    flex: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* overflow: auto; */
    padding: 8px 0;
}
.ed-canvas-wrap{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: min(440px, 90%);
    max-height: calc(100vh - 200px);
    transition: transform .25s ease;
    transform-origin: center center;
}
/* NOTE: no default popup-img cap here on purpose — desktop is left
   untouched so the higher-res popup mockup (550/600) renders at its
   natural size, matching pre-mobile-fix behavior. Per-breakpoint pixel
   caps live in the @media blocks below (≤991, ≤768, ≤767) so only
   tablet / mobile constrain the img. */
.ed-canvas-wrap #designContainer{
    position: relative;
    display: inline-block;
    line-height: 0;
    max-width: 100%;
    max-height: 100%;
}
.ed-canvas-wrap #designArea{
    position: relative;
    display: inline-block;
    line-height: 0;
}
.ed-canvas-wrap canvas#designCanvas{
    display: block;
    max-width: 100%;
    height: auto;
}
.ed-canvas-wrap .canvas-container{
    margin: 0 auto;
}

/* ---- Canvas right-side floating tools ---- */
.ed-canvas-tools{
    position: absolute;
    top: 24px;
    right: 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #fff;
    border: 1px solid #e4e4e4;
    border-radius: 8px;
    padding: 6px;
    min-width: 84px;
    z-index: 10;
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
.ed-canvas-tools.collapsed .ed-tool-btn:not(.ed-tool-toggle){ display: none; }
.ed-tool-btn{
    background: transparent;
    border: 0;
    padding: 8px 4px;
    font-size: 11px;
    font-weight: 600;
    color: #444;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    text-align: center;
    transition: all .12s;
}
.ed-tool-btn:hover{ background: #f4faff; color: #009DFE; }
.ed-tool-btn svg{ width: 22px; height: 22px; }
.ed-tool-toggle{
    align-self: flex-end;
    padding: 4px;
    width: 28px;
    height: 28px;
    border-radius: 4px;
    border: 1px solid #e4e4e4;
    margin-bottom: 4px;
}

/* ---- Bootstrap modal anim override (smoother) ---- */
.modal.fade.show .fullscreen-modal{
    transform: none;
}

/* ---- Responsive ---- */
@media (max-width: 991px){
    .ed-side{ flex: 0 0 380px; max-width: 380px; }
    .ed-rail{ flex: 0 0 76px; }
    .ed-rail .nav-link{ width: 68px; height: 68px; font-size: 10px; }
    .ed-rail .nav-link svg{ width: 22px; height: 22px; }
    .ed-canvas-wrap{ width: 90%; }
    /* .ed-canvas-wrap img#frontDesign,
    .ed-canvas-wrap img#backDesign{ max-width: 360px; max-height: 360px; } */
    .ed-canvas-tools{ top: 8px; right: 8px; }
    .ed-row-label{ flex: 1 1 100%; min-width: 0; }
    .ed-select{ flex: 1 1 auto; }
}
@media (max-width: 767px){
    .ed-layout{ flex-direction: column; }
    .ed-side{ flex: 0 0 auto; max-width: 100%; max-height: 50vh; }
    .ed-canvas-area{ flex: 1; padding: 12px; }
    .ed-canvas-tools{
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        margin-top: 12px;
        width: 100%;
    }
    .ed-canvas-tools.collapsed{ display: none; }
    .ed-canvas-wrap{ width: min(280px, 70%); }
    /* .ed-canvas-wrap img#frontDesign,
    .ed-canvas-wrap img#backDesign{ max-width: 260px; max-height: 260px; } */
    .gray-circle-box{ width: 48px; height: 48px; font-size: 10px; }
    .fullscreen-modal .modal-logo img{ max-height: 36px; }
}

/* ===================================================================
   ▼ Design refresh ▼
   Modern, calmer look-and-feel for the editor modal. All overrides
   live in this block so the original rules above are untouched and
   easy to revert.
   =================================================================== */

:root{
    --ed-primary:        #4a8df0;
    --ed-primary-dark:   #2c6ad8;
    --ed-primary-soft:   #eaf2ff;
    --ed-accent:         #1ec1d4;
    --ed-success:        #2ecc8e;
    --ed-danger:         #e85b6c;
    --ed-ink:            #0e1f47;
    --ed-ink-muted:      #5a6a86;
    --ed-line:           #e6ebf3;
    --ed-line-soft:      #f1f4f9;
    --ed-bg:             #f7f8fb;
    --ed-bg-canvas:      #f1f3f8;
    --ed-shadow-sm:      0 1px 3px rgba(14, 31, 71, .06), 0 1px 2px rgba(14, 31, 71, .04);
    --ed-shadow-md:      0 4px 14px rgba(14, 31, 71, .08), 0 2px 4px rgba(14, 31, 71, .04);
    --ed-shadow-lg:      0 10px 30px rgba(14, 31, 71, .10), 0 4px 8px rgba(14, 31, 71, .04);
    --ed-radius-sm:      6px;
    --ed-radius:         10px;
    --ed-radius-lg:      14px;
    --ed-ease:           cubic-bezier(.22, .61, .36, 1);
}

/* ---- Modal shell ---- */
.fullscreen-modal .modal-content{
    background: var(--ed-bg);
}
.fullscreen-modal .modal-header{
    padding: 14px 28px;
    border-bottom: 1px solid var(--ed-line);
    background: #fff;
    box-shadow: var(--ed-shadow-sm);
    z-index: 5;
}
.fullscreen-modal .modal-logo img{
    max-height: 44px;
    transition: transform .25s var(--ed-ease);
}
.fullscreen-modal .modal-logo:hover img{ transform: scale(1.03); }

.gray-circle-box{
    width: 60px; height: 60px;
    border-radius: var(--ed-radius);
    background: #fff;
    border: 1px solid var(--ed-line);
    color: var(--ed-ink);
    box-shadow: var(--ed-shadow-sm);
    transition: all .2s var(--ed-ease);
}
.gray-circle-box:hover{
    background: var(--ed-primary-soft);
    border-color: var(--ed-primary);
    color: var(--ed-primary-dark);
    transform: translateY(-1px);
    box-shadow: var(--ed-shadow-md);
}
.gray-circle-box svg{ width: 20px; height: 20px; }
.fullscreen-modal .btn-close{
    background-color: var(--ed-line-soft);
    border-radius: 50%;
    padding: 8px;
    opacity: .9;
    transition: all .2s var(--ed-ease);
}
.fullscreen-modal .btn-close:hover{
    background-color: var(--ed-accent);
    opacity: 1;
    transform: rotate(90deg);
}

/* ---- Left rail ---- */
.ed-side{
    flex: 0 0 500px;
    max-width: 500px;
    background: #fff;
    border-right: 1px solid var(--ed-line);
    box-shadow: 1px 0 0 var(--ed-line);
}
.ed-rail{
    flex: 0 0 100px;
    padding: 12px 6px;
    background: linear-gradient(180deg, #fff 0%, #fafbfd 100%);
    border-right: 1px solid var(--ed-line);
    gap: 6px;
}
.ed-rail .nav-link{
    width: 84px; height: 78px;
    border-radius: var(--ed-radius);
    color: var(--ed-ink-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .2px;
    transition: all .25s var(--ed-ease);
    position: relative;
}
.ed-rail .nav-link svg{
    width: 24px; height: 24px;
    transition: transform .25s var(--ed-ease);
}
.ed-rail .nav-link:hover{
    background: var(--ed-primary-soft);
    color: var(--ed-primary-dark);
}
.ed-rail .nav-link:hover svg{ transform: translateY(-2px); }
.ed-rail .nav-link.active{
    background: linear-gradient(135deg, var(--ed-primary) 0%, var(--ed-primary-dark) 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(74, 141, 240, .35);
}
.fullscreen-modal .ed-rail .nav-link.active span{
    color: #fff;
}
.ed-rail .nav-link.active::before{
    content: '';
    position: absolute;
    right: -7px; top: 50%;
    transform: translateY(-50%);
    width: 4px; height: 26px;
    background: var(--ed-primary);
    border-radius: 2px 0 0 2px;
}

/* ---- Tab content panel ---- */
.ed-panel{ padding: 22px 24px; background: #fff; }
.ed-panel::-webkit-scrollbar{ width: 6px; }
.ed-panel::-webkit-scrollbar-thumb{ background: #d6dde8; border-radius: 3px; }
.ed-panel::-webkit-scrollbar-thumb:hover{ background: var(--ed-primary); }

/* ---- Tab titles ---- */
.design-partial-title{
    margin: 0 0 18px;
    padding: 14px 18px;
    background: linear-gradient(135deg, var(--ed-ink) 0%, #1a2f5a 100%);
    color: #fff;
    border-radius: var(--ed-radius);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .3px;
    box-shadow: var(--ed-shadow-sm);
    position: relative;
    overflow: hidden;
}
/* .design-partial-title::before{
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 4px;
    background: var(--ed-accent);
} */

/* ---- Card grids ---- */
.fullscreen-modal .card-p-style{
    border: 1px solid var(--ed-line);
    border-radius: var(--ed-radius);
    box-shadow: var(--ed-shadow-sm);
    transition: all .22s var(--ed-ease);
    background: #fff;
}
.fullscreen-modal .card-p-style:hover{
    border-color: var(--ed-primary);
    transform: translateY(-2px);
    box-shadow: var(--ed-shadow-md);
}
.fullscreen-modal .card-p-style.active{
    border-color: var(--ed-primary);
    /* box-shadow: 0 0 0 2px rgba(74, 141, 240, .25), var(--ed-shadow-md); */
}
.fullscreen-modal .check-icon{
    width: 22px; 
    height: 22px;
    /* background: var(--ed-success);
    box-shadow: 0 2px 6px rgba(46, 204, 142, .4), 0 0 0 3px #fff; */
}
.fullscreen-modal .product-name{
    color: var(--ed-ink);
    font-weight: 500;
}
.fullscreen-modal .js-ed-color-item .custom-color-picker{
    height: 68px;
}
/* ---- Form fields & inputs ---- */
.ed-row{
    border-bottom: 1px solid var(--ed-line-soft);
    padding: 12px 0;
}
.ed-row:last-child{ border-bottom: 0; }
.ed-row-label{
    color: var(--ed-ink);
    font-weight: 600;
}
.ed-select, .ed-num,
.fullscreen-modal .browse_topsrch input.form-control,
.input-textarea{
    border: 1px solid var(--ed-line);
    border-radius: var(--ed-radius-sm);
    transition: all .15s var(--ed-ease);
    background: #fff;
}
.ed-select:focus, .ed-num:focus,
.fullscreen-modal .browse_topsrch input.form-control:focus,
.input-textarea:focus{
    border-color: var(--ed-primary);
    box-shadow: 0 0 0 3px rgba(74, 141, 240, .15);
}

/* ---- Toggle switch ---- */
.ed-switch input:checked + .ed-switch-slider{
    background: linear-gradient(135deg, var(--ed-primary) 0%, var(--ed-primary-dark) 100%);
}
.ed-switch-slider:before{ box-shadow: 0 2px 4px rgba(0, 0, 0, .25); }

/* ---- Icon buttons ---- */
.ed-icon-btn{
    border: 1px solid var(--ed-line);
    border-radius: var(--ed-radius-sm);
    color: var(--ed-ink);
    transition: all .15s var(--ed-ease);
    background: #fff;
}
.ed-icon-btn:hover{
    background: var(--ed-primary-soft);
    border-color: var(--ed-primary);
    color: var(--ed-primary-dark);
    transform: translateY(-1px);
}
.ed-icon-btn.active{
    background: linear-gradient(135deg, var(--ed-primary) 0%, var(--ed-primary-dark) 100%);
    border-color: var(--ed-primary-dark);
    color: #fff;
    box-shadow: 0 2px 8px rgba(74, 141, 240, .35);
}
.ed-icon-btn-danger:hover{
    background: #fff5f6;
    border-color: var(--ed-danger);
    color: var(--ed-danger);
}

/* ---- Color triggers ---- */
.ed-color-trigger{
    width: 42px; height: 42px;
    border-radius: var(--ed-radius-sm);
    border: 1px solid var(--ed-line);
    box-shadow: var(--ed-shadow-sm);
    transition: all .18s var(--ed-ease);
}
.fullscreen-modal .ed-color-trigger{
    flex: 0 0 42px;
}
.ed-color-trigger:hover{
    border-color: var(--ed-primary);
    box-shadow: 0 0 0 3px rgba(74, 141, 240, .15), var(--ed-shadow-sm);
    transform: scale(1.05);
}
.ed-color-trigger .imprint-value{ border-radius: 4px; }

/* ---- Default button ---- */
.fullscreen-modal .default-btn{
    background: linear-gradient(135deg, var(--ed-primary) 0%, var(--ed-primary-dark) 100%);
    color: #fff;
    border: 0;
    padding: 10px 22px;
    border-radius: var(--ed-radius-sm);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .3px;
    box-shadow: 0 2px 6px rgba(74, 141, 240, .25);
    transition: all .2s var(--ed-ease);
}
.fullscreen-modal .default-btn:hover{
    background: linear-gradient(135deg, var(--ed-primary-dark) 0%, #1f57b8 100%);
    box-shadow: 0 6px 14px rgba(74, 141, 240, .35);
    transform: translateY(-1px);
    color: #fff;
}

/* ---- Layers list ---- */
.ed-layer-row{
    border: 1px solid var(--ed-line);
    border-radius: var(--ed-radius-sm);
    box-shadow: var(--ed-shadow-sm);
    transition: all .18s var(--ed-ease);
}
.ed-layer-row:hover{
    border-color: var(--ed-primary);
    background: var(--ed-primary-soft);
    transform: translateX(2px);
}
.ed-layer-row.active{
    border-color: var(--ed-primary);
    background: var(--ed-primary-soft);
    box-shadow: 0 0 0 2px rgba(74, 141, 240, .2);
}
.ed-layer-thumb{
    border: 1px solid var(--ed-line);
    background: linear-gradient(135deg, #fafbfd 0%, #eef1f6 100%);
    border-radius: var(--ed-radius-sm);
}
.ed-layer-thumb-text{
    color: var(--ed-primary-dark);
    font-weight: 700;
}
.ed-layer-action:hover{
    background: var(--ed-primary);
    color: #fff;
}

/* ---- Art tab category pills ---- */
.ed-art-cat{
    border: 1px solid var(--ed-line);
    border-radius: 999px;
    padding: 7px 16px;
    transition: all .18s var(--ed-ease);
    box-shadow: var(--ed-shadow-sm);
}
.ed-art-cat:hover{
    border-color: var(--ed-primary);
    color: var(--ed-primary-dark);
    transform: translateY(-1px);
}
.ed-art-cat.active{
    background: linear-gradient(135deg, var(--ed-primary) 0%, var(--ed-primary-dark) 100%);
    border-color: var(--ed-primary-dark);
    color: #fff;
    box-shadow: 0 4px 10px rgba(74, 141, 240, .3);
}

/* ---- Upload dropzone ---- */
.ed-upload-box{
    border: 2px dashed var(--ed-line);
    border-radius: var(--ed-radius);
    padding: 40px 16px;
    background: linear-gradient(180deg, #fff 0%, var(--ed-bg) 100%);
    transition: all .25s var(--ed-ease);
}
.ed-upload-box:hover,
.ed-upload-box.dragging{
    border-color: var(--ed-primary);
    background: var(--ed-primary-soft);
    transform: scale(1.005);
}
.ed-upload-inner svg{
    color: var(--ed-primary);
    transition: transform .3s var(--ed-ease);
}
.ed-upload-box:hover .ed-upload-inner svg{ transform: translateY(-3px); }

/* ---- Canvas area ---- */
.ed-canvas-area{
    background: #fff;
    background-image:
        radial-gradient(circle at 25% 30%, rgba(74, 141, 240, .04) 0%, transparent 50%),
        radial-gradient(circle at 75% 70%, rgba(30, 193, 212, .04) 0%, transparent 50%);
    padding: 28px;
}
.ed-side-toggle{
    margin-bottom: 16px;
    display: inline-flex;
    gap: 8px;
}
.ed-view-pill{
    background: linear-gradient(135deg, var(--ed-ink) 0%, #1a2f5a 100%);
    color: #fff;
    border: 0;
    border-radius: 999px;
    padding: 8px 28px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    box-shadow: var(--ed-shadow-md);
    cursor: pointer;
    opacity: .45;
    transition: opacity .15s ease;
}
.ed-view-pill:hover{ opacity: .85; }
.ed-view-pill.active{ opacity: 1; cursor: default; }

.ed-canvas-wrap{
    /* border-radius: var(--ed-radius); */
    background: #fff;
    /* box-shadow: var(--ed-shadow-lg); */
    padding: 16px;
}

/* ---- Floating canvas tools ---- */
.ed-canvas-tools{
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--ed-line);
    border-radius: var(--ed-radius);
    padding: 8px;
    min-width: 92px;
    box-shadow: var(--ed-shadow-md);
}
.ed-tool-btn{
    border-radius: var(--ed-radius-sm);
    color: var(--ed-ink-muted);
    padding: 10px 6px;
    transition: all .18s var(--ed-ease);
}
.ed-tool-btn:hover{
    background: linear-gradient(135deg, var(--ed-primary) 0%, var(--ed-primary-dark) 100%);
    color: #fff;
    transform: scale(1.04);
}
.ed-tool-btn:hover span{
    color: #fff;
}
.ed-tool-btn:hover svg{ color: #fff; }

/* ---- Saved-design preview (Step 6) ---- */
.ed-saved-preview{
    width: 100%;
    border: 0;
    border-radius: var(--ed-radius-lg);
    background: linear-gradient(135deg, #ffffff 0%, #f7f9fd 100%);
    box-shadow: var(--ed-shadow-md);
    padding: 32px 24px 28px;
}
.ed-preview-stack{
    width: 100%;
    border-radius: var(--ed-radius);
    overflow: visible;
    transition: transform .3s var(--ed-ease);
    cursor: pointer;
}
.ed-saved-preview-side:hover .ed-preview-stack{ transform: translateY(-3px); }
.ed-saved-preview-label{
    color: var(--ed-ink);
    font-weight: 600;
    letter-spacing: .3px;
    font-size: 15px;
}
.ed-edit-design-btn{
    background: #2b5b8b;
    color: #fff;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    transition: background .15s
}
.ed-edit-design-btn:hover{
    background: #0082d2;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(74, 141, 240, .4);
}


#ds-saved-preview .ed-edit-design-btn{
    width:auto;
    margin: 0 auto;
}
/* ===== Start Designing CTA =====================================
   Visible inside #js-design-studio-con when no saved design
   exists. Clicking opens #ds-modal via the Bootstrap data
   API. Once a design is saved, refreshSavedPreview swaps this
   section out for the saved-preview block. */
.ed-start-design-section{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    text-align: center;
    gap: 18px;
    margin: auto;
}
/* Intro copy sitting above the Start Designing button.
   Keeps the column narrow so the line wraps naturally. */
.ed-start-design-intro{
    max-width: 480px;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #4a5876;
}
.ed-start-design-btn{
    color: #fff;
    border: 0;
    border-radius: var(--ed-radius-sm);
    padding: 14px 40px;
    font-size: 15px;
    cursor: pointer;
}
.ed-start-design-btn:hover{
    background: #0082d2;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(74, 141, 240, .4);
}
.ed-edit-design-btn, .ed-start-design-btn {
    background: linear-gradient(135deg, var(--ed-primary) 0, var(--ed-primary-dark) 100%);
    box-shadow: 0 4px 12px rgba(74, 141, 240, .3);
    transition: all .25s var(--ed-ease);
    letter-spacing: .3px;
    font-weight: 600;
}
.ed-edit-design-btn:hover, .ed-start-design-btn:hover {
    background: linear-gradient(135deg, var(--ed-primary-dark) 0, #1f57b8 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(74, 141, 240, .4);
}
/* ===== Design Studio per-color qty preview cards =================
   .js-eds-qty-colors hosts one .ed-qty-color-card per quantity in the
   Easy Form. Stock-color cards (rendered with .hand .js-eds-color-card)
   swap the saved-preview bg images on click; custom-color cards
   (.is-custom) show the user-picked hex and are intentionally inert. */
.js-eds-qty-colors{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 20px;
    overflow: auto;
}
.ed-qty-color-card{
    margin: 0;
    float: none;
}
.ed-qty-color-card > a{
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
.ed-qty-color-card .leftcolor-box-outer{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--ed-radius, 12px);
    background: #fff;
    border: 1px solid #e6ecf5;
    box-shadow: 0 2px 6px rgba(20, 40, 80, .04);
    transition: transform .2s var(--ed-ease, ease), box-shadow .2s var(--ed-ease, ease), border-color .2s var(--ed-ease, ease);
}
.ed-qty-color-card:not(.is-custom) > a:hover .leftcolor-box-outer{
    border-color: var(--ed-primary, #4a8df0);
    /* box-shadow: 0 6px 16px rgba(74, 141, 240, .18);
    transform: translateY(-2px); */
}
.ed-qty-color-card.is-custom .leftcolor-box-outer{
    cursor: default;
}
.ed-qty-color-card .leftcolor-box-image{
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    background: #fafafa;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ed-qty-color-card .leftcolor-box-image img{
    width: auto;
    height: 100%;
    object-fit: contain;
    display: block;
}
.ed-qty-color-card .leftcolor-title-box{
    flex: 1 1 auto;
    min-width: 0;
}
.ed-qty-color-card .color-name{
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--ed-ink, #1a2f5a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ed-qty-color-card .left-qty{
    margin-top: 2px;
    font-size: 11px;
    color: #6a7a93;
    letter-spacing: .3px;
}
.ed-qty-color-card .leftcolor-action{
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .3px;
    padding: 6px 12px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--ed-primary, #4a8df0) 0, var(--ed-primary-dark, #2d6ad6) 100%);
    color: #fff;
    text-transform: uppercase;
    cursor: pointer;
}
.ed-qty-color-card.is-custom .leftcolor-action{
    background: #f0f3f9;
    color: #4a5a78;
}
@media (max-width: 575px){
    .js-eds-qty-colors{ grid-template-columns: 1fr; gap: 10px; }
    .ed-qty-color-card .leftcolor-box-image{ flex-basis: 48px; width: 48px; height: 48px; }
    .ed-qty-color-card .leftcolor-action{ padding: 5px 10px; font-size: 10px; }
}

/* ---- Bootstrap modal animation tweak ---- */
.modal.fade .fullscreen-modal{
    transform: translateY(20px);
    opacity: 0;
    transition: transform .35s var(--ed-ease), opacity .25s ease;
}
.modal.fade.show .fullscreen-modal{
    transform: translateY(0);
    opacity: 1;
}

/* ---- Empty states ---- */
.ed-empty{
    color: var(--ed-ink-muted);
    background: var(--ed-line-soft);
    border-radius: var(--ed-radius-sm);
    padding: 32px 16px;
    margin: 8px 6px;
}

/* ---- Templates / colors search ---- */
.fullscreen-modal .browse_topsrch label{
    color: var(--ed-ink);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .2px;
}

/* ---- Order Notes textarea (in Step 6) ---- */
#txtcomments{
    border: 1px solid var(--ed-line);
    border-radius: var(--ed-radius-sm);
    padding: 12px 14px;
    transition: all .15s var(--ed-ease);
    box-shadow: var(--ed-shadow-sm);
}
#txtcomments:focus{
    border-color: var(--ed-primary);
    box-shadow: 0 0 0 3px rgba(74, 141, 240, .15);
}

/* ---- Layer alignment grid ---- */
.ed-align-grid{ gap: 6px; }

/* Close (X) button on the panel — hidden by default; only shows on mobile
   under @media (max-width: 768px) where the panel becomes a bottom drawer. */
.ed-panel-close{ display: none; }

/* ---- Subtle entry animation for tab content ---- */
.tab-pane.fade.show.active{ animation: edFadeUp .25s var(--ed-ease); }
@keyframes edFadeUp{
    from{ opacity: 0; transform: translateY(6px); }
    to  { opacity: 1; transform: translateY(0); }
}

/* ---- Responsive tweaks ---- */
@media (max-width: 991px){
    .ed-side{ flex: 0 0 400px; max-width: 400px; }
    .ed-rail{ flex: 0 0 84px; }
    .ed-rail .nav-link{ width: 72px; height: 70px; }
    .ed-canvas-area{ padding: 16px; }
}

/* ===================================================================
   Mobile / tablet portrait — bottom-tab layout (matches screenshot)
   - Canvas fills the upper area (full width)
   - Floating tools stay pinned top-right of canvas
   - Tab content panel collapses, opens as a bottom drawer when a tab
     is active
   - Tab rail is a horizontal nav bar fixed to the bottom edge
   =================================================================== */
@media (max-width: 768px){

    /* Header — compact on phone */
    .fullscreen-modal .modal-header{
        padding: 10px 14px;
    }
    .fullscreen-modal .modal-logo img{ max-height: 36px; }
    .gray-circle-box{
        width: 50px; height: 50px;
        font-size: 10px;
        padding: 4px;
    }
    .gray-circle-box svg{ width: 16px; height: 16px; margin-bottom: 1px; }
    .fullscreen-modal .btn-close{
        width: 36px; height: 36px;
        margin-left: 4px;
    }

    /* .fullscreen-modal .modal-body{
        height: calc(100vh - 65px);
    } */

    /* Layout — column stack: canvas on top, rail at the very bottom.
       Tapping a rail tab makes the panel slide in from the LEFT edge of
       the screen and overlay the canvas (the rail stays visible at the
       bottom). Tapping the same tab again or the X closes it. */
    .ed-layout{
        flex-direction: column;
        height: 100%;
        position: relative;            /* anchor for the absolutely-positioned panel */
    }
    .ed-canvas-area{
        order: 1;
        flex: 1 1 auto;
        min-height: 0;
        padding: 16px 12px 12px;
        overflow: hidden;
        position: relative;
    }
    .ed-side{
        order: 2;
        flex: 0 0 auto;
        max-width: 100%;
        max-height: fit-content;
        width: 100%;
        flex-direction: column;
        border-right: 0;
        border-top: 1px solid var(--ed-line);
        box-shadow: 0 -4px 16px rgba(14, 31, 71, .06);
        background: #fff;
    }

    /* Bottom rail — horizontal nav bar */
    .ed-rail{
        flex: 0 0 64px;
        flex-direction: row;
        justify-content: space-around;
        align-items: stretch;
        height: 64px;
        width: 100%;
        background: #fff;
        border-right: 0;
        border-top: 1px solid var(--ed-line);
        padding: 6px 4px;
        gap: 0;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
    }
    .ed-rail::-webkit-scrollbar{ display: none; }
    .ed-rail .nav-link{
        flex: 1 1 0;
        min-width: 56px;
        width: auto;
        height: 52px;
        margin: 0 2px;
        padding: 4px 2px;
        font-size: 9.5px;
        gap: 2px;
        border-radius: var(--ed-radius-sm);
    }
    .ed-rail .nav-link svg{ width: 22px; height: 22px; }
    .ed-rail .nav-link.active{
        background: linear-gradient(135deg, var(--ed-primary) 0%, var(--ed-primary-dark) 100%);
        color: #fff;
        box-shadow: 0 2px 6px rgba(74, 141, 240, .3);
    }
    /* Move the active indicator from the right edge to the top edge */
    .ed-rail .nav-link.active::before{
        right: auto;
        left: 50%;
        top: -6px;
        bottom: auto;
        transform: translateX(-50%);
        width: 32px;
        height: 4px;
        border-radius: 0 0 3px 3px;
    }

    /* Tab content panel — slides in from the LEFT edge, overlays the
       canvas. Anchored to .ed-layout (position: relative above) so it spans
       the full canvas-area height; the bottom rail (64px) remains visible
       below the panel. */
    .ed-panel{
        position: absolute;
        top: 0;
        bottom: 64px;                 /* stop above the bottom rail */
        left: 0;
        width: 100%;
        max-height: none;
        background: #fff;
        border-top: 0;
        border-right: 1px solid var(--ed-line-soft);
        box-shadow: 6px 0 18px rgba(14, 31, 71, .15);
        /* Zero top padding so the sticky title below can sit flush against
           the panel's top edge. Side + bottom padding stay; the title
           cancels the side padding with negative margins. */
        padding: 0 16px 14px;
        overflow-y: auto;
        /* Sits above .ed-canvas-tools (z-index:10) and any other canvas
           overlays so the drawer fully covers the canvas area when open. */
        z-index: 30;
        transition: transform .25s var(--ed-ease), opacity .2s var(--ed-ease), visibility 0s linear .25s;
        transform: translateX(-105%);
        opacity: 0;
        visibility: hidden;
    }
    .ed-side.ed-panel-open .ed-panel{
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
        transition: transform .25s var(--ed-ease), opacity .2s var(--ed-ease);
    }

    /* Close (X) button — pins to the panel's top-right and STAYS there
       while the panel content scrolls. position:absolute (the desktop
       value) doesn't work here because absolutely-positioned children of
       an overflow:auto container scroll with the content. position:sticky
       inside the same scroll context as the sticky .design-partial-title
       keeps the X locked alongside the dark heading band.
       margin-left:auto right-aligns the button to the panel's right edge;
       margin-bottom:-32px keeps it from pushing the tab content down by
       its own height (the button visually overlays the right side of the
       sticky title via z-index: 32 above title's z-index: 5). */
    .ed-panel-close{
        display: flex;
        align-items: center;
        justify-content: center;
        position: sticky;
        top: 4px;
        margin: 0 -5px -32px auto;
        width: 28px;
        height: 28px;
        padding: 0;
        border: 1px solid var(--ed-line);
        background: #fff;
        color: var(--ed-ink-muted);
        border-radius: 6px;
        cursor: pointer;
        z-index: 32;
        box-shadow: var(--ed-shadow-sm);
        transition: all .18s var(--ed-ease);
    }
    .ed-panel-close svg{ width: 24px; height: 24px; }
    .ed-panel-close:hover,
    .ed-panel-close:active{
        background: var(--ed-danger);
        border-color: var(--ed-danger);
        color: #fff;
        transform: rotate(90deg);
    }
    /* Hide the close button when the panel is collapsed (drawer is closed). */
    .ed-side:not(.ed-panel-open) .ed-panel-close{
        display: none;
    }

    /* Compact tab titles, cards and rows on phone.
       Sticky-at-top inside the scrollable .ed-panel — the heading stays
       visible while the user scrolls through long color/template/art lists.
       The negative side margins cancel the panel's 16px side padding so
       the dark band spans the full drawer width. Right padding leaves room
       for the close (X) button which still floats at top-right via its
       own absolute positioning. The close button's z-index (32) is bumped
       above the sticky title (5) so it stays clickable. */
    .design-partial-title{
        font-size: 14px;
        padding: 12px 50px 12px 14px;
        margin: 0 -16px 12px;
        position: sticky;
        top: -1px;
        z-index: 5;
        border-radius: 0;
    }
    .fullscreen-modal .card-p-style{
        width: calc(33.333% - 10px);
        margin: 5px;
        padding: 6px;
    }
    .fullscreen-modal .browse_tempitem.card-p-style{
        width: calc(50% - 10px);
    }
    .ed-row{ flex-wrap: wrap; gap: 8px; padding: 8px 0; }
    .ed-row-label{ flex: 1 1 100%; min-width: 0; font-size: 13px; }
    .ed-select{ flex: 1 1 auto; }

    /* Canvas wrap — fits viewport, no extra padding wasting space.
       viewport - modal header (~64) - bottom rail (64) - pill/tools (110). */
    .ed-canvas-area{
        background: #fff;
        background-image: none;
    }
    .ed-canvas-stage{
        padding: 0;
    }
    .ed-canvas-wrap{
        width: min(420px, 92%);
        max-height: calc(100vh - 64px - 64px - 110px);
        /* max-height: calc(100dvh - 64px - 64px - 110px); */
        padding: 8px;
        /* box-shadow: var(--ed-shadow-md); */
    }
    .ed-canvas-wrap img#frontDesign,
    .ed-canvas-wrap img#backDesign{ max-width: 480px; max-height: 480px; }

    /* FRONT/BACK pill — sit at the top */
    .ed-side-toggle{
        margin-bottom: 8px;
        margin-top: 0;
    }
    .ed-view-pill{
        padding: 6px 22px;
        font-size: 11px;
    }

    /* Floating canvas tools — pinned top-right of canvas, stay vertical */
    .ed-canvas-tools{
        position: absolute;
        top: 12px;
        right: 12px;
        flex-direction: column;
        margin-top: 0;
        width: auto;
        min-width: 78px;
        background: rgba(255, 255, 255, .96);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        padding: 6px;
        z-index: 10;
    }
    .ed-canvas-tools.collapsed{
        display: flex;          /* keep visible — user can re-expand */
        min-width: 40px;
    }
    .ed-canvas-tools.collapsed .ed-tool-btn:not(.ed-tool-toggle){ display: none; }
    .ed-tool-btn{
        padding: 6px 4px;
        font-size: 10px;
        gap: 2px;
    }
    .ed-tool-btn svg{ width: 18px; height: 18px; }
    .ed-tool-toggle{
        width: 26px;
        height: 26px;
        padding: 3px;
        margin-bottom: 2px;
    }

    /* Saved-design preview tightens up too */
    .ed-saved-preview{ padding: 18px 14px 16px; }
    .ed-saved-preview-grid{ gap: 12px; }
    .ed-saved-preview-side{ flex: 0 1 calc(50% - 8px); }
    .ed-saved-preview-side img,
    .ed-preview-bg{ max-height: 200px; }
}

/* Phone — narrowest layouts */
@media (max-width: 480px){
    .ed-rail .nav-link{
        font-size: 9px;
        height: 50px;
        min-width: 52px;
    }
    .ed-rail .nav-link svg{ width: 20px; height: 20px; }
    .gray-circle-box{ width: 44px; height: 44px; font-size: 9px; }
    .fullscreen-modal .modal-logo img{ max-height: 30px; }
    .ed-canvas-tools{
        top: 8px; right: 8px;
        min-width: 70px;
    }
    .fullscreen-modal .card-p-style{ width: calc(50% - 10px); }
    .ed-saved-preview-side{ flex: 0 1 100%; }
    .ed-saved-preview-side img,
    .ed-preview-bg{ max-height: 220px; }
}



@media screen and (min-width:1800px){
    .sml-clr-bx .card-p-style.type-color.js-hue-color-group,
    .sml-clr-bx .card-p-style.type-color.js-hue-color-group .custom-color-picker,
    body .sd-clr-menu .sml-clr-bx .card-p-style.type-color,
    body .sd-clr-menu .custom-color-picker{
        width: 50px;
        height: 50px;
    }
}
/* ── Common DesignStudio extras (not in cancooler editor.css) ── */
.ds-panel-title{font-size:16px;font-weight:600;margin:0 0 14px;color:#1f2a44;}
#ds-color-grid,#ds-colors-grid{display:flex;flex-wrap:wrap;gap:8px;}
.ds-color-card{width:40px;height:40px;border:1px solid #e4e4e4;border-radius:6px;padding:3px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:border-color .15s,transform .1s;}
.ds-color-card:hover{transform:scale(1.05);}
.ds-color-card.active{border-color:#2b5b8b;box-shadow:0 0 0 2px rgba(43,91,139,.35);}
.ds-color-swatch{display:block;width:100%;height:100%;border-radius:4px;border:1px solid rgba(0,0,0,.1);}
.ds-art-card{display:inline-block;width:72px;height:72px;margin:4px;border:1px solid #eee;border-radius:6px;padding:4px;cursor:pointer;background:#fff;}
.ds-art-card img{width:100%;height:100%;object-fit:contain;}
.ds-art-card:hover{border-color:#2b5b8b;}
.ds-uploaded-item{padding:8px 10px;border:1px solid #eee;border-radius:6px;margin-bottom:6px;font-size:12px;color:#444;background:#fafafa;word-break:break-all;}
#ds-upload-box.dragover{border-color:#2b5b8b;background:#f1f6fb;}

/* ──────────────────────────────────────────────────────────────────────
   Authoritative layout guard (scoped to #ds-modal so page/Bootstrap class
   rules can't override it via load order). Fixes the design-studio tab
   content area collapsing when the common shell runs on a product page
   whose own CSS (or Bootstrap's .modal-dialog-centered) wins the cascade.
   Desktop/tablet only — the ≤768px mobile drawer rules above still apply.
   ────────────────────────────────────────────────────────────────────── */
@media (min-width: 769px){
  #ds-modal .modal-dialog.fullscreen-modal{
    display: block; width: 100%; max-width: 100%; height: 100%; margin: 0;
  }
  #ds-modal .modal-content{ height: 100%; }
  #ds-modal .modal-body{ padding: 0; height: calc(100vh - 73px); overflow: hidden; }
  #ds-modal .ed-layout{ display: flex; height: 100%; overflow: hidden; }
  #ds-modal .ed-side{ display: flex; flex: 0 0 460px; max-width: 460px; min-width: 0; height: 100%; }
  #ds-modal .ed-rail{ flex: 0 0 96px; }
  #ds-modal .ed-panel{ flex: 1 1 auto; min-width: 0; height: 100%; overflow-y: auto; }
  #ds-modal .ed-canvas-area{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
  /* Only the active tab pane shows; its content stacks (title → grid). */
  #ds-modal .ed-panel > .tab-pane{ display: none; }
  #ds-modal .ed-panel > .tab-pane.active{ display: block; }
  #ds-modal .design-partial-title{ display: block; width: auto; white-space: normal; }
}

/* ── Shared color popover (Text fill / Outline / Art tint pickers) ── */
.ds-color-pop{
  position: fixed;
  z-index: 20000;
  width: 232px;
  max-width: calc(100% - 16px);
  background: #fff;
  border: 1px solid #e2e6ee;
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(9, 29, 79, 0.18);
  padding: 10px;
}
.ds-color-pop-grid{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 6px;
  max-height: 168px;
  overflow-y: auto;
}
.ds-pop-swatch{
  display: block;
  width: 100%;
  padding-top: 100%;
  border-radius: 6px;
  border: 1px solid rgba(9, 29, 79, 0.15);
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease;
}
.ds-pop-swatch:hover{ transform: scale(1.08); box-shadow: 0 0 0 2px #009DFE; }
.ds-color-pop-grid .ds-empty{ grid-column: 1 / -1; font-size: 12px; color: #6b7280; padding: 6px 2px; }
.ds-color-pop-custom{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #eef1f6;
}
.ds-color-pop-custom label{ font-size: 12px; font-weight: 600; color: #091d4f; margin: 0; }
.ds-color-pop-custom input[type="color"]{
  width: 42px; height: 28px; padding: 0;
  border: 1px solid #d7dbe6; border-radius: 6px; background: none; cursor: pointer;
}
.ed-art-edit-only{ margin-bottom: 12px; }

/* ── Common-shell canvas (lanyard, etc.) — responsive, natural aspect ──
   The Fabric canvas is created at a fixed pixel size (800×267 for the lanyard
   strap). Its lower/upper canvases are absolutely positioned, so we can't size
   by `height:auto` (the container would collapse). Instead give the container a
   real box via `aspect-ratio` (matching the 800×267 canvas) capped to a sane
   width, and let both canvases fill it 100% — they scale together and stay
   aligned, and the strap keeps its natural 3:1 proportion without stretching or
   overflowing the column. */
/* Shell wrap override — the base `.ed-canvas-wrap` caps width to
   min(440px,90%); for the lanyard/common-shell editor we want the strap to use
   nearly the full column at its natural height. Scoped to the shell's id so
   cancooler's `.ed-canvas-wrap` is untouched. */
#ds-canvas-wrap{
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  padding: 16px;
}
#ds-canvas-host{ width: 100%; text-align: center; }
/* Cap the DISPLAY height (~120px) so the strap is a thin band; width follows
   the band aspect (~800px) via aspect-ratio. Keeping the display size close to
   the canvas's own pixel size (800×120, retina-backed by Fabric) keeps the
   strap crisp — no upscaling blur. max-width lets it shrink on narrow screens
   (height reduces with it). */
#ds-canvas-host .canvas-container{
  position: relative;
  /* Cap the width at the strap's natural size (800px) and let aspect-ratio
     drive the height, so it never stretches wide/thin on big screens. Height
     lands at ~120px at full width and shrinks proportionally on narrow ones. */
  width: 100% !important;
  /* max-width: 800px; */
  aspect-ratio: 800 / 120;
  height: auto !important;
  margin: 0 auto;
}
#ds-canvas-host .canvas-container canvas{
  width: 100% !important;
  height: 100% !important;
}

#ds-canvas-host .canvas-container:after{
    content: '';
    position: absolute;
    /* Insets as a % of the strap box (800x120) so the dashed safe-area frame
       scales with the container instead of staying a fixed 20px/10px while
       aspect-ratio grows the box on large desktops. 20/120 = 16.6667%,
       10/800 = 1.25%. */
    top: 16.6667%;
    left: 1.25%;
    right: 1.25%;
    bottom: 16.6667%;
    border: 2px dashed rgb(255 255 255);
    pointer-events: none;
    z-index: 10;
}
/* ── Right-sidebar PMS color picker drawer (WPmsColor) ──────────────
   The drawer markup (Common/Product/pmscolor.html.twig) is injected at runtime
   and shown from the studio. Its base styles normally live in the product
   order/editor CSS, which isn't loaded on the lanyard page — so port a
   self-contained copy here, scoped under .sd-clr-menu to avoid clashing with
   the studio's own .card-p-style / .custom-color-picker / .icon-input rules. */
.sd-clr-menu{
  position: fixed;
  top: 0;
  right: -100%;
  width: 450px;
  max-width: 100%;
  height: 100%;
  z-index: 100000;
  background: #fff;
  box-shadow: -8px 8px 46px -9px rgba(6,19,51,.20);
  transition: right .4s ease;
}
.sd-clr-menu.active{ right: 0; }
.sd-clr-menu:before{
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.30);
  display: none;
}
.sd-clr-menu.active:before{ display: block; }
.sd-clr-menu .sd-clr-menu-overlay{
  position: relative;
  background: #fff;
  padding: 20px;
  height: 100%;
  z-index: 1;
}
.sd-clr-menu .mdl-hdr{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 20px;
}
.sd-clr-menu .mdl-hdr h2{
  margin: 0;
  font-weight: 700;
  font-size: 15px;
  color: #091D4F;
}
.sd-clr-menu .mdl-hdr .close{ cursor: pointer; }
.sd-clr-menu .mdl-hdr .close svg path{ stroke: #0A1D4F; }
.sd-clr-menu .position-relative{ position: relative; }
.sd-clr-menu .icon-input{
  width: 100%;
  padding: 8px 12px 8px 40px;
  border: 1px solid #d7dbe6;
  border-radius: 6px;
  font-size: 14px;
}
.sd-clr-menu .search-icon{ position: absolute; top: 8px; left: 12px; }
.sd-clr-menu .scroll-content{
  overflow-y: auto;
  overflow-x: hidden;
  max-height: calc(100% - 105px);
  margin-top: 20px;
}
.sd-clr-menu .no-scroll{ overflow: unset; max-height: none; }
.sd-clr-menu .sml-clr-bx{
  display: flex;
  flex-wrap: wrap;
  margin: 20px -4px;
}
.sd-clr-menu .sml-clr-bx .card-p-style.type-color{
  width: 38px; height: 38px; margin: 0 4px 4px; padding: 0;
  min-height: auto; cursor: pointer;
}
.sd-clr-menu .sml-clr-bx .custom-color-picker{ margin-bottom: 0; }
.sd-clr-menu .lrg-clr-bx{ display: flex; flex-wrap: wrap; }
.sd-clr-menu .lrg-clr-bx .card-p-style{
  width: 25%; margin: 0; padding: 8px;
  border: 1px solid #E4E4E4; text-align: center; cursor: pointer;
  box-sizing: border-box;
}
.sd-clr-menu .lrg-clr-bx .card-p-style.type-color img{ max-width: 38px; }
.sd-clr-menu .card-p-style{ background: #fff; border-radius: 6px; transition: border-color .15s; }
.sd-clr-menu .card-p-style:hover{ border-color: #009DFE; }
.sd-clr-menu .card-p-style .product-name{ font-weight: 600; font-size: 13px; color: #091D4F; }
.sd-clr-menu .custom-color-picker{
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid #D2D2D6; margin: 0 auto 8px;
}
.sd-clr-menu .card-p-style.type-color img{
  border: 1px solid #D2D2D6; border-radius: 50%; object-fit: cover;
}
.sd-clr-menu .editor-loading-con{
  width: 100%; display: flex; align-items: center; justify-content: center; min-height: 300px;
}
@media screen and (max-width: 370px){
  .sd-clr-menu .lrg-clr-bx .card-p-style{ width: 33.333%; }
}

.card-p-style.js-ds-art-cat,
.card-p-style.js-ds-art-item {
    width: calc(50% - 20px);
}

.card-p-style.js-ds-art-cat .custom-color-picker,
.card-p-style.js-ds-art-item .custom-color-picker {
    height: 130px;
}


@media screen and  (max-width: 991px){
  body #ds-rail-content .tab-pane.active {
        display: block;
    }
}

/* Design Studio: art thumbnail placeholder + art-add busy spinner ---------- */
.ds-art-thumb{ background:#f2f4f7; border-radius:6px; }
#ds-busy .ds-busy-spin{ width:26px; height:26px; border:3px solid rgba(0,0,0,.15); border-top-color:#4a8df0; border-radius:50%; animation:ds-spin .7s linear infinite; }
@keyframes ds-spin{ to{ transform:rotate(360deg); } }