div#LumiseDesign div#lumise-navigations,div#lumise-top-tools>ul.lumise-top-nav li button:not(.white), #LumiseDesign button.lumise-btn:not(.white),div#lumise-workspace .lumise-save-color i:hover,div#LumiseDesign div#lumise-navigations ul[data-block] li[data-view="list"] ul[data-view="sub"] li:not([data-view="sp"]):hover,div#LumiseDesign div#lumise-navigations ul[data-block="right"]>li[data-tool="languages"] i,ul#lumise-saved-designs li[data-editing]:after,.lumise-switch .lumise-toggle-button:checked~.lumise-toggle-label,.lumise-toggle input:checked ~ .lumise-toggle-label,.lumise_form_group input[type="submit"],.lumise_form_group .img-preview label,.lumise_sidebar ul.lumise_menu > li > a:before,.lumise_submit:hover,.lumise_header .add_new:hover,.btn-toggle-sidebar:hover,.lumise_backtotop:hover,#lumise-select-language header .close-pop:hover:before, #lumise-select-language header .close-pop:hover:after,body .lumise-btn-primary,.lumise_radios .lumise-radio input:checked ~ label .check:before,#lumise-popup .lumise-popup-content ul.lumise-stagle-list-base li:hover img,.lumise_form_group .lumise_form_content button[data-func="create-color"],.lumise_radios .radio input:checked ~ label .check:before,.lumise_content button[data-btn="primary"],#lumise-left #lumise-uploads header button:hover,#lumise-left #lumise-uploads header button.active,#lumise-left #lumise-x-thumbn-preview .lumise-categories-wrp ul li.active p,#lumise-left #lumise-x-thumbn-preview .lumise-categories-wrp ul li:after,div#LumiseDesign div#lumise-navigations ul[data-block][data-resp="file"].active,#lumise-lightbox #lumise-change-products-wrp ul[data-view="categories"] li.active,#lumise-lightbox #lumise-change-products-wrp ul[data-view="products"] li[data-current="true"]:after,#lumise-list-colors #lumise-list-colors-body .col .create-color-grp button[data-func="apply-now"],.bgcolorafter:after,.bgcolor{background-color: #3fc7ba !important;}input[type=range]::-webkit-slider-thumb{background-color: #3fc7ba !important;}div#LumiseDesign div#lumise-left>div.lumise-left-nav-wrp>ul.lumise-left-nav li:hover,#lumise-cliparts .lumise-cliparts-search i,#lumise-left .lumise-xitems-search i,#lumise-left #lumise-cliparts-preview>header>span,div#lumise-top-tools ul[data-mode-text] .text-format.selected,div#lumise-top-tools>ul.lumise-top-nav>li:hover [data-tip="true"] > i,div#lumise-top-tools>ul.lumise-top-nav>li.active [data-tip="true"] > i,div#LumiseDesign div#lumise-navigations ul[data-block="right"]>li[data-tool="languages"] li:hover>i,.lumise_sidebar ul li a:hover, .lumise_sidebar ul li a.active, .lumise_sidebar ul li a:hover i, .lumise_sidebar ul li a.active i,.lumise_content .lumise_table a,.lumise_breadcrumb li span,#lumise-popup ul li:hover,#LumiseDesign a,.lumise-color,div#lumise-product nav>price,#lumise-left #lumise-x-thumbn-preview>header>span,#lumise-cliparts .lumise-cliparts-search i, #lumise-templates .lumise-templates-search i, #lumise-left .lumise-xitems-search i,.lumise_dashbroad a{color: #3fc7ba !important;}.lumise_content a,#lumise-lightbox #lumise-change-products-wrp ul[data-view="products"] li span[data-view="price"]{color: #3fc7ba;}div#LumiseDesign div#lumise-navigations #lumise-share-nav li[data-view="header"] span[data-active="true"],#lumise-left #lumise-uploads header button.active:after {border-top-color: #3fc7ba !important;}.lumise_header .add_new:hover,.lumise_backtotop:hover,.lumise_radios .lumise-radio input:checked ~ label .check,.lumise_radios .radio input:checked ~ label .check,.lumise-cart-options .lumise-prints .lumise_form_group .lumise_form_content input:checked + label,#lumise-list-colors #lumise-list-colors-body .col li i.fa:after {border-color: #3fc7ba !important;}#lumise-shapes svg:hover,.lumise_checkbox input:checked ~ label .check svg path{fill: #3fc7ba !important;}div#lumise-top-tools>ul.lumise-top-nav li[data-tool] ul[data-view="sub"] li#lumise-text-effect span[data-sef="images"] img:hover, div#lumise-top-tools>ul.lumise-top-nav li[data-tool] ul[data-view="sub"] li#lumise-text-effect span[data-sef="images"] img[data-selected="true"]{outline-color: #3fc7ba !important;}.lumise-cart-options .lumise-prints .lumise_form_group .lumise_form_content input:checked + label{box-shadow:0 0 0 2px #3fc7ba;}@media only screen and (max-width: 736px){html div#LumiseDesign div#lumise-left>div.lumise-left-nav-wrp>ul.lumise-left-nav li.active{background: #3fc7ba !important;}}
/* CustomPrintz Lumise Customisations v2.0.0 */
/* v2.0.0: UX-013 Phase 1d — Help Mode pill + auto-trigger */
/* v1.9.0: UX-013 Phase 1b — Guide Library + Help menu styles */
/* v1.8.0: UX-013 — CPZ Guide System overlay styles */
/* v1.7.0: UX-005 P0 — CSS-only text-effects panel constraint (no JS) */

