/* EPO font / color sections */

/*
 * FlyingPress “Delay All JS” FOUC guard:
 * Hide raw tall Farve/Skrifttype (and Egen farve) until text-overlay.js
 * builds the Personlig tekst card and sets body.aip-text-ui-ready.
 * Navn stays visible. Do NOT hide parent :has() wrappers — that ate Navn.
 */
body.aip-product-page:not(.aip-text-ui-ready) .cpf-section.aip-text-font,
body.aip-product-page:not(.aip-text-ui-ready) .cpf-section.aip-text-color,
body.aip-product-page:not(.aip-text-ui-ready) .cpf-section.aip-text-color-hex,
body.aip-product-page:not(.aip-text-ui-ready) .cpf-type-textfield.aip-text-color-hex,
body.aip-product-page:not(.aip-text-ui-ready) .cpf-section.aip-text-color-hex-native,
body.aip-product-page:not(.aip-text-ui-ready) .aip-text-color-hex-native {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
}

/* —— Personlig tekst card (UI-only; EPO fields unchanged) —— */
/* Must span full EPO fields row (wrap is a bare div, not .cpf-section). */
#tm-extra-product-options .aip-style-extras.aip-personal-text,
.tm-extra-product-options-fields > .aip-style-extras.aip-personal-text,
.aip-style-extras.aip-personal-text {
  grid-column: 1 / -1;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0.5rem 0 1rem;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 1rem 1rem 1.05rem;
  border: 1px solid #2f6b52;
  border-radius: 10px;
  background: #e8f3ee;
  clear: both;
  box-sizing: border-box;
}

/* Amber tip when typing name before an AI poster exists (same family as køn-upload notice). */
.aip-text-need-poster-notice {
  display: block;
  width: 100%;
  margin: 0 0 0.65rem;
  padding: 0.7rem 0.85rem;
  border-radius: 10px;
  border: 1px solid #e0b44a;
  background: #fff8e8;
  color: #5c4508;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
  box-sizing: border-box;
}

.aip-text-need-poster-notice.aip-hide {
  display: none !important;
}

.aip-personal-text__head {
  margin: 0 0 0.65rem;
}

.aip-personal-text__title {
  margin: 0 0 0.2rem;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: #1a1a1a;
}

.aip-personal-text__hint {
  margin: 0;
  font-size: 0.84rem;
  font-weight: 400;
  line-height: 1.35;
  color: #4a5560;
}

.aip-personal-text__name {
  margin: 0 0 0.75rem;
}

/* Card title replaces the EPO “Navn” label. */
.aip-personal-text__name .tc-epo-label,
.aip-personal-text__name .tm-epo-element-label,
.aip-personal-text__name .tc-cell.tc-epo-label {
  display: none !important;
}

.aip-personal-text__name .tmcp-field-wrap-inner,
.aip-personal-text__name .tc-element-container {
  margin: 0;
}

.aip-personal-text__name input.tmcp-textfield,
.aip-personal-text__name input[type='text'] {
  width: 100%;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #cfd6d2;
  border-radius: 8px;
}

/* Keep the card tight like the mock (char counter lives under field only when needed). */
.aip-personal-text__name .tc-chars {
  display: none;
}

.aip-style-extras.aip-personal-text .aip-style-extras__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: 100%;
  margin: 0.15rem 0 0;
  padding: 0.72rem 1rem;
  border: 0;
  border-radius: 8px;
  background: #1f6b52;
  color: #fff;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: none;
  text-align: center;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.15s ease, filter 0.15s ease;
}

.aip-style-extras.aip-personal-text .aip-style-extras__toggle:hover,
.aip-style-extras.aip-personal-text .aip-style-extras__toggle:focus {
  background: #185a44;
  color: #fff;
}

.aip-style-extras.aip-personal-text.is-open .aip-style-extras__toggle {
  background: #185a44;
  color: #fff;
}

.aip-style-extras.aip-personal-text .aip-style-extras__toggle:focus-visible {
  outline: 2px solid #0f3d2e;
  outline-offset: 2px;
}

.aip-style-extras__toggle-label {
  flex: 0 1 auto;
  min-width: 0;
  color: inherit;
}

.aip-style-extras__chevron {
  flex: 0 0 auto;
  width: 0.45rem;
  height: 0.45rem;
  margin-left: 0.15rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.12rem) rotate(45deg);
  transition: transform 0.15s ease;
}

.aip-style-extras.aip-personal-text.is-open .aip-style-extras__chevron {
  transform: translateY(0.12rem) rotate(-135deg);
}

.aip-style-extras__body {
  padding: 0.9rem 0 0.15rem;
}

.aip-style-extras__body[hidden] {
  display: none !important;
}

