/* Studio 2.1 */
[hidden] {
  display: none !important;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
.pro-block {
  --t-size: initial;
  --p-size: initial;
  --t-font: initial;
  --p-font: initial;
  --t-align: initial;
  --p-align: initial;
  --t-color: initial;
  --p-color: initial;
  --t-width: initial;
  --p-width: initial;
  --t-bg: initial;
  --p-bg: initial;
  --t-pad: initial;
  --p-pad: initial;
}
.pro-block > h2 {
  max-width: none !important;
  width: 100%;
  margin-left: 0 !important;
  margin-right: 0 !important;
  text-align: inherit !important;
  color: inherit !important;
  font-size: var(--size, 32px) !important;
  font-family: var(--bheading, var(--heading-font)) !important;
}
.heading-text {
  font: inherit;
  color: inherit;
}
.pro-block h2 > i {
  font-size: 0.85em;
  vertical-align: baseline;
}
.icon-divider {
  display: flex;
  align-items: center;
  gap: 16px;
  justify-content: center;
}
.icon-divider hr {
  flex: 1;
  width: auto;
}
.icon-divider i {
  font-size: 1.4em;
}
.block-grid > .pro-grid {
  grid-template-columns: var(--grid);
  align-items: stretch;
}
.block-grid > .pro-grid > .pro-block {
  height: auto;
}
.brand-group,
.social-links {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.social-links a {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: inherit;
  border-radius: 50%;
  text-decoration: none;
}
.social-links a:hover {
  background: #7487a322;
}
.site-search {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
}
.site-search label {
  margin: 0;
}
.site-search input {
  min-width: 0;
  width: 150px;
  margin: 0;
}
.site-search button {
  padding: 9px 12px;
}
.site-with-widgets {
  display: grid;
  gap: 24px;
  max-width: var(--content-width);
  margin: auto;
  align-items: start;
}
.site-with-widgets.has-left {
  grid-template-columns: 260px minmax(0, 1fr);
}
.site-with-widgets.has-right {
  grid-template-columns: minmax(0, 1fr) 260px;
}
.site-with-widgets.has-left.has-right {
  grid-template-columns: 230px minmax(0, 1fr) 230px;
}
.site-with-widgets > .public-main {
  min-width: 0;
  width: 100%;
}
.widget-sidebar {
  padding: 24px 0;
  min-width: 0;
}
.site-widget {
  padding: 18px;
  margin-bottom: 20px;
  border: 1px solid #dde4ed;
  border-radius: 12px;
  overflow-wrap: anywhere;
}
.site-widget h2 {
  font-size: 20px;
}
.site-widget iframe {
  width: 100%;
  border: 0;
}
.site-widget img {
  max-width: 100%;
}
.search-results {
  padding: 32px;
}
.search-results > article {
  margin: 24px 0;
}
.search-results .product {
  max-width: 420px;
}
.product {
  position: relative;
  overflow: hidden;
}
.sale-badge {
  position: absolute;
  top: 12px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: 72px;
  height: 72px;
  background: #d92d48;
  color: white;
  box-shadow: 0 6px 18px #6f112455;
  font-size: 22px;
  font-weight: 800;
  line-height: 1.2;
}
.sale-badge.right {
  right: 12px;
}
.sale-badge.left {
  left: 12px;
}
.sale-badge small {
  font-size: 9px;
  letter-spacing: 0.1em;
}
.product:has(.sale-badge) strong {
  color: #c51c3b;
}
.product del {
  display: block;
  color: #64748b;
}
.product-description {
  padding: 24px;
}
.product-description img {
  max-width: 100%;
}
.admin {
  background: #f2f5fa;
  color: #18243b;
}
.admin-layout > .sidebar {
  background: #111d35;
  border: 0;
}
.admin .sidebar a,
.admin .sidebar button {
  border-radius: 9px;
}
.admin .main,
.admin .workspace {
  padding: 24px;
  min-width: 0;
}
.admin h1 {
  font-size: 27px;
  line-height: 1.2;
}
.admin .view-heading {
  margin-bottom: 20px;
}
.admin .view-heading p {
  font-size: 14px;
  max-width: 80ch;
}
.admin .list-row {
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 8px;
}
.admin input,
.admin textarea,
.admin select {
  padding: 9px 11px;
}
.admin label {
  gap: 5px;
  font-size: 12px;
}
.admin .form-grid {
  gap: 14px;
}
.admin dialog {
  max-height: 90dvh;
  width: min(960px, 94vw);
  border: 1px solid #dbe3ef;
  border-radius: 18px;
  box-shadow: 0 20px 100px #102a4444;
}
.admin dialog .modal-content {
  max-height: calc(90dvh - 80px);
  overflow: auto;
}
.studio-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px;
  background: #edf2f8;
  border-radius: 10px;
  position: sticky;
  top: 0;
  z-index: 7;
}
.studio-tabs button {
  font-size: 12px;
  padding: 8px 10px;
}
.studio-tabs button.active,
.studio-tabs button[aria-selected="true"] {
  background: #2459ed;
  color: white;
}
.editor-workspace {
  padding: 0 !important;
}
.editor-top {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 64px;
  padding: 10px 16px !important;
  background: #fff;
  border-bottom: 1px solid #dbe3ef;
}
.editor-top button {
  font-size: 12px;
  padding: 8px 10px;
}
.editor-layout {
  height: calc(100dvh - 86px);
  grid-template-columns: 220px minmax(0, 1fr) 310px !important;
  overflow: hidden;
}
.canvas-stage {
  overflow: auto;
  min-width: 0;
  padding: 30px !important;
  background-color: #e8edf4;
  background-image: radial-gradient(#b7c6d7 1px, transparent 1px);
  background-size: 16px 16px;
}
.block-library,
.inspector {
  height: 100%;
  overflow: auto;
  padding: 14px !important;
  background: #fff;
  border-color: #dbe3ef !important;
}
.block-choice {
  font-size: 12px;
  padding: 10px !important;
}
.inspector > h3 {
  font-size: 14px;
  margin: 0 0 12px;
}
.inspector-panel {
  padding: 12px 0;
}
.inspector-panel > .field,
.inspector-panel > label {
  margin-bottom: 14px;
}
.inspector-panel > details {
  padding: 8px;
  border: 1px solid #dde4ed;
  border-radius: 8px;
}
.inspector-panel h4 {
  font-size: 13px;
  margin: 12px 0;
}
.quick-add {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px;
  background: #f4f7fb;
  border-radius: 10px;
}
.quick-add h4 {
  width: 100%;
}
.column-add {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  padding: 10px;
  border: 1px dashed #a8b9cf;
  background: #edf4ffdd;
  position: relative;
  margin-top: 14px;
  color: #2459ed;
  z-index: 4;
}
.column-add small {
  width: 100%;
  font: 11px system-ui;
}
.column-add button {
  font: 11px system-ui;
  padding: 5px 7px;
}
.editable-node:has(> .column-add) {
  padding-bottom: 12px !important;
  min-height: 100px;
}
.node-tools {
  z-index: 9 !important;
  font: 11px system-ui;
}
.editable-node > .rich-html[contenteditable] {
  outline: none;
  min-height: 45px;
}
.editable-node > .rich-html[contenteditable]:focus {
  box-shadow: 0 0 0 2px #2459ed66;
}
.image-resize-handle {
  position: absolute;
  bottom: 8px;
  right: 8px;
  z-index: 8;
  cursor: ew-resize;
  padding: 4px 10px;
  background: #2459ed;
  color: #fff;
}
.icon-control {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 10px;
  border: 1px solid #dde4ed;
  border-radius: 10px;
  margin-bottom: 14px;
}
.icon-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(85px, 1fr));
  gap: 8px;
  max-height: 55vh;
  overflow: auto;
  margin-top: 12px;
}
.icon-choice {
  min-height: 82px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: #f1f5fa;
  color: #18243b;
  border: 1px solid #dde4ed;
}
.icon-choice i {
  font-size: 23px;
}
.icon-choice small {
  font-size: 9px;
  max-width: 100%;
  overflow: hidden;
}
.html-source {
  width: 100%;
  min-height: 340px;
  font:
    13px/1.6 ui-monospace,
    monospace;
  background: #10203a;
  color: #dbeafe;
  padding: 16px;
}
.product-tab {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.product-tab > .variant-editor {
  grid-column: 1/-1;
}
.settings-tabs {
  margin-bottom: 18px;
}
.settings-panel {
  padding: 16px;
  border: 1px solid #dbe3ef;
  background: #fff;
  border-radius: 12px;
}
.settings-panel > .form-grid {
  margin: 0;
}
.settings-form > button[type="submit"] {
  position: sticky;
  bottom: 12px;
  z-index: 10;
  box-shadow: 0 5px 20px #18243b33;
}
.widget-card {
  padding: 14px;
  border: 1px solid #dbe3ef;
  border-radius: 10px;
  margin: 12px 0;
}
.widget-card summary {
  cursor: pointer;
  font-weight: 700;
  padding: 4px;
}
.widget-card > .form-grid {
  margin-top: 16px;
}
.widget-card fieldset {
  max-height: 190px;
  overflow: auto;
}
.widget-card fieldset label {
  display: inline-flex;
  margin: 6px 12px 6px 0;
}
.media-grid .media-card .toolbar {
  gap: 4px;
}
.media-grid .media-card button {
  font-size: 11px;
  padding: 7px;
}
.admin .data-table-wrap {
  overflow: auto;
  max-height: 65vh;
}
@media (max-width: 1100px) {
  .editor-layout {
    grid-template-columns: 165px minmax(0, 1fr) 260px !important;
  }
  .editor-top {
    flex-wrap: wrap;
  }
  .site-with-widgets.has-left.has-right {
    grid-template-columns: 190px minmax(0, 1fr) 190px;
  }
}
@media (max-width: 780px) {
  .site-with-widgets.has-left,
  .site-with-widgets.has-right,
  .site-with-widgets.has-left.has-right {
    display: flex;
    flex-direction: column;
    padding: 0 12px;
  }
  .site-with-widgets > .public-main {
    order: 0;
  }
  .widget-sidebar {
    order: 1;
    width: 100%;
  }
  .editor-layout {
    height: auto;
    min-height: 75vh;
    grid-template-columns: 1fr !important;
    overflow: visible;
  }
  .block-library {
    height: auto;
    max-height: 220px;
  }
  .inspector {
    height: auto;
    max-height: 70vh;
  }
  .canvas-stage {
    min-height: 400px;
  }
  .product-tab {
    grid-template-columns: 1fr;
  }
  .brand-group {
    justify-content: center;
  }
  .site-search input {
    width: 130px;
  }
  .sale-badge {
    width: 60px;
    height: 60px;
    font-size: 18px;
  }
}
.canvas.phone .block-grid > .pro-grid {
  grid-template-columns: 1fr !important;
}
@media (max-width: 640px) {
  .block-grid > .pro-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Prevent responsive overrides leaking from parent blocks into nested cells. */
.pro-block {
  --d-pad: initial;
  --d-pt: initial;
  --d-pr: initial;
  --d-pb: initial;
  --d-pl: initial;
  --d-mt: initial;
  --d-mb: initial;
  --d-size: initial;
  --d-gap: initial;
  --d-radius: initial;
  --d-height: initial;
  --d-width: initial;
  --d-bg: initial;
  --d-color: initial;
  --d-align: initial;
  --d-lh: initial;
  --d-font: initial;
  --d-display: initial;
  --d-shadow: initial;
  --t-pad: initial;
  --t-pt: initial;
  --t-pr: initial;
  --t-pb: initial;
  --t-pl: initial;
  --t-mt: initial;
  --t-mb: initial;
  --t-size: initial;
  --t-gap: initial;
  --t-radius: initial;
  --t-height: initial;
  --t-width: initial;
  --t-bg: initial;
  --t-color: initial;
  --t-align: initial;
  --t-lh: initial;
  --t-font: initial;
  --t-display: initial;
  --t-shadow: initial;
  --p-pad: initial;
  --p-pt: initial;
  --p-pr: initial;
  --p-pb: initial;
  --p-pl: initial;
  --p-mt: initial;
  --p-mb: initial;
  --p-size: initial;
  --p-gap: initial;
  --p-radius: initial;
  --p-height: initial;
  --p-width: initial;
  --p-bg: initial;
  --p-color: initial;
  --p-align: initial;
  --p-lh: initial;
  --p-font: initial;
  --p-display: initial;
  --p-shadow: initial;
}