.hb-responsive__desktop {
  display: block;
}

.hb-responsive__mobile {
  display: none;
}

@media (max-width: 767px) {
  [style*="--hb-section-radius-mobile:"] {
    --hb-section-radius: var(--hb-section-radius-mobile) !important;
    --hb-section-radius-current-tl: var(--hb-section-radius-mobile-tl);
    --hb-section-radius-current-tr: var(--hb-section-radius-mobile-tr);
    --hb-section-radius-current-br: var(--hb-section-radius-mobile-br);
    --hb-section-radius-current-bl: var(--hb-section-radius-mobile-bl);
  }

  .hb-responsive__desktop {
    display: none !important;
  }

  .hb-responsive__mobile {
    display: block;
  }
}

.hb-responsive-editor-note {
  margin: 0 0 12px;
}

/* Section corner settings are integer pixels: retain square corners (0),
   normalize every rounded corner to 20px. These variables are consumed only
   by the outer block element in borders.php, never by cards or form fields. */
@media (max-width: 760px) {
  [style*="--hb-section-radius-mobile:"] {
    --hb-mobile-rounded-tl: clamp(0px, calc(var(--hb-section-radius-tl-override, var(--hb-section-radius-current-tl, var(--hb-section-radius-mobile-tl, 0px))) * 1000), 20px);
    --hb-mobile-rounded-tr: clamp(0px, calc(var(--hb-section-radius-tr-override, var(--hb-section-radius-current-tr, var(--hb-section-radius-mobile-tr, 0px))) * 1000), 20px);
    --hb-mobile-rounded-br: clamp(0px, calc(var(--hb-section-radius-br-override, var(--hb-section-radius-current-br, var(--hb-section-radius-mobile-br, 0px))) * 1000), 20px);
    --hb-mobile-rounded-bl: clamp(0px, calc(var(--hb-section-radius-bl-override, var(--hb-section-radius-current-bl, var(--hb-section-radius-mobile-bl, 0px))) * 1000), 20px);
  }
}

.hb-responsive-spacing-controls {
  margin: 16px 0;
  padding: 14px 0;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}

.hb-responsive-spacing-controls > strong {
  display: block;
  margin-bottom: 12px;
}

.hb-synced-pattern-local-inspector {
  border-top: 1px solid #e0e0e0;
}

/* Shared tooltip presentation; per-block variables are emitted by responsive.php. */
.hb-universal-tool{position:relative;display:inline-flex;vertical-align:middle;margin:0 4px;transform:translate(var(--hb-tool-x),var(--hb-tool-y))}.hb-universal-tool__button{display:inline-flex;align-items:center;justify-content:center;width:var(--hb-tool-size);height:var(--hb-tool-size);padding:0;border:var(--hb-tool-border) solid var(--hb-tool-border-color);border-radius:var(--hb-tool-radius);background:var(--hb-tool-bg);color:var(--hb-tool-color);font:400 var(--hb-tool-plus)/1 Arial,sans-serif;cursor:pointer}.hb .hb-universal-tool__button{box-sizing:border-box;min-width:0;width:var(--hb-tool-size);height:var(--hb-tool-size);padding:0;border:var(--hb-tool-border) solid var(--hb-tool-border-color);border-radius:var(--hb-tool-radius);background:var(--hb-tool-bg);color:var(--hb-tool-color);font:400 var(--hb-tool-plus)/1 Arial,sans-serif}.hb-universal-tool__tip{position:fixed;z-index:100000;display:none;width:var(--hb-tip-width);max-width:calc(100vw - 24px);box-sizing:border-box;padding:var(--hb-tip-padding);transform:none;border:var(--hb-tip-border) solid var(--hb-tip-border-color);border-radius:var(--hb-tip-radius);background:var(--hb-tip-bg);color:var(--hb-tip-color);box-shadow:0 12px 36px rgba(0,0,0,.18);font:var(--hb-tip-weight) var(--hb-tip-size)/1.4 var(--hb-tip-family),Arial,sans-serif;text-align:var(--hb-tip-align);text-transform:none!important;letter-spacing:normal!important;white-space:normal}.hb-universal-tool.is-open .hb-universal-tool__tip{display:block}
.hb-tooltip-viewport{position:fixed;z-index:100000;box-sizing:border-box;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow-y:auto;padding:var(--hb-tip-padding);border:var(--hb-tip-border) solid var(--hb-tip-border-color);border-radius:var(--hb-tip-radius);background:var(--hb-tip-bg);color:var(--hb-tip-color);box-shadow:0 12px 36px rgba(0,0,0,.18);font:var(--hb-tip-weight) var(--hb-tip-size)/1.4 var(--hb-tip-family),Arial,sans-serif;text-align:var(--hb-tip-align);text-transform:none!important;letter-spacing:normal!important;white-space:normal}

@media (max-width: 760px) {
  .hb-universal-tool__button {
    height: 16px !important;
    width: 16px !important;
  }
  .hb-universal-tool {
    transform: translate(0, -4px) !important;
  }
  .hb-quiz .hb-universal-tool {
    transform: translate(0, -1px) !important;
  }
}