/* Magenta Snap Guides */
div#lumise-main .canvas-wrapper .lumise-snap-line-y,
div#lumise-main .canvas-wrapper .lumise-snap-line-x {
    border-color: #3fc7ba !important;
    border-style: solid !important;
    z-index: 999999 !important;
}

/* =========================================================================
   ADD TO CART BUTTON — prominence boost (icon handled by cpz-editor-fixes.js)
   ========================================================================= */
#lumise-cart-action {
    min-width: 120px;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
}

/* Ensure the "Add to cart" text is always visible */
#lumise-cart-action span {
    display: inline !important;
}

/* =========================================================================
   MOBILE RESPONSIVE — Hide sidebar, position canvas full-width.
   NOTE: 768px block left UNTOUCHED — Lumise JS overrides display at runtime.
   ========================================================================= */
@media screen and (max-width: 768px) {
    #lumise-left, .lumise-left-nav-wrp, .lumise-tab-body-wrp, #lumise-right {
        display: none !important;
    }
    #lumise-main {
        left: 0 !important;
        width: 100% !important;
        padding-top: 60px !important;
    }
    #lumise-top-tools {
        left: 0 !important;
        border-bottom: 2px solid #3fc7ba !important;
    }
    .canvas-container { margin: 0 auto !important; }
}

/* =========================================================================
   UX-005 P0: Constrain text-effects panel on mobile (CSS-only)
   Lumise already positions panel at: position:fixed; top:105px; width:95%
   We just cap height + enable scroll. No padding, no canvas resize, no JS.
   ========================================================================= */
@media only screen and (max-width: 736px) {

  /* Safety: undo legacy display:none for mobile nav/panels */
  #lumise-left,
  .lumise-left-nav-wrp,
  .lumise-tab-body-wrp {
    display: block !important;
  }

  /* Constrain text-effect panel when active */
  div#lumise-top-tools[data-view="text-fx"] > ul.lumise-top-nav
    li[data-tool="text-effect"] ul[data-view="sub"],
  div#lumise-top-tools[data-view="curvedText"] > ul.lumise-top-nav
    li[data-tool="text-effect"] ul[data-view="sub"] {
    max-height: clamp(160px, 28vh, 260px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    box-shadow: 0 6px 22px rgba(0,0,0,0.14);
    padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  }

  /* Thumbnails: horizontal scroll row */
  div#lumise-top-tools[data-view="text-fx"] li#lumise-text-effect span[data-sef="images"],
  div#lumise-top-tools[data-view="curvedText"] li#lumise-text-effect span[data-sef="images"] {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 8px;
    padding: 6px 10px;
    -webkit-overflow-scrolling: touch;
  }

  /* Smaller thumbnails to fit constrained panel */
  div#lumise-top-tools[data-view="text-fx"] li#lumise-text-effect span[data-sef="images"] img,
  div#lumise-top-tools[data-view="curvedText"] li#lumise-text-effect span[data-sef="images"] img {
    height: 44px !important;
    flex: 0 0 auto;
  }
}

/* =========================================================================
   UX-013: CPZ Guide System — overlay, card, buttons, animations
   ========================================================================= */

/* Overlay container */
#cpz-guide-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 10000010;
  align-items: center;
  justify-content: center;
}

/* Semi-transparent backdrop */
.cpz-guide-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
}

/* Card */
.cpz-guide-card {
  position: relative;
  width: 90vw;
  max-width: 680px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  overflow: hidden;
  font-family: -apple-system,
    BlinkMacSystemFont, "Segoe UI",
    Roboto, sans-serif;
}

/* Header bar (Terracotta brand) */
.cpz-guide-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #C67B5C;
  color: #fff;
}
.cpz-guide-title {
  font-weight: 600;
  font-size: 15px;
}
.cpz-guide-close {
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  opacity: 0.8;
  padding: 0 4px;
}
.cpz-guide-close:hover {
  opacity: 1;
}

/* Body (Linen background) */
.cpz-guide-body {
  padding: 16px;
  text-align: center;
  background: #F5F0E8;
}
.cpz-guide-img {
  max-width: 100%;
  height: auto;
  max-height: 50vh;
  border-radius: 8px;
  border: 1px solid #ddd;
}
.cpz-guide-caption {
  margin: 12px 0 0;
  font-size: 14px;
  color: #3D3229;
  line-height: 1.5;
}