/* Char / glyph validation — full width UNDER the name field (never beside input). */
.aip-text-name .tmcp-field-wrap > .aip-text-char-error,
.cpf-section.aip-text-name .tmcp-field-wrap > .aip-text-char-error,
.aip-text-char-error {
  display: none;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  flex: none;
  clear: both;
  margin: 0.5rem 0 0;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  background: linear-gradient(180deg, #fff8f7 0%, #fff1ef 100%);
  border: 1px solid #efc4be;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset;
  color: #7a2e28;
  font-size: 0.875rem;
  line-height: 1.4;
  letter-spacing: 0.01em;
}
.aip-text-char-error.is-visible {
  display: block;
}
.cpf-section.aip-text-name.aip-has-char-error .tm-error,
.aip-text-name.aip-has-char-error .tm-error,
.aip-text-name.aip-has-char-error .tc-error {
  display: none !important;
}

.aip-text-font-abc {
  width: 80px;
  height: 36px;
  max-width: 100%;
  max-height: 2.75rem;
  display: block;
  object-fit: contain;
  pointer-events: none;
}

.aip-text-font-epo .tmcp-ul-wrap,
.aip-text-font-epo .tm-extra-product-options-radio,
.aip-text-font-epo ul.tmcp-elements {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 2px !important;
  row-gap: 2px !important;
  column-gap: 2px !important;
  --tc-gap: 2px;
  --tcgapcolumn: 2px;
  --tcgaprow: 2px;
  --tcinnergap: 0px;
  justify-content: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
}

.aip-text-font-epo .tmcp-field-wrap,
.aip-text-font-epo li.tmcp-field-wrap {
  margin: 0 !important;
  padding: 0 !important;
  max-width: none !important;
  width: auto !important;
  flex: none !important;
  -ms-flex: none !important;
  line-height: 0 !important;
  min-height: 0 !important;
}

/* Hide EPO label chrome — empty .tc-label-wrap still ate ~22px + --tcinnergap. */
.aip-text-font-epo .tc-label-wrap,
.aip-text-font-epo .tc-label-text,
.aip-text-font-epo .tm-label,
.aip-text-font-epo .tc-price-wrap,
.aip-text-font-epo .tm-epo-style,
.aip-text-font-epo .tc-epo-style-wrapper,
.aip-text-font-epo .tc-input-wrap {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
}

.aip-text-font-epo .tm-epo-field-label,
.aip-text-font-epo .tc-field-label-wrap,
.aip-text-font-epo .tmcp-field-wrap-inner {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  --tcinnergap: 0px;
  line-height: 0 !important;
}

.aip-text-font-epo .aip-text-font-preview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #c8c8c8;
  border-radius: 4px;
  background: #fff;
  padding: 0.1rem;
  min-height: 2.4rem;
  width: 100%;
  box-sizing: border-box;
  line-height: normal;
}

.aip-text-font-epo .aip-text-font-choice.is-active .aip-text-font-preview,
.aip-text-font-epo .tc-active .aip-text-font-preview {
  border-color: #459577;
  box-shadow: inset 0 0 0 1px #459577;
  background: #f3faf7;
}

/* TEMP: font trim review dots (admin) — disabled for now.
.aip-text-font-epo .aip-font-review-dot {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
  pointer-events: none;
  z-index: 2;
}
*/

.aip-text-color-epo .tmcp-ul-wrap {
  display: flex !important;
  flex-wrap: wrap;
  align-items: flex-start !important;
  gap: 0.35rem 0.4rem;
  margin-bottom: 0 !important;
}

/* Plugin palette: must beat .tmcp-ul-wrap flex + margin-bottom:0 above. */
.aip-text-color-epo .aip-text-palette-fallback.tmcp-ul-wrap,
.aip-style-extras__body .aip-text-palette-fallback.tmcp-ul-wrap {
  --aip-swatch-track: 2.05rem;
  display: grid !important;
  /* Fixed circle size; as many columns as fit. Gap like earlier (not touching). */
  grid-template-columns: repeat(auto-fill, var(--aip-swatch-track));
  justify-content: space-between;
  align-items: start;
  justify-items: stretch;
  column-gap: 0.45rem;
  row-gap: 0.45rem;
  width: 100% !important;
  margin: 0 0 0.9rem !important;
  padding: 0 !important;
  box-sizing: border-box;
}

.aip-text-color-epo .tmcp-field-wrap {
  margin: 0 !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  width: auto !important;
  align-self: flex-start !important;
}

.aip-text-color-epo .tc-label-text,
.aip-text-color-epo .tm-label,
.aip-text-color-epo .tc-price-wrap,
.aip-text-color-epo .tm-epo-style {
  display: none !important;
}

