/* GrapesJS chrome in FreshTag tokens (light + dark). Layout of the editor regions lives in freshtag/pages/designs.css.
   The label canvas itself (iframe content) is the e-ink design and is never restyled here. */

.gjs-one-bg { background-color: var(--ft-surface) !important; }
.gjs-two-color { color: var(--ft-text) !important; }
.gjs-three-bg { background-color: var(--ft-surface-3) !important; }
.gjs-four-color,
.gjs-four-color-h:hover { color: var(--ft-accent-text) !important; }

.gjs-editor {
  font-family: var(--ft-font-family) !important;
  border: none !important;
}

/* Panels */
.gjs-pn-panel {
  background-color: var(--ft-surface) !important;
  border-color: var(--ft-border) !important;
  box-shadow: none !important;
}

.gjs-pn-views-container { border-right: 1px solid var(--ft-border) !important; }
.gjs-pn-views { border-bottom: 1px solid var(--ft-border) !important; }

/* View switch (Blocks / Styles / Layers) as text segments; the panel buttons carry their name in `title`. */
.gjs-pn-views .gjs-pn-btn {
  width: auto !important;
  min-height: 32px;
  padding: 0 var(--ft-space-3) !important;
  border-radius: var(--ft-radius-sm) !important;
  color: var(--ft-text-muted) !important;
  font-size: var(--ft-text-sm) !important;
  font-weight: var(--ft-weight-bold);
  line-height: 32px !important;
}

.gjs-pn-views .gjs-pn-btn::before {
  content: attr(title);
  font-family: var(--ft-font-family);
}

/* Owners see "Properties", never CSS selectors: the Styles view is renamed and the class/state rows are hidden. */
.gjs-pn-views .gjs-pn-btn[title="Styles"]::before { content: "Properties"; }
.gjs-clm-tags { display: none !important; }

.gjs-pn-btn {
  color: var(--ft-text-muted) !important;
  border-radius: var(--ft-radius-sm) !important;
}

.gjs-pn-btn:hover { background-color: var(--ft-hover) !important; }

.gjs-pn-btn.gjs-pn-active {
  color: var(--ft-text) !important;
  background-color: var(--ft-segment-active) !important;
  box-shadow: none !important;
}

/* Blocks */
.gjs-blocks-cs { background-color: var(--ft-surface) !important; }

.gjs-block-category .gjs-title {
  background-color: transparent !important;
  color: var(--ft-text-muted) !important;
  border-bottom: none !important;
  font-size: var(--ft-text-xs) !important;
  font-weight: var(--ft-weight-bold) !important;
  letter-spacing: var(--ft-tracking-wide) !important;
  text-transform: uppercase;
  padding: var(--ft-space-3) var(--ft-space-3) var(--ft-space-1) !important;
}

.gjs-blocks-c { padding: 0 var(--ft-space-2) var(--ft-space-2) !important; }

.gjs-block {
  width: calc(50% - var(--ft-space-2)) !important;
  min-height: 0 !important;
  margin: var(--ft-space-1) !important;
  padding: var(--ft-space-3) var(--ft-space-2) !important;
  border: 1px solid var(--ft-border) !important;
  border-radius: var(--ft-radius-md) !important;
  background-color: var(--ft-surface-2) !important;
  box-shadow: none !important;
  color: var(--ft-text) !important;
  font-size: var(--ft-text-xs) !important;
  font-weight: var(--ft-weight-semibold);
  transition: border-color var(--ft-duration-fast) var(--ft-ease) !important;
}

.gjs-block:hover {
  border-color: var(--ft-accent) !important;
  color: var(--ft-text) !important;
}

.gjs-block svg { fill: var(--ft-accent-text) !important; }

.gjs-block-label {
  color: var(--ft-text) !important;
  font-size: var(--ft-text-xs) !important;
  margin-top: var(--ft-space-1) !important;
}

/* Canvas */
.gjs-cv-canvas { background-color: transparent !important; }