/* Footer */
.cpz-guide-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-top: 1px solid #eee;
}

/* Step dots */
.cpz-guide-dots {
  display: flex;
  gap: 6px;
}
.cpz-guide-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ddd;
  display: inline-block;
}
.cpz-guide-dot.active {
  background: #C67B5C;
}

/* Navigation buttons */
.cpz-guide-nav {
  display: flex;
  gap: 8px;
}
.cpz-guide-prev,
.cpz-guide-next,
.cpz-guide-done {
  padding: 6px 16px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  font-weight: 600;
}
.cpz-guide-prev {
  background: #eee;
  color: #3D3229;
}
.cpz-guide-next {
  background: #C67B5C;
  color: #fff;
}
.cpz-guide-done {
  background: #7D8E5E;
  color: #fff;
}

/* --- Guide Library (Phase 1b) --- */
#cpz-guide-library {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 10000011;
  align-items: flex-start;
  justify-content: flex-end;
}
.cpz-lib-backdrop {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.45);
}
.cpz-lib-panel {
  position: relative;
  width: 340px;
  max-width: 90vw;
  height: 100vh;
  background: #F5F0E8;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 20px rgba(0,0,0,0.3);
  z-index: 1;
}
.cpz-lib-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: #C67B5C;
  color: #fff;
  flex-shrink: 0;
}
.cpz-lib-title {
  font-size: 16px;
  font-weight: 700;
}
.cpz-lib-close {
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  padding: 0 2px;
}
.cpz-lib-close:hover {
  opacity: 0.7;
}
.cpz-lib-search {
  padding: 10px 16px 6px;
  flex-shrink: 0;
}
.cpz-lib-search-input {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 13px;
  background: #fff;
  color: #3D3229;
  box-sizing: border-box;
}
.cpz-lib-search-input:focus {
  outline: none;
  border-color: #C67B5C;
}
.cpz-lib-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px 16px;
}
.cpz-lib-cat {
  margin-bottom: 12px;
}
.cpz-lib-cat-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #999;
  padding: 6px 0 4px;
  letter-spacing: 0.5px;
}
.cpz-lib-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  margin: 3px 0;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
}
.cpz-lib-item:hover {
  background: #ede8df;
}
.cpz-lib-item.unseen {
  border-left: 3px solid #C67B5C;
}
.cpz-lib-item-title {
  font-size: 14px;
  color: #3D3229;
  font-weight: 500;
}
.cpz-lib-item-meta {
  font-size: 11px;
  color: #999;
  white-space: nowrap;
  margin-left: 8px;
}
.cpz-lib-empty {
  text-align: center;
  color: #999;
  padding: 24px 0;
  font-size: 13px;
}
.cpz-lib-footer {
  padding: 12px 16px;
  border-top: 1px solid #ddd;
  flex-shrink: 0;
}
.cpz-lib-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  color: #3D3229;
}
.cpz-lib-toggle-cb {
  display: none;
}
.cpz-lib-toggle-sw {
  width: 36px;
  height: 20px;
  background: #ccc;
  border-radius: 10px;
  position: relative;
  transition: background 0.2s;
  flex-shrink: 0;
}
.cpz-lib-toggle-sw::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}
.cpz-lib-toggle-cb:checked
  + .cpz-lib-toggle-sw {
  background: #7D8E5E;
}
.cpz-lib-toggle-cb:checked
  + .cpz-lib-toggle-sw::after {
  transform: translateX(16px);
}
.cpz-lib-toggle-hint {
  display: block;
  font-size: 11px;
  color: #999;
  margin-top: 4px;
}

/* Help menu injected items */
.cpz-helpmenu-lib {
  cursor: pointer;
  font-weight: 600;
}
.cpz-helpmenu-lib:hover {
  opacity: 0.8;
}
.cpz-helpmenu-toggle {
  padding: 8px 12px;
  border-top: 1px solid
    rgba(255,255,255,0.1);
}

/* Help Mode pill (Phase 1d) */
.cpz-help-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: rgba(198,123,92,0.15);
  color: #C67B5C;
  font-size: 12px;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  margin-left: 8px;
  white-space: nowrap;
  transition: background 0.2s;
  animation: cpzPillFadeIn 0.3s ease;
}
.cpz-help-pill:hover {
  background: rgba(198,123,92,0.3);
}
@keyframes cpzPillFadeIn {
  from { opacity: 0; transform:
    translateY(-4px); }
  to { opacity: 1; transform:
    translateY(0); }
}

/* Mobile: full-width card + library */
@media only screen and (max-width: 736px) {
  .cpz-guide-card {
    width: 96vw;
    max-width: none;
    margin: 0 2vw;
  }
  .cpz-guide-img {
    max-height: 40vh;
  }
  .cpz-guide-caption {
    font-size: 13px;
  }
  .cpz-guide-footer {
    padding: 10px 12px;
  }
  .cpz-lib-panel {
    width: 100vw;
    max-width: 100vw;
  }
}
/* =========================================================================
   END UX-013
   ========================================================================= */