/*
 * Text-color swatches fill card width.
 * Selected = white gap + dark green ring (readable on mint card + light/dark fills).
 */
.aip-text-color-epo .aip-text-swatch-epo,
.aip-text-color-epo .tmhexcolorimage,
.aip-text-color-epo .tc-image {
  display: block !important;
  width: var(--aip-swatch-size, 34px) !important;
  height: var(--aip-swatch-size, 34px) !important;
  min-width: var(--aip-swatch-size, 34px) !important;
  min-height: var(--aip-swatch-size, 34px) !important;
  max-width: var(--aip-swatch-size, 34px) !important;
  max-height: var(--aip-swatch-size, 34px) !important;
  aspect-ratio: 1 / 1 !important;
  flex: 0 0 var(--aip-swatch-size, 34px) !important;
  border-radius: 50% !important;
  border: 2px solid transparent !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  overflow: hidden !important;
  background-clip: padding-box;
  box-shadow: #c8c8c8 0 0 0 1px;
}

.aip-text-color-epo .tc-active .aip-text-swatch-epo,
.aip-text-color-epo .aip-text-color-choice.is-active .aip-text-swatch-epo,
.aip-text-color-epo .tc-active .tmhexcolorimage,
.aip-text-color-epo .tc-active .tc-image,
.aip-text-palette-fallback__swatch.is-active {
  border-color: transparent !important;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 4px #1f6b52 !important;
  outline: none !important;
}

.aip-text-palette-fallback__swatch {
  appearance: none !important;
  -webkit-appearance: none !important;
  margin: 0 !important;
  cursor: pointer;
  line-height: 0 !important;
  font-size: 0 !important;
  background-image: none !important;
}

/* Beat fixed --aip-swatch-size on .aip-text-swatch-epo so grid cells control size. */
.aip-text-color-epo .aip-text-palette-fallback__swatch.aip-text-swatch-epo {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: none !important;
  aspect-ratio: 1 / 1 !important;
  flex: none !important;
  border-radius: 50% !important;
}

/* Hide native EPO hex field — plugin panel owns the UX; value still syncs for cart/order. */
.aip-text-color-hex-native,
.aip-text-color-hex-native.tmcp-field-wrap,
.cpf-section.aip-text-color-hex-native,
.cpf-section .aip-text-color-hex-native,
.aip-text-color-epo .aip-text-color-hex-native,
.aip-style-extras__body .cpf-section.aip-text-color-hex-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  pointer-events: none !important;
  visibility: hidden !important;
}

.aip-text-color-custom {
  width: 100%;
  margin-top: 0;
  clear: both;
}

.aip-text-color-custom__btn {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.45rem;
  width: auto;
  max-width: 100%;
  min-height: 2.2rem;
  padding: 0.35rem 0.65rem 0.35rem 0.4rem;
  border: 1.5px solid #459577;
  border-radius: 8px;
  background: #fff;
  color: #222;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  line-height: 1.2;
  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.aip-text-color-custom__btn-swatch {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  border: none;
  box-shadow: none;
  background: conic-gradient(
    from 180deg,
    #ff3b30,
    #ff9500,
    #ffcc00,
    #34c759,
    #007aff,
    #5856d6,
    #af52de,
    #ff3b30
  );
  box-sizing: border-box;
}

.aip-text-color-custom__btn-label {
  flex: 0 1 auto;
  white-space: nowrap;
}

.aip-text-color-custom__btn-chevron {
  flex: none;
  width: 0.65rem;
  height: 0.65rem;
  margin-left: 0;
  color: #459577;
  transition: transform 0.15s ease, color 0.15s ease;
}

.aip-text-color-custom__btn-chevron svg {
  display: block;
  width: 100%;
  height: 100%;
}

.aip-text-color-custom__btn:hover {
  background: #f3faf7;
}

.aip-text-color-custom__btn.is-open .aip-text-color-custom__btn-chevron {
  transform: rotate(90deg);
}

.aip-text-color-custom__btn.is-open,
.aip-text-color-custom__btn.is-active {
  background: #459577;
  border-color: #459577;
  color: #fff;
}

.aip-text-color-custom__btn.is-open .aip-text-color-custom__btn-chevron,
.aip-text-color-custom__btn.is-active .aip-text-color-custom__btn-chevron {
  color: #fff;
}

.aip-text-color-custom__btn:focus-visible {
  outline: 2px solid #459577;
  outline-offset: 2px;
}

.aip-text-color-custom__chip {
  display: none;
  margin: 0 0 0.45rem;
  font-size: 0.85rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #333;
  letter-spacing: 0.02em;
}

.aip-text-color-custom__chip.is-on {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}

.aip-text-color-custom__chip-swatch {
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  flex: none;
}

.aip-text-color-custom__panel {
  margin-top: 0.65rem;
  max-width: 17.5rem;
  padding: 0.85rem;
  border: 1px solid #d8d8d8;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  box-sizing: border-box;
}

.aip-text-color-custom__panel[hidden] {
  display: none !important;
}

.aip-text-color-custom__picker {
  display: flex;
  gap: 0.55rem;
  align-items: stretch;
}

.aip-text-color-custom__sv-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  aspect-ratio: 5 / 4;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #ccc;
  touch-action: none;
  cursor: crosshair;
}