.gjs-frame-wrapper {
  border-radius: var(--ft-radius-sm);
  box-shadow: var(--ft-elevation-2);
}

/* Floating toolbar on the selected element, badge and selection outlines */
.gjs-toolbar {
  background-color: var(--ft-accent-strong) !important;
  border-radius: var(--ft-radius-sm) !important;
}

.gjs-toolbar-item { color: var(--ft-accent-strong-fg) !important; }

.gjs-badge {
  background-color: var(--ft-accent-strong) !important;
  color: var(--ft-accent-strong-fg) !important;
  border-radius: var(--ft-radius-sm) !important;
  font-family: var(--ft-font-family) !important;
}

.gjs-selected {
  outline: 2px solid var(--ft-accent) !important;
  outline-offset: -2px;
}

.gjs-hovered { outline: 1px dashed var(--ft-accent) !important; }

.gjs-resizer-h { border: 2px solid var(--ft-accent) !important; }

[data-gjs-type="token-block"] {
  outline: 1px dashed var(--ft-accent);
  outline-offset: 1px;
}

/* Style manager (the properties of the selected block) and trait settings */
.gjs-trt-header {
  background-color: transparent !important;
  color: var(--ft-text) !important;
  border-bottom: 1px solid var(--ft-border) !important;
  font-size: var(--ft-text-sm) !important;
  font-weight: var(--ft-weight-bold) !important;
}

.gjs-sm-sector .gjs-sm-properties { background-color: var(--ft-surface) !important; }

.gjs-sm-label,
.gjs-label,
.gjs-trt-trait .gjs-label {
  color: var(--ft-text-muted) !important;
  font-size: var(--ft-text-xs) !important;
  font-weight: var(--ft-weight-semibold);
}

.gjs-field,
.gjs-sm-input {
  background-color: var(--ft-field-bg) !important;
  border: 1px solid var(--ft-field-border) !important;
  border-radius: var(--ft-radius-sm) !important;
  color: var(--ft-text) !important;
}

.gjs-field input,
.gjs-field select,
.gjs-field textarea { color: var(--ft-text) !important; }

.gjs-field:focus-within,
.gjs-sm-input:focus {
  border-color: var(--ft-focus) !important;
  outline: 2px solid var(--ft-focus);
  outline-offset: 0;
}


/* Layers */
.gjs-layer-title {
  background-color: var(--ft-surface) !important;
  border-bottom: 1px solid var(--ft-border) !important;
  color: var(--ft-text) !important;
}

.gjs-layer-title-inn { font-size: var(--ft-text-xs) !important; }
.gjs-layer.gjs-selected .gjs-layer-title { background-color: var(--ft-accent-soft) !important; }

/* Rich-text toolbar */
.gjs-rte-toolbar {
  background-color: var(--ft-surface) !important;
  border: 1px solid var(--ft-border) !important;
  border-radius: var(--ft-radius-sm) !important;
  box-shadow: var(--ft-elevation-2);
}

.gjs-rte-action {
  color: var(--ft-text) !important;
  border-right: 1px solid var(--ft-border) !important;
}

.gjs-rte-active { color: var(--ft-accent-text) !important; }

/* Modals (View code) */
.gjs-mdl-dialog {
  background-color: var(--ft-surface) !important;
  color: var(--ft-text) !important;
  border-radius: var(--ft-radius-xl) !important;
}

.gjs-mdl-header { border-bottom: 1px solid var(--ft-border) !important; }

/* Scrollbars */
.gjs-pn-views-container::-webkit-scrollbar,
.gjs-blocks-cs::-webkit-scrollbar { width: 6px; }

.gjs-pn-views-container::-webkit-scrollbar-thumb,
.gjs-blocks-cs::-webkit-scrollbar-thumb {
  background: var(--ft-border-strong);
  border-radius: var(--ft-radius-pill);
}

.gjs-logo-version { display: none !important; }

/* Blocks: plain names and a distinct picture per field. The labels are set in grapes-editor.js; each block's
   title attribute ends with its label, so these rules match on that. */
