/* One typography system for Quill and all three storefront descriptions. */
.ql-editor.itd-rich-content {
  box-sizing: border-box;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  line-height: 1.65;
  color: #3f3f46;
  text-align: left;
  white-space: pre-wrap;
  word-break: normal;
  overflow-wrap: anywhere;
  hyphens: none;
  padding: 12px 15px;
}
.ql-editor.itd-rich-content:not([contenteditable="true"]) {
  height: auto;
  min-height: 0;
  overflow: visible;
}
.ql-editor.itd-rich-content p { margin: 0 0 0.65rem; }
.ql-editor.itd-rich-content > :last-child { margin-bottom: 0; }
.ql-editor.itd-rich-content h1 { font-size: 1.5rem; font-weight: 700; line-height: 1.3; margin: 0.75rem 0 0.5rem; }
.ql-editor.itd-rich-content h2 { font-size: 1.25rem; font-weight: 700; line-height: 1.3; margin: 0.65rem 0 0.4rem; }
.ql-editor.itd-rich-content h3 { font-size: 1.1rem; font-weight: 700; line-height: 1.35; margin: 0.6rem 0 0.35rem; }
.ql-editor.itd-rich-content > :is(h1, h2, h3):first-child { margin-top: 0; }
.ql-editor.itd-rich-content strong, .ql-editor.itd-rich-content b { font-weight: 600; }
.ql-editor.itd-rich-content ul, .ql-editor.itd-rich-content ol { margin: 0 0 0.75rem; }
.ql-editor.itd-rich-content li { margin-bottom: 0.25rem; }
.ql-editor.itd-rich-content a { color: #2563eb; text-decoration: underline; overflow-wrap: anywhere; }
.ql-editor.itd-rich-content a:hover { color: #1d4ed8; }
.ql-editor.itd-rich-content img { display: inline-block; max-width: 100%; height: auto; margin: 0.5rem 0; vertical-align: middle; }
.ql-editor.itd-rich-content::after { content: ''; display: table; clear: both; }
.ql-editor.itd-rich-content img[data-itd-image-layout="inline"] { float: none; display: inline-block; margin: 0.25rem 0.35rem; }
.ql-editor.itd-rich-content img[data-itd-image-layout="block"] { float: none; display: block; clear: both; margin: 0.5rem 0; }
.ql-editor.itd-rich-content img[data-itd-image-layout="block"][data-itd-image-align="center"] { margin-left: auto; margin-right: auto; }
.ql-editor.itd-rich-content img[data-itd-image-layout="block"][data-itd-image-align="right"] { margin-left: auto; }
.ql-editor.itd-rich-content img[data-itd-image-layout="wrap-left"] { float: left; display: block; max-width: calc(100% - 1rem) !important; margin: 0.25rem 1rem 0.65rem 0; }
.ql-editor.itd-rich-content img[data-itd-image-layout="wrap-right"] { float: right; display: block; max-width: calc(100% - 1rem) !important; margin: 0.25rem 0 0.65rem 1rem; }
/* On phones keep enough room for text instead of a narrow column beside a photo. */
@media (max-width: 480px) {
  .ql-editor.itd-rich-content img:is([data-itd-image-layout="wrap-left"], [data-itd-image-layout="wrap-right"]) {
    float: none; clear: both; max-width: 100% !important; margin: 0.5rem auto;
  }
}
.ql-editor.itd-rich-content blockquote { border-left: 4px solid #3b82f6; padding-left: 1rem; margin: 0.5rem 0; color: #52525b; }
.ql-editor.itd-rich-content hr { border: 0; border-top: 2px solid #cbd5e1; margin: 1.5rem 0; height: 0; }
.ql-editor.itd-rich-content pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.ql-editor.itd-rich-content table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.ql-editor.itd-rich-content .anchor-point { display: block; height: 0; visibility: hidden; scroll-margin-top: 80px; }

/* The panel lives outside the editor so none of its UI is saved as content. */
#quill-img-frame, #quill-img-panel { display: none; position: fixed; }
#quill-img-frame.is-open, #quill-img-panel.is-open { display: block; }
#quill-img-frame { z-index: 100001; border: 2px solid #2563eb; border-radius: 4px; pointer-events: none; }
#quill-img-panel {
  z-index: 100002;
  max-width: calc(100vw - 16px);
  padding: 8px;
  color: #18181b;
  background: #fff;
  border: 1px solid #d4d4d8;
  border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  font: 12px/1.4 'Inter', sans-serif;
}
#quill-img-panel .qip-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
#quill-img-panel .qip-row + .qip-row { margin-top: 6px; }
#quill-img-panel .qip-label { width: 52px; font-weight: 600; color: #71717a; }
#quill-img-panel button { min-height: 32px; padding: 4px 7px; background: #f4f4f5; border: 1px solid #e4e4e7; border-radius: 6px; cursor: pointer; }
#quill-img-panel button:is(:hover, :focus-visible) { border-color: #2563eb; outline: 2px solid #bfdbfe; }
#quill-img-panel button.is-active { background: #2563eb; border-color: #2563eb; color: white; }
#quill-img-panel .qip-danger { color: #b91c1c; }
#quill-img-percent { flex: 1; min-width: 100px; height: 32px; accent-color: #2563eb; cursor: pointer; }
#quill-img-percent-value { min-width: 42px; text-align: right; font-weight: 600; }
.quill-fs-actions { display: none; }
.quill-fullscreen-mode .quill-fs-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; flex-shrink: 0; padding: 8px 0 0; }
.quill-fs-actions button { min-height: 40px; padding: 8px 14px; border-radius: 8px; background: #e4e4e7; color: #27272a; font-size: 12px; font-weight: 700; cursor: pointer; }
.quill-fs-actions button[data-action="quill-fs-save"] { background: #2563eb; color: white; }
.quill-fs-actions button:disabled { opacity: 0.6; cursor: wait; }
.quill-fs-actions button:focus-visible { outline: 3px solid #93c5fd; outline-offset: 2px; }
@media (pointer: coarse) { #quill-img-panel button { min-height: 44px; } }