.aip-text-color-custom__sv {
  display: block;
  width: 100%;
  height: 100%;
}

.aip-text-color-custom__sv-knob {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
  pointer-events: none;
  box-sizing: border-box;
}

.aip-text-color-custom__hue-wrap {
  position: relative;
  width: 1.15rem;
  flex: none;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #ccc;
  background: linear-gradient(
    to bottom,
    #ff0000 0%,
    #ffff00 17%,
    #00ff00 33%,
    #00ffff 50%,
    #0000ff 67%,
    #ff00ff 83%,
    #ff0000 100%
  );
  touch-action: none;
  cursor: ns-resize;
}

.aip-text-color-custom__hue {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  cursor: ns-resize;
  writing-mode: vertical-lr;
  direction: rtl;
  appearance: slider-vertical;
}

.aip-text-color-custom__hue-knob {
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  margin-top: -2px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.35);
  border-radius: 2px;
  pointer-events: none;
  box-sizing: border-box;
}

.aip-text-color-custom__hex-row {
  margin-top: 0.7rem;
}

.aip-text-color-custom__hex {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 2.35rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid #c8c8c8;
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.03em;
  color: #222;
  background: #fff;
}

.aip-text-color-custom__hex:focus {
  outline: 2px solid #459577;
  outline-offset: 1px;
  border-color: #459577;
}

.aip-text-color-custom__hex.is-invalid {
  border-color: #c44;
}

.aip-text-color-custom__apply {
  display: block;
  width: 100%;
  margin-top: 0.65rem;
  min-height: 2.5rem;
  border: 0;
  border-radius: 8px;
  background: #459577;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

.aip-text-color-custom__apply:hover {
  background: #3a7f65;
}

.aip-text-color-custom__apply:focus-visible {
  outline: 2px solid #459577;
  outline-offset: 2px;
}

.aip-gallery-text-host {
  position: relative;
  display: block;
  width: 100%;
  max-width: 100%;
  line-height: 0;
  overflow: visible;
}

.aip-gallery-text-host > img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

/*
 * Flatsome child theme sets `.product-gallery-slider img { width: initial; }` which
 * wins over the rules above (loads later). Without thumbnails Flickity sizes the
 * viewport from the intrinsic 527px shop_single file → main image looks tiny.
 * Force fill for AI poster gallery only.
 */
.single-product .product-gallery .product-gallery-slider .aip-gallery-text-host,
.single-product .product-gallery .product-gallery-slider .aip-gallery-text-host > img:not(.frame-image),
.single-product .product-gallery.aip-gallery-host .product-gallery-slider img.wp-post-image:not(.frame-image) {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

/* TEMP admin: white paper font compare replaces poster in preview. */
/* Compare sheet sits inside Woo gallery <a> — disable link hit-testing while open. */
a.woocommerce-main-image:has(.aip-font-compare-on),
a.zoom:has(.aip-font-compare-on) {
  pointer-events: none;
}
.aip-gallery-text-host.aip-font-compare-on,
.aip-gallery-text-host.aip-font-compare-on .aip-font-compare {
  pointer-events: auto;
}

.aip-gallery-text-host.aip-font-compare-on > img:not(.frame-image),
.aip-gallery-text-host.aip-font-compare-on > img.frame-image,
.aip-gallery-text-host.aip-font-compare-on > .aip-text-overlay {
  visibility: hidden !important;
  pointer-events: none !important;
}

.aip-font-compare-launch,
.aip-font-weight-launch,
.aip-font-white-launch,
.aip-font-export-launch {
  display: inline-flex;
  align-items: center;
  margin-top: 0.55rem;
  margin-right: 0.4rem;
  padding: 0.4rem 0.75rem;
  border: 1.5px solid #459577;
  border-radius: 8px;
  background: #fff;
  color: #459577;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  text-transform: none;
}

.aip-font-weight-launch {
  border-color: #2a2a2a;
  color: #2a2a2a;
  min-width: 4.5rem;
  justify-content: center;
  font-variant-numeric: tabular-nums;
}

.aip-font-white-launch {
  border-color: #888;
  color: #333;
}

.aip-font-export-launch {
  border-color: #666;
  color: #333;
}

.aip-font-compare-launch:hover,
.aip-font-compare-launch.is-on {
  background: #459577;
  color: #fff;
}

.aip-font-weight-launch:hover {
  background: #f3f3f3;
}

.aip-font-white-launch:hover {
  background: #f3f3f3;
}

.aip-font-white-launch.is-on {
  background: #2a2a2a;
  border-color: #2a2a2a;
  color: #fff;
}

.aip-font-export-launch:hover {
  background: #f3f3f3;
}

/* TEMP admin: blank white paper behind text (hide poster/frame, keep overlay). */
.aip-gallery-text-host.aip-preview-white-bg {
  background: #fff !important;
}

.aip-gallery-text-host.aip-preview-white-bg > img:not(.frame-image),
.aip-gallery-text-host.aip-preview-white-bg > img.frame-image {
  visibility: hidden !important;
}

.aip-gallery-text-host.aip-preview-white-bg > .aip-text-overlay {
  visibility: visible !important;
  pointer-events: auto !important;
}

.aip-font-trim-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

.aip-text-font-epo .aip-text-font-choice.aip-font-trim-hidden {
  display: none !important;
}

.aip-font-compare {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 30;
  display: flex;
  flex-direction: column;
  background: #fff;
  box-shadow: inset 0 0 0 1px #e5e5e5;
  overflow: hidden;
  line-height: normal;
  text-transform: none;
}

.aip-font-compare__bar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  border-bottom: 1px solid #e8e8e8;
  background: #fafafa;
  text-transform: none;
}

.aip-font-compare__bar-left {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}

.aip-font-compare__bar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  justify-content: flex-end;
}