.gjs-block[title$="Product Name"] .gjs-block-label,
.gjs-block[title$="Alias / Short Desc"] .gjs-block-label,
.gjs-block[title$="Manufacturer"] .gjs-block-label,
.gjs-block[title$="Origin"] .gjs-block-label,
.gjs-block[title$="Barcode Digits"] .gjs-block-label,
.gjs-block[title$="Digital URL"] .gjs-block-label,
.gjs-block[title$="Category"] .gjs-block-label,
.gjs-block[title$="Sale Price"] .gjs-block-label,
.gjs-block[title$="Was Price"] .gjs-block-label,
.gjs-block[title$="Price (Pounds)"] .gjs-block-label,
.gjs-block[title$="Price (Pence)"] .gjs-block-label,
.gjs-block[title$="Unit Price"] .gjs-block-label,
.gjs-block[title$="Unit Price Unit"] .gjs-block-label,
.gjs-block[title$="Unit Dimension"] .gjs-block-label,
.gjs-block[title$="Save Amount"] .gjs-block-label,
.gjs-block[title$="Allergen List"] .gjs-block-label,
.gjs-block[title$="Allergen Icons"] .gjs-block-label,
.gjs-block[title$="Promo Marker"] .gjs-block-label,
.gjs-block[title$="QR Code"] .gjs-block-label,
.gjs-block[title$="Section"] .gjs-block-label,
.gjs-block[title$="2 Columns"] .gjs-block-label,
.gjs-block[title$="3 Columns"] .gjs-block-label,
.gjs-block[title$="Spacer"] .gjs-block-label,
.gjs-block[title$="Divider"] .gjs-block-label,
.gjs-block[title$="Price Display"] .gjs-block-label,
.gjs-block[title$="Was / Now"] .gjs-block-label,
.gjs-block[title$="Product Header"] .gjs-block-label,
.gjs-block[title$="Unit Price Row"] .gjs-block-label { font-size: 0 !important; }
.gjs-block[title$="Product Name"] .gjs-block-label::after,
.gjs-block[title$="Alias / Short Desc"] .gjs-block-label::after,
.gjs-block[title$="Manufacturer"] .gjs-block-label::after,
.gjs-block[title$="Origin"] .gjs-block-label::after,
.gjs-block[title$="Barcode Digits"] .gjs-block-label::after,
.gjs-block[title$="Digital URL"] .gjs-block-label::after,
.gjs-block[title$="Category"] .gjs-block-label::after,
.gjs-block[title$="Sale Price"] .gjs-block-label::after,
.gjs-block[title$="Was Price"] .gjs-block-label::after,
.gjs-block[title$="Price (Pounds)"] .gjs-block-label::after,
.gjs-block[title$="Price (Pence)"] .gjs-block-label::after,
.gjs-block[title$="Unit Price"] .gjs-block-label::after,
.gjs-block[title$="Unit Price Unit"] .gjs-block-label::after,
.gjs-block[title$="Unit Dimension"] .gjs-block-label::after,
.gjs-block[title$="Save Amount"] .gjs-block-label::after,
.gjs-block[title$="Allergen List"] .gjs-block-label::after,
.gjs-block[title$="Allergen Icons"] .gjs-block-label::after,
.gjs-block[title$="Promo Marker"] .gjs-block-label::after,
.gjs-block[title$="QR Code"] .gjs-block-label::after,
.gjs-block[title$="Section"] .gjs-block-label::after,
.gjs-block[title$="2 Columns"] .gjs-block-label::after,
.gjs-block[title$="3 Columns"] .gjs-block-label::after,
.gjs-block[title$="Spacer"] .gjs-block-label::after,
.gjs-block[title$="Divider"] .gjs-block-label::after,
.gjs-block[title$="Price Display"] .gjs-block-label::after,
.gjs-block[title$="Was / Now"] .gjs-block-label::after,
.gjs-block[title$="Product Header"] .gjs-block-label::after,
.gjs-block[title$="Unit Price Row"] .gjs-block-label::after { font-size: var(--ft-text-xs); }
.gjs-block[title$="Product Name"] .gjs-block-label::after { content: "Product name"; }
.gjs-block[title$="Product Name"] .gjs-block__media::before { content: "Aa"; }
.gjs-block[title$="Alias / Short Desc"] .gjs-block-label::after { content: "Short description"; }
.gjs-block[title$="Alias / Short Desc"] .gjs-block__media::before { content: "≡"; }
.gjs-block[title$="Manufacturer"] .gjs-block-label::after { content: "Brand or maker"; }
.gjs-block[title$="Manufacturer"] .gjs-block__media::before { content: "®"; }
.gjs-block[title$="Origin"] .gjs-block-label::after { content: "Country of origin"; }
.gjs-block[title$="Origin"] .gjs-block__media::before { content: "◎"; }
.gjs-block[title$="Barcode Digits"] .gjs-block-label::after { content: "Barcode number"; }
.gjs-block[title$="Barcode Digits"] .gjs-block__media::before { content: "123"; }
.gjs-block[title$="Digital URL"] .gjs-block-label::after { content: "Web link"; }
.gjs-block[title$="Digital URL"] .gjs-block__media::before { content: "↗"; }
.gjs-block[title$="Category"] .gjs-block-label::after { content: "Category"; }
.gjs-block[title$="Category"] .gjs-block__media::before { content: "#"; }
.gjs-block[title$="Sale Price"] .gjs-block-label::after { content: "Price"; }
.gjs-block[title$="Sale Price"] .gjs-block__media::before { content: "1.99"; }
.gjs-block[title$="Was Price"] .gjs-block-label::after { content: "Was price"; }
.gjs-block[title$="Was Price"] .gjs-block__media::before { content: "was"; }
.gjs-block[title$="Price (Pounds)"] .gjs-block-label::after { content: "Price – whole number"; }
.gjs-block[title$="Price (Pounds)"] .gjs-block__media::before { content: "1"; }
.gjs-block[title$="Price (Pence)"] .gjs-block-label::after { content: "Price – decimals"; }
.gjs-block[title$="Price (Pence)"] .gjs-block__media::before { content: ".99"; }
.gjs-block[title$="Unit Price"] .gjs-block-label::after { content: "Unit price"; }
.gjs-block[title$="Unit Price"] .gjs-block__media::before { content: "/kg"; }
.gjs-block[title$="Unit Price Unit"] .gjs-block-label::after { content: "Unit price per"; }
.gjs-block[title$="Unit Price Unit"] .gjs-block__media::before { content: "kg"; }
.gjs-block[title$="Unit Dimension"] .gjs-block-label::after { content: "Pack size"; }
.gjs-block[title$="Unit Dimension"] .gjs-block__media::before { content: "500g"; }
.gjs-block[title$="Save Amount"] .gjs-block-label::after { content: "You save"; }
.gjs-block[title$="Save Amount"] .gjs-block__media::before { content: "save"; }
.gjs-block[title$="Allergen List"] .gjs-block-label::after { content: "Allergens (words)"; }
.gjs-block[title$="Allergen List"] .gjs-block__media::before { content: "!"; }
.gjs-block[title$="Allergen Icons"] .gjs-block-label::after { content: "Allergens (icons)"; }
.gjs-block[title$="Allergen Icons"] .gjs-block__media::before { content: "⚠"; }
.gjs-block[title$="Promo Marker"] .gjs-block-label::after { content: "Offer marker"; }
.gjs-block[title$="Promo Marker"] .gjs-block__media::before { content: "%"; }
.gjs-block[title$="QR Code"] .gjs-block-label::after { content: "QR code"; }
.gjs-block[title$="Section"] .gjs-block-label::after { content: "Box"; }
.gjs-block[title$="2 Columns"] .gjs-block-label::after { content: "Two columns"; }
.gjs-block[title$="3 Columns"] .gjs-block-label::after { content: "Three columns"; }
.gjs-block[title$="Spacer"] .gjs-block-label::after { content: "Space"; }
.gjs-block[title$="Divider"] .gjs-block-label::after { content: "Line"; }
.gjs-block[title$="Price Display"] .gjs-block-label::after { content: "Price block"; }
.gjs-block[title$="Was / Now"] .gjs-block-label::after { content: "Was and now price"; }
.gjs-block[title$="Product Header"] .gjs-block-label::after { content: "Product heading"; }
.gjs-block[title$="Unit Price Row"] .gjs-block-label::after { content: "Unit price line"; }
.gjs-block[title$="Product Name"] .gjs-block__media svg,
.gjs-block[title$="Alias / Short Desc"] .gjs-block__media svg,
.gjs-block[title$="Manufacturer"] .gjs-block__media svg,
.gjs-block[title$="Origin"] .gjs-block__media svg,
.gjs-block[title$="Barcode Digits"] .gjs-block__media svg,
.gjs-block[title$="Digital URL"] .gjs-block__media svg,
.gjs-block[title$="Category"] .gjs-block__media svg,
.gjs-block[title$="Sale Price"] .gjs-block__media svg,
.gjs-block[title$="Was Price"] .gjs-block__media svg,
.gjs-block[title$="Price (Pounds)"] .gjs-block__media svg,
.gjs-block[title$="Price (Pence)"] .gjs-block__media svg,
.gjs-block[title$="Unit Price"] .gjs-block__media svg,
.gjs-block[title$="Unit Price Unit"] .gjs-block__media svg,
.gjs-block[title$="Unit Dimension"] .gjs-block__media svg,
.gjs-block[title$="Save Amount"] .gjs-block__media svg,
.gjs-block[title$="Allergen List"] .gjs-block__media svg,
.gjs-block[title$="Allergen Icons"] .gjs-block__media svg,
.gjs-block[title$="Promo Marker"] .gjs-block__media svg { display: none; }
.gjs-block[title$="Product Name"] .gjs-block__media::before,
.gjs-block[title$="Alias / Short Desc"] .gjs-block__media::before,
.gjs-block[title$="Manufacturer"] .gjs-block__media::before,
.gjs-block[title$="Origin"] .gjs-block__media::before,
.gjs-block[title$="Barcode Digits"] .gjs-block__media::before,
.gjs-block[title$="Digital URL"] .gjs-block__media::before,
.gjs-block[title$="Category"] .gjs-block__media::before,
.gjs-block[title$="Sale Price"] .gjs-block__media::before,
.gjs-block[title$="Was Price"] .gjs-block__media::before,
.gjs-block[title$="Price (Pounds)"] .gjs-block__media::before,
.gjs-block[title$="Price (Pence)"] .gjs-block__media::before,
.gjs-block[title$="Unit Price"] .gjs-block__media::before,
.gjs-block[title$="Unit Price Unit"] .gjs-block__media::before,
.gjs-block[title$="Unit Dimension"] .gjs-block__media::before,
.gjs-block[title$="Save Amount"] .gjs-block__media::before,
.gjs-block[title$="Allergen List"] .gjs-block__media::before,
.gjs-block[title$="Allergen Icons"] .gjs-block__media::before,
.gjs-block[title$="Promo Marker"] .gjs-block__media::before {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  color: var(--ft-text);
  font-family: var(--ft-font-family);
  font-size: var(--ft-text-xl);
  font-weight: var(--ft-weight-extrabold);
  letter-spacing: var(--ft-tracking-tight);
}

