/* IREMA 1.7.388 — SVG Gradient Toolbar / Sidebar */
irema-element-toolbar .irema-icon-gradient-fill{
  display:block;
  width:24px;
  height:24px;
  margin-left:auto;
  margin-right:auto;
  border-radius:5px;
  box-sizing:border-box;
  border:1px solid var(--irema-light-grey-color,#EBEBEB);
  background:linear-gradient(135deg,var(--irema-secondary-color,#029EEB) 0%,var(--irema-primary-color,#485563) 100%);
  box-shadow:0 0 2px rgba(0,0,0,.18);
}

irema-element-toolbar .irema-tool-gradient-fill.irema-active .irema-icon-gradient-fill{
  outline:2px solid var(--irema-secondary-color,#029EEB);
  outline-offset:1px;
}

irema-element-toolbar .irema-panel-gradient-fill{
  color:var(--irema-primary-color,#485563);
  box-sizing:border-box;
}

irema-element-toolbar .irema-panel-gradient-fill .irema-gradient-title{
  margin:0 0 10px;
  font-size:14px;
  font-weight:600;
  color:var(--irema-primary-color,#485563);
}

irema-element-toolbar .irema-panel-gradient-fill .irema-gradient-library{
  margin-bottom:14px;
}

irema-element-toolbar .irema-panel-gradient-fill .irema-gradient-palette{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  align-items:center;
}

irema-element-toolbar .irema-panel-gradient-fill .irema-gradient-palette .irema-item{
  position:relative;
  cursor:pointer;
}

irema-element-toolbar .irema-panel-gradient-fill .irema-gradient-palette .irema-item.irema-active{
  outline:2px solid var(--irema-secondary-color,#029EEB);
  outline-offset:2px;
}

irema-element-toolbar .irema-panel-gradient-fill .irema-gradient-controls{
  display:flex;
  flex-direction:column;
  gap:12px;
}

irema-element-toolbar .irema-panel-gradient-fill .irema-gradient-control-row{
  display:grid;
  grid-template-columns:120px minmax(0,1fr);
  gap:12px;
  align-items:center;
  width:100%;
  box-sizing:border-box;
}

irema-element-toolbar .irema-panel-gradient-fill .irema-gradient-control-label{
  color:var(--irema-primary-color,#485563);
  font-size:12px;
  white-space:nowrap;
}

/* Same slider geometry used by Pattern. */
irema-element-toolbar .irema-panel-gradient-fill .irema-gradient-range-control{
  display:grid;
  grid-template-columns:minmax(80px,1fr) 48px;
  gap:10px;
  align-items:center;
  min-width:0;
}

irema-element-toolbar .irema-panel-gradient-fill .irema-gradient-range-control input[type="range"]{
  width:100%;
  min-width:0;
  accent-color:var(--irema-secondary-color,#029EEB);
}

irema-element-toolbar .irema-panel-gradient-fill .irema-gradient-range-control output{
  color:var(--irema-primary-color,#485563);
  font-size:12px;
  text-align:right;
  white-space:nowrap;
}

irema-element-toolbar .irema-panel-gradient-fill .irema-gradient-remove{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:34px;
  padding:5px 15px;
  margin:2px 0 0;
  border:0;
  border-radius:var(--irema-border-radius,6px);
  background:var(--irema-secondary-color,#029EEB);
  color:var(--irema-secondary-fg-color,#fff);
  font-size:14px;
  font-weight:400;
  line-height:24px;
  text-transform:uppercase;
  cursor:pointer;
  transition:all .2s ease-out;
  box-shadow:none;
}

irema-element-toolbar .irema-panel-gradient-fill .irema-gradient-remove:hover{opacity:.8}
irema-element-toolbar .irema-panel-gradient-fill .irema-gradient-remove:disabled{opacity:.4;cursor:default}
irema-element-toolbar .irema-panel-gradient-fill .irema-gradient-remove:focus-visible{
  outline:2px solid var(--irema-secondary-color,#029EEB);
  outline-offset:2px;
}

irema-element-toolbar .irema-panel-gradient-fill .irema-gradient-empty{
  padding:8px 0 14px;
  color:var(--irema-dark-grey-color,#989898);
  font-size:12px;
}

@media (max-width:1024px) and (orientation:portrait), (max-height:599px) and (hover:none) and (pointer:coarse){
  irema-element-toolbar .irema-panel-gradient-fill .irema-gradient-control-row{
    grid-template-columns:105px minmax(0,1fr);
  }
}


/* IREMA 1.7.388 — Gradient toolbar/sidebar layout polish.
   Mainbar toolbars (shortcode + lightbox) need enough width for "Degradado"
   and gradient controls should follow the palette instead of stretching to the
   bottom of the panel. */
irema-main-bar > irema-element-toolbar > .irema-tools-nav > div .irema-label{
  white-space:nowrap;
  text-align:center;
}

irema-element-toolbar .irema-panel-gradient-fill .irema-gradient-library.irema-scroll-area{
  height:auto;
  min-height:0;
  flex:0 0 auto;
  overflow:visible;
  margin-bottom:12px;
}

irema-element-toolbar .irema-panel-gradient-fill .irema-gradient-controls{
  flex:0 0 auto;
  margin-top:0;
  padding-right:10px;
}

irema-element-toolbar .irema-panel-gradient-fill .irema-gradient-range-control{
  padding-right:2px;
}

/* IREMA 1.7.389 — Lightbox MainBar gradient sliders.
   Stack label above the range/value row so the slider can use the full panel width. */
.irema-modal-product-designer irema-main-bar irema-element-toolbar .irema-panel-gradient-fill .irema-gradient-control-row{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:5px;
}

.irema-modal-product-designer irema-main-bar irema-element-toolbar .irema-panel-gradient-fill .irema-gradient-control-label{
  display:block;
  width:100%;
}

.irema-modal-product-designer irema-main-bar irema-element-toolbar .irema-panel-gradient-fill .irema-gradient-range-control{
  width:100%;
  grid-template-columns:minmax(0,1fr) 42px;
  gap:8px;
  padding-right:4px;
  box-sizing:border-box;
}