.aip-font-compare__title {
  font-size: 0.8rem;
  font-weight: 700;
  color: #333;
  text-transform: none;
}

.aip-font-compare__count {
  font-size: 0.68rem;
  color: #777;
}

.aip-font-compare__close,
.aip-font-compare__export,
.aip-font-compare__weight,
.aip-font-compare__restore {
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  padding: 0.25rem 0.55rem;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  text-transform: none;
}

.aip-font-compare__export {
  border-color: #459577;
  color: #459577;
}

.aip-font-compare__grid {
  flex: 1 1 auto;
  overflow: auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 8px;
  align-content: start;
  -webkit-overflow-scrolling: touch;
}

.aip-font-compare__heading {
  grid-column: 1 / -1;
  margin: 0.35rem 0 0.1rem;
  padding: 0.2rem 0.15rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #459577;
  border-bottom: 1px solid #e5e5e5;
  text-transform: none;
  font-family: ui-sans-serif, system-ui, sans-serif;
}

.aip-font-compare__cell {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 3.4rem;
  margin: 0;
  border: 1px solid #d8d8d8;
  border-radius: 6px;
  background: #fff;
  box-sizing: border-box;
  text-transform: none !important;
  letter-spacing: normal;
  overflow: visible;
}

.aip-font-compare__cell.is-active {
  border-color: #459577;
  box-shadow: inset 0 0 0 1px #459577;
  background: #f3faf7;
}

.aip-font-compare__remove {
  position: absolute;
  top: 3px;
  right: 3px;
  z-index: 3;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: #e53935 !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 16px !important;
  text-align: center;
  cursor: pointer;
  text-transform: none !important;
  letter-spacing: 0 !important;
  box-shadow: 0 0 0 1px #fff;
  flex: none !important;
  appearance: none;
  -webkit-appearance: none;
}

.aip-font-compare__pick {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  margin: 0;
  padding: 0.55rem 1.1rem 0.35rem 0.3rem;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-transform: none !important;
}

.aip-font-compare__pick:hover {
  background: rgba(69, 149, 119, 0.06);
}

.aip-font-compare__sample {
  display: block;
  text-align: center;
  /* Weight set per cell in JS (effectiveFontWeight). Never inherit theme button bold. */
  font-weight: 400;
  font-style: normal;
  font-size: clamp(0.85rem, 2.8vw, 1.15rem);
  line-height: 1.15;
  letter-spacing: normal;
  word-break: break-word;
  text-transform: none !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.aip-font-compare__meta {
  display: block;
  margin-top: 0.25rem;
  text-align: center;
  font-size: 0.62rem;
  line-height: 1.2;
  color: #888;
  font-family: ui-sans-serif, system-ui, sans-serif;
  word-break: break-all;
  text-transform: none !important;
}

/* Theme frame overlay: above poster, under text (transparent center shows preview).
   JS reparents img.frame-image into the host; !important beats Artemis inline restyles. */
.aip-gallery-text-host > img.frame-image {
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  z-index: 5 !important;
  pointer-events: none !important;
  opacity: 1 !important;
}

.product-gallery.aip-gallery--no-frame .aip-gallery-text-host > img.frame-image {
  display: none !important;
  opacity: 0 !important;
}

/* Full poster plane — required for drag math (client → hole fractions). */
.aip-text-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 6;
  overflow: visible;
}