/* The selected element's type badge ("Div") means nothing to an owner. */
.gjs-badge { display: none !important; }

/* Properties (sectors and choices are defined in grapes-editor.js): Text = size, weight, colour, align; Box colour.
   Both sectors are always open, so the caret goes and the headings line up with the controls. */
.gjs-sm-sector .gjs-sm-sector-title {
  display: flex !important;
  align-items: center;
  padding: var(--ft-space-4) var(--ft-space-3) var(--ft-space-2) !important;
  border-bottom: 0 !important;
  background-color: transparent !important;
  color: var(--ft-text) !important;
  pointer-events: none;
}

.gjs-sm-sector .gjs-sm-sector-caret { display: none !important; }

.gjs-sm-sector .gjs-sm-sector-label {
  margin: 0 !important;
  padding: 0 !important;
  font-size: var(--ft-text-sm);
  font-weight: var(--ft-weight-bold);
}

.gjs-sm-sector .gjs-sm-properties {
  display: flex !important;
  flex-direction: column;
  gap: var(--ft-space-3);
  padding: 0 var(--ft-space-3) var(--ft-space-3) !important;
  border-bottom: 1px solid var(--ft-border);
}

.gjs-sm-sector .gjs-sm-property {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.gjs-sm-sector .gjs-sm-property .gjs-sm-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 var(--ft-space-1) !important;
}