/* Keep text interactions from bubbling to gallery zoom / iOS long-press menus. */
.aip-text-overlay__label,
.aip-text-overlay__label * {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* While finger is on overlay text, kill the gallery <a> callout (Open / Download). */
a[data-aip-no-callout='1'] {
  -webkit-touch-callout: none !important;
}

.aip-text-overlay__guides {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  display: none;
}

.aip-text-overlay__guides.is-on {
  display: block;
}

.aip-guide {
  position: absolute;
  pointer-events: none;
  display: none;
}

.aip-text-overlay__guides.show-v .aip-guide-v,
.aip-text-overlay__guides.show-rot .aip-guide-v {
  display: block;
}

.aip-text-overlay__guides.show-h .aip-guide-h {
  display: block;
}

.aip-guide-v {
  width: 0;
  border-left: 1px dashed rgba(69, 149, 119, 0.9);
  transform: translateX(-0.5px);
}

.aip-guide-h {
  height: 0;
  border-top: 1px dashed rgba(69, 149, 119, 0.75);
  transform: translateY(-0.5px);
}

.aip-text-overlay__guides.show-rot .aip-guide-v {
  border-left-style: solid;
  border-left-width: 1.5px;
}

/* Admin geometry debug: hole box, hole center, text pivot */
.aip-geo-debug {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
  display: none;
}

.aip-geo-debug.is-on {
  display: block;
}

.aip-geo-debug__hole {
  position: absolute;
  box-sizing: border-box;
  border: 2px solid #ff2d95;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
}

.aip-geo-debug__cross {
  position: absolute;
  background: #00e5ff;
}

.aip-geo-debug__cross--v {
  width: 2px;
  transform: translateX(-1px);
}

.aip-geo-debug__cross--h {
  height: 2px;
  transform: translateY(-1px);
}

.aip-geo-debug__text {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid #ffe600;
  border-radius: 50%;
  background: rgba(255, 230, 0, 0.35);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45);
}

.aip-geo-debug__text::before,
.aip-geo-debug__text::after {
  content: '';
  position: absolute;
  background: #ffe600;
}

.aip-geo-debug__text::before {
  left: 50%;
  top: -6px;
  bottom: -6px;
  width: 2px;
  transform: translateX(-1px);
}

.aip-geo-debug__text::after {
  top: 50%;
  left: -6px;
  right: -6px;
  height: 2px;
  transform: translateY(-1px);
}

.aip-geo-debug__label {
  position: absolute;
  left: 8px;
  bottom: 8px;
  max-width: calc(100% - 16px);
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font: 600 11px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
}

.aip-text-overlay__label {
  position: absolute;
  text-align: center;
  line-height: 0;
  font-weight: 700;
  cursor: grab;
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  /* Width/height set in JS from glyph ink bounds (not CSS em-box). */
}

.aip-text-overlay__paint {
  display: block;
  /* Size comes from inline style (ink bounds) — avoid 100% stretch soft-upscale. */
  max-width: none;
  image-rendering: auto;
  pointer-events: auto;
}

.aip-text-overlay__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.aip-text-overlay.is-empty .aip-text-overlay__label {
  display: none;
}

.aip-text-overlay__box {
  display: none;
  position: absolute;
  /* Tight to ink canvas — only a small hit-padding outside glyphs */
  inset: -3px;
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}

.aip-text-overlay.is-selected .aip-text-overlay__box {
  display: block;
}

.aip-h {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid #333;
  pointer-events: auto;
  box-sizing: border-box;
  touch-action: none;
}

/* Larger touch/click target without changing visible knobs. */
.aip-h::after {
  content: '';
  position: absolute;
  inset: -10px;
}

.aip-h-nw {
  left: -5px;
  top: -5px;
  cursor: nwse-resize;
}
.aip-h-ne {
  right: -5px;
  top: -5px;
  cursor: nesw-resize;
}
.aip-h-sw {
  left: -5px;
  bottom: -5px;
  cursor: nesw-resize;
}
.aip-h-se {
  right: -5px;
  bottom: -5px;
  cursor: nwse-resize;
}
/* B: white chip + curved arrow (Canva/Figma-style), above box for upright text */
.aip-h-rot {
  left: 50%;
  top: -34px;
  width: 22px;
  height: 22px;
  margin-left: -11px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: grab;
  background: #fff;
  border: 1.5px solid #459577;
  border-radius: 50%;
  color: #459577;
  z-index: 6;
}

.aip-h-rot svg {
  display: block;
  width: 12px;
  height: 12px;
  pointer-events: none;
}

.aip-h-rot:hover {
  background: #f3faf7;
  color: #3a7f65;
}

.aip-h-rot:active {
  cursor: grabbing;
}

.aip-h-rot::after {
  inset: -12px;
}

/* Toolbar: shrink-wrap to controls; equal-height groups at all breakpoints */
#aip-text-toolbar.aip-text-toolbar {
  --aip-tb-btn: 34px;
  --aip-tb-group: 38px;
  display: inline-flex !important;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-start;
  align-items: center;
  align-self: flex-start !important;
  flex: 0 0 auto !important;
  width: fit-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0.55rem auto 0.75rem;
  padding: 5px 6px;
  box-sizing: border-box !important;
  background: #f7f7f7;
  border: 1px solid #e2e2e2;
  border-radius: 10px;
  overflow: visible;
  position: relative;
  z-index: 5;
}

/* Mobile: sibling of gallery — still shrink-wrap (not stretched by row flex) */
#aip-text-toolbar.aip-text-toolbar.aip-text-toolbar--breakout {
  align-self: flex-start !important;
  flex: 0 0 auto !important;
  width: fit-content !important;
  max-width: calc(100% - 30px) !important;
  margin-left: 15px;
  margin-right: 15px;
}

#aip-text-toolbar.aip-text-toolbar.is-weight-open {
  z-index: 80;
}

#aip-text-toolbar.aip-text-toolbar::-webkit-scrollbar {
  display: none;
}

#aip-text-toolbar.aip-text-toolbar.aip-hide {
  display: none !important;
}

#aip-text-toolbar .aip-text-toolbar__group {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: 0;
  height: var(--aip-tb-group);
  min-height: var(--aip-tb-group);
  max-height: var(--aip-tb-group);
  padding: 2px;
  box-sizing: border-box;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
}

#aip-text-toolbar .aip-text-toolbar__group--weight {
  /* same locked height as icon groups */
  height: var(--aip-tb-group);
  min-height: var(--aip-tb-group);
  max-height: var(--aip-tb-group);
}

#aip-text-toolbar .aip-weight-dd {
  display: flex;
  align-items: stretch;
  height: 100%;
}

#aip-text-toolbar button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: var(--aip-tb-btn) !important;
  height: var(--aip-tb-btn) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: var(--aip-tb-btn) !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 6px;
  border: none !important;
  background: transparent !important;
  color: #2a2a2a;
  line-height: 0 !important;
  font-size: 0 !important;
  cursor: pointer;
  appearance: none !important;
  -webkit-appearance: none !important;
  flex-shrink: 0;
  box-shadow: none !important;
  transition: background 0.12s ease, color 0.12s ease;
}

#aip-text-toolbar button:hover {
  background: #eef6f2 !important;
  color: #1f6b52;
}

#aip-text-toolbar button:disabled,
#aip-text-toolbar button[aria-disabled='true'] {
  opacity: 0.35;
  cursor: default;
  color: #999;
  pointer-events: none;
}

#aip-text-toolbar button:disabled:hover,
#aip-text-toolbar button[aria-disabled='true']:hover {
  background: transparent !important;
  color: #999;
}

#aip-text-toolbar button:focus-visible {
  outline: 2px solid #459577;
  outline-offset: 1px;
}

#aip-text-toolbar button svg {
  display: block;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  overflow: visible;
}

.aip-text-toolbar button.aip-weight-toggle {
  position: relative;
  width: auto;
  min-width: 2.5rem;
  height: auto;
  min-height: 2.25rem;
  padding: 0.2rem 0.35rem 0.15rem;
  flex-direction: column;
  gap: 0.12rem;
  line-height: 1;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
  font-variant-numeric: normal;
  /* Whole surface is one hit target — children must not steal clicks/focus. */
  isolation: isolate;
}

.aip-text-toolbar button.aip-weight-toggle > * {
  pointer-events: none;
}

.aip-weight-toggle__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  color: #2a2a2a;
  line-height: 1;
}

.aip-weight-toggle__b {
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 0.78rem;
  line-height: 1;
}

.aip-weight-toggle__b--thin {
  font-weight: 300;
}

.aip-weight-toggle__b--bold {
  font-weight: 700;
}

.aip-weight-toggle__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
  line-height: 0;
}

.aip-weight-toggle__arrow svg {
  display: block;
  width: 9px;
  height: 9px;
}

.aip-weight-toggle__dots {
  display: block;
  width: auto;
  height: 5px;
  margin: 0 auto;
}

.aip-weight-toggle__dots[hidden] {
  display: none !important;
}

.aip-text-toolbar button.aip-weight-toggle:hover .aip-weight-toggle__icon {
  color: #1f6b52;
}