.gjs-sm-sector .gjs-field-radio {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

/* Segmented choices (size, weight, align) */
.gjs-sm-sector .gjs-radio-items {
  display: flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--ft-border);
  border-radius: var(--ft-radius-md);
  background: var(--ft-surface-2);
}

.gjs-sm-sector .gjs-radio-item {
  position: relative;
  flex: 1 1 0;
  border: 0 !important;
}

/* The radio stays in the tab order (arrow keys move the choice); only its label is drawn. */
.gjs-sm-sector .gjs-radio-item input {
  display: block !important;
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.gjs-sm-sector .gjs-radio-item-label {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: var(--ft-space-1);
  min-height: 32px;
  padding: 0 var(--ft-space-2) !important;
  border-radius: var(--ft-radius-sm);
  color: var(--ft-text-muted) !important;
  font-size: var(--ft-text-xs) !important;
  font-weight: var(--ft-weight-bold);
  cursor: pointer;
}

.gjs-sm-sector .gjs-radio-item-label:hover { color: var(--ft-text) !important; background: var(--ft-hover); }

.gjs-sm-sector .gjs-radio-item input:checked + .gjs-radio-item-label {
  background-color: var(--ft-segment-active) !important;
  color: var(--ft-text) !important;
  box-shadow: var(--ft-elevation-1);
}

.gjs-sm-sector .gjs-radio-item input:focus-visible + .gjs-radio-item-label {
  outline: var(--ft-focus-width) solid var(--ft-focus);
  outline-offset: 1px;
}

/* Colour tiles: a swatch of the exact display colour and its name */
.gjs-sm-property__color .gjs-radio-items,
.gjs-sm-property__background-color .gjs-radio-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: var(--ft-space-1);
  padding: 0;
  border: 0;
  background: transparent;
}

.gjs-sm-property__color .gjs-radio-item-label,
.gjs-sm-property__background-color .gjs-radio-item-label {
  flex-direction: column;
  gap: 2px;
  min-height: 52px;
  padding: var(--ft-space-1) 2px !important;
  border: 1px solid var(--ft-border);
  border-radius: var(--ft-radius-md);
  background: var(--ft-surface);
  font-weight: var(--ft-weight-semibold);
}

.gjs-sm-property__color .gjs-radio-item input:checked + .gjs-radio-item-label,
.gjs-sm-property__background-color .gjs-radio-item input:checked + .gjs-radio-item-label {
  border-color: var(--ft-accent);
  background-color: var(--ft-accent-soft) !important;
  box-shadow: inset 0 0 0 1px var(--ft-accent);
}

.ss-sm-swatch {
  display: block;
  width: 20px;
  height: 20px;
  border: 1px solid var(--ft-border-strong);
  border-radius: var(--ft-radius-pill);
}

.ss-sm-swatch--none {
  background: linear-gradient(135deg, transparent 45%, var(--ft-text-muted) 45%, var(--ft-text-muted) 55%, transparent 55%);
}

.ss-sm-swatch-name { line-height: 1; }

.ss-sm-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}