/* Weight dropdown (WEIGHT_UI_DROPDOWN) — portaled fixed menu; beat toolbar button centering */
.aip-weight-dd {
  position: relative;
}

#aip-text-toolbar .aip-weight-dd__btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  width: auto !important;
  min-width: 0 !important;
  height: var(--aip-tb-btn) !important;
  min-height: 0 !important;
  max-height: var(--aip-tb-btn) !important;
  padding: 0 0.35rem !important;
  border-radius: 6px;
  line-height: 1 !important;
  font-size: 0.6rem !important;
  font-weight: 700 !important;
  box-sizing: border-box !important;
}

#aip-text-toolbar .aip-weight-dd__value {
  font-size: 0.6rem;
  font-weight: 700;
  color: #2a2a2a;
  white-space: nowrap;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.aip-weight-dd__chevron {
  display: inline-flex;
  color: #459577;
  line-height: 0;
}

.aip-weight-dd__chevron svg {
  width: 10px;
  height: 10px;
}

.aip-weight-dd.is-open .aip-weight-dd__chevron {
  transform: rotate(180deg);
}

.aip-weight-dd__menu {
  position: fixed;
  z-index: 10050;
  min-width: 8.5rem;
  padding: 0.3rem;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
  pointer-events: auto;
  box-sizing: border-box;
}

.aip-weight-dd__menu[hidden] {
  display: none !important;
}

.aip-weight-dd__menu .aip-weight-dd__option,
.aip-text-toolbar .aip-weight-dd__option {
  display: flex !important;
  align-items: center;
  justify-content: space-between !important;
  gap: 0.75rem;
  width: 100% !important;
  height: auto !important;
  min-height: 2.15rem;
  margin: 0;
  padding: 0.5rem 0.6rem !important;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #2a2a2a;
  text-align: left !important;
  line-height: 1.25 !important;
  cursor: pointer;
  appearance: none;
  touch-action: manipulation;
  box-sizing: border-box;
  font: inherit;
}

.aip-weight-dd__menu .aip-weight-dd__option:hover,
.aip-text-toolbar .aip-weight-dd__option:hover {
  background: #f3f7f5;
  color: #1f6b52;
}

.aip-weight-dd__menu .aip-weight-dd__option.is-active,
.aip-text-toolbar .aip-weight-dd__option.is-active {
  background: #eef6f2;
  color: #1f6b52;
}

.aip-weight-dd__option-label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: left;
  line-height: 1.25;
}

.aip-weight-dd__option-sample {
  flex: 0 0 auto;
  font-size: 1.2rem;
  line-height: 1;
  color: #9a9a9a;
  font-family: inherit;
}

.aip-weight-dd__option.is-active .aip-weight-dd__option-sample {
  display: none;
}

.aip-weight-dd__option-check {
  display: none;
  flex: 0 0 auto;
  color: #2a2a2a;
  line-height: 0;
}

.aip-weight-dd__option.is-active .aip-weight-dd__option-check {
  display: inline-flex;
}

/* Prefer one row, but wrap if gallery is too narrow (avoids reset overflow) */
@media (min-width: 520px) {
  #aip-text-toolbar.aip-text-toolbar {
    flex-wrap: wrap;
  }
}

@media (max-width: 420px) {
  #aip-text-toolbar.aip-text-toolbar {
    --aip-tb-btn: 30px;
    --aip-tb-group: 34px;
    gap: 4px;
    padding: 5px 4px;
    border-radius: 8px;
  }

  #aip-text-toolbar button {
    border-radius: 5px;
  }

  #aip-text-toolbar button svg {
    width: 14px;
    height: 14px;
  }

  #aip-text-toolbar .aip-weight-dd__btn {
    padding: 0 0.28rem !important;
    border-radius: 5px;
    font-size: 0.55rem !important;
  }

  #aip-text-toolbar .aip-weight-dd__value {
    font-size: 0.55rem;
  }
}

#aip-text-toolbar button.aip-snap-toggle.is-on {
  background: #459577 !important;
  color: #fff;
}

#aip-text-toolbar button.aip-snap-toggle:not(.is-on) {
  color: #777;
}

#aip-text-toolbar button.aip-snap-toggle:not(.is-on):hover {
  background: #f0f0f0 !important;
  color: #444;
}

@media (max-width: 549px) {
  .aip-text-font-epo .tmcp-ul-wrap,
  .aip-text-font-epo .tm-extra-product-options-radio {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 2px !important;
  }
}

@media (min-width: 421px) and (max-width: 549px) {
  #aip-text-toolbar.aip-text-toolbar {
    --aip-tb-btn: 36px;
    --aip-tb-group: 40px;
    gap: 5px;
    padding: 5px 5px;
  }
}