/* IRC Colour Chart - stylesheet. Upload to
   /wp-content/uploads/irc-colour-visualiser/v1/ */
/* ---------- IRC COLOUR CHART — SCOPED STYLES ---------- */

.irc-colours-root{
  /* ===== VISUAL VARIABLES — adjust these ===== */
  --irc-colours-col-gap: 24px;            /* gap between columns            */
  --irc-colours-row-gap: 34px;            /* gap between rows               */
  --irc-colours-mobile-padding: 0px;      /* extra side padding on mobile   */
  --irc-colours-name-padding: 10px 12px;  /* name strip padding             */
  --irc-colours-name-height: 62px;        /* fixed name strip height        */
  --irc-colours-share-gutter: 52px;       /* space kept clear for the share icon */
  --irc-colours-panel-padding: 26px 26px 30px; /* expanded panel padding    */
  --irc-colours-transition: 220ms;        /* open/close transition          */
  --irc-colours-heading-size: 1.0625rem;  /* "Available in" heading         */
  --irc-colours-body-size: 0.9375rem;     /* body / spec text               */
  --irc-colours-name-size: 1rem;          /* colour name size               */
  --irc-colours-radius: 2px;              /* corner softening               */
  --irc-colours-outline: rgba(0,0,0,.10); /* faint boundary, every colour   */
  --irc-colours-hairline: rgba(0,0,0,.18);/* stronger boundary, pale colours*/
  --irc-colours-rule: rgba(0,0,0,.12);    /* divider rules                  */
  --irc-colours-ink: #1a1a1a;             /* default page text              */

  /* ===== TYPOGRAPHY =====
     Blauer Nue must already be loaded by the IRC theme or Elementor custom
     fonts — this component makes no network request of its own. Check the
     exact family name the site registers and match it here if it differs. */
  --irc-colours-font: "Blauer Nue", "BlauerNue", "Blauer Neue",
                      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                      Helvetica, Arial, sans-serif;
  --irc-colours-font-weight: 500;         /* medium — base weight           */
  --irc-colours-name-weight: 500;         /* colour names                   */
  --irc-colours-strong-weight: 500;       /* headings, buttons, values      */
  --irc-colours-focus: #1a1a1a;           /* focus ring colour              */
  --irc-colours-cue-bg: rgba(0,0,0,.42);  /* hover cue overlay              */
  --irc-colours-tip-bg: #1a1a1a;          /* tooltip background             */
  --irc-colours-tip-ink: #ffffff;         /* tooltip text                   */
  /* Breakpoints are in the @media rules below:
     desktop >=1025px (3 cols) | tablet 768–1024px (2 cols) | mobile <=767px (1 col) */

  /* Width of the whole component. Leave at 100% to fill the Elementor
     container; set a value such as 1140px to cap it and centre it. */
  --irc-colours-max-width: 100%;

  display: block;
  width: 100%;
  max-width: var(--irc-colours-max-width);
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;

  /* Keep this component's stacking to itself, so the tooltips and the open
     panel cannot paint over the site's menu or a sticky header. */
  position: relative;
  z-index: 0;
  isolation: isolate;

  color: var(--irc-colours-ink);
  font-family: var(--irc-colours-font);
  font-weight: var(--irc-colours-font-weight);
  line-height: 1.45;
}
.irc-colours-root *,
.irc-colours-root *::before,
.irc-colours-root *::after{ box-sizing: border-box; }

/* ---------- GRID ---------- */
.irc-colours-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  column-gap: var(--irc-colours-col-gap);
  row-gap: var(--irc-colours-row-gap);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (max-width: 1024px){
  .irc-colours-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 767px){
  .irc-colours-grid{
    grid-template-columns: minmax(0,1fr);
    padding-left: var(--irc-colours-mobile-padding);
    padding-right: var(--irc-colours-mobile-padding);
  }
}

/* ---------- CARD ---------- */
.irc-colours-card{ position: relative; min-width: 0; }

.irc-colours-cardBtn{
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: var(--irc-colours-radius);
}
.irc-colours-cardBtn:focus{ outline: none; }
.irc-colours-cardBtn:focus-visible{
  outline: 2px solid var(--irc-colours-focus);
  outline-offset: 3px;
}
/* Arriving from a shared link focuses the card so keyboard users land in the
   right place, but that visitor has not pressed a key yet - showing a focus
   ring would just look like a stray outline. It appears the moment they do
   use the keyboard. */
.irc-colours-cardBtn[data-irc-colours-quietfocus]:focus,
.irc-colours-cardBtn[data-irc-colours-quietfocus]:focus-visible{
  outline: none;
}

.irc-colours-swatch{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 78.885 / 31.183;   /* IRC printed chart proportion */
  border-radius: var(--irc-colours-radius) var(--irc-colours-radius) 0 0;
  overflow: hidden;
  background-color: #ffffff;
}
/* Every swatch carries a faint boundary; pale colours get a stronger one */
.irc-colours-swatch{
  box-shadow: inset 0 0 0 1px var(--irc-colours-outline);
}
.irc-colours-card.irc-colours-isPale .irc-colours-swatch{
  box-shadow: inset 0 0 0 1px var(--irc-colours-hairline);
}

/* Hover / focus cue */
.irc-colours-cue{
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  background: var(--irc-colours-cue-bg);
  color: #ffffff;
  font-size: var(--irc-colours-body-size);
  font-weight: var(--irc-colours-strong-weight);
  letter-spacing: .01em;
  text-align: center;
  opacity: 0;
  transition: opacity var(--irc-colours-transition) ease;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine){
  .irc-colours-cardBtn:hover .irc-colours-cue{ opacity: 1; }
}
.irc-colours-cardBtn:focus-visible .irc-colours-cue{ opacity: 1; }
.irc-colours-card.irc-colours-isOpen .irc-colours-cue{ opacity: 0; }

/* Name strip — fixed height so the name never moves and the share button aligns to it */
.irc-colours-nameStrip{
  display: flex;
  align-items: center;
  height: var(--irc-colours-name-height);
  padding: var(--irc-colours-name-padding);
  padding-right: var(--irc-colours-share-gutter);
  border-radius: 0 0 var(--irc-colours-radius) var(--irc-colours-radius);
  background: transparent;
  transition: background-color var(--irc-colours-transition) ease,
              color var(--irc-colours-transition) ease;
}
.irc-colours-name{
  display: block;
  font-size: var(--irc-colours-name-size);
  font-weight: var(--irc-colours-name-weight);
  text-transform: uppercase;
  letter-spacing: .02em;
  line-height: 1.25;
}
.irc-colours-mark{
  font-size: .62em;
  vertical-align: super;
  line-height: 0;
  margin-left: .5px;
  text-transform: none;
}
.irc-colours-card.irc-colours-isOpen .irc-colours-nameStrip{
  box-shadow: inset 1px 0 0 var(--irc-colours-outline),
              inset -1px 0 0 var(--irc-colours-outline);
}
.irc-colours-card.irc-colours-isOpen.irc-colours-isPale .irc-colours-nameStrip{
  box-shadow: inset 1px 0 0 var(--irc-colours-hairline),
              inset -1px 0 0 var(--irc-colours-hairline);
}

/* Share control — sits at the right of the name strip, in line with the name.
   It is a sibling of the card button, never nested inside it. */
.irc-colours-cardShare{
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  right: 6px;
  bottom: 0;
  z-index: 2;
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: var(--irc-colours-name-height);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  border-radius: var(--irc-colours-radius);
}
.irc-colours-card.irc-colours-isOpen .irc-colours-cardShare{ display: flex; }
.irc-colours-cardShare:focus{ outline: none; }
.irc-colours-cardShare:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: -2px;
}
.irc-colours-shareIcon{ display: block; width: 20px; height: 20px; }

.irc-colours-shareStatus{
  position: absolute;
  right: 6px;
  bottom: calc(var(--irc-colours-name-height) + 8px);
  z-index: 3;
  max-width: calc(100% - 12px);
  padding: 6px 10px;
  background: var(--irc-colours-tip-bg);
  color: var(--irc-colours-tip-ink);
  font-size: .75rem;
  font-weight: var(--irc-colours-strong-weight);
  line-height: 1.3;
  border-radius: var(--irc-colours-radius);
  pointer-events: none;
}
.irc-colours-shareStatus:empty{ display: none; }

/* ---------- EXPANDED PANEL ---------- */
.irc-colours-panel{
  grid-column: 1 / -1;
  min-width: 0;
  margin-top: calc(var(--irc-colours-row-gap) * -1);
  border-radius: 0 0 var(--irc-colours-radius) var(--irc-colours-radius);
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity var(--irc-colours-transition) ease,
              transform var(--irc-colours-transition) ease;
}
.irc-colours-panel[hidden]{ display: none; }
.irc-colours-panel.irc-colours-panelOpen{ opacity: 1; transform: none; }
.irc-colours-panel{
  box-shadow: inset 0 0 0 1px var(--irc-colours-outline);
}
.irc-colours-panel.irc-colours-isPale{
  box-shadow: inset 0 0 0 1px var(--irc-colours-hairline);
}
.irc-colours-panelInner{ padding: var(--irc-colours-panel-padding); }

.irc-colours-panelTop{
  display: flex;
  justify-content: flex-end;
  margin-bottom: 6px;
}
.irc-colours-close{
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 4px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: var(--irc-colours-body-size);
  font-weight: var(--irc-colours-strong-weight);
  cursor: pointer;
  border-radius: var(--irc-colours-radius);
}
.irc-colours-close:focus{ outline: none; }
.irc-colours-close:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.irc-colours-closeX{ font-size: 1.05em; line-height: 1; }

.irc-colours-panelGrid{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  column-gap: 44px;
  row-gap: 26px;
  align-items: start;
}
@media (max-width: 767px){
  .irc-colours-panelGrid{
    grid-template-columns: minmax(0,1fr);
    row-gap: 22px;
    text-align: left;
  }
}
.irc-colours-col{ min-width: 0; }

.irc-colours-h{
  margin: 0 0 10px;
  padding: 0;
  font-size: var(--irc-colours-heading-size);
  font-weight: var(--irc-colours-strong-weight);
  letter-spacing: .01em;
  color: inherit;
}
.irc-colours-products{
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.irc-colours-link{
  display: inline-block;
  color: inherit;
  font-size: var(--irc-colours-body-size);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 3px 0;
  border-radius: var(--irc-colours-radius);
}
.irc-colours-link:hover{ text-decoration-thickness: 2px; }
.irc-colours-link:focus{ outline: none; }
.irc-colours-link:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.irc-colours-note{
  margin: 0;
  font-size: var(--irc-colours-body-size);
  opacity: .85;
}
.irc-colours-spec{
  margin: 0 0 8px;
  font-size: var(--irc-colours-body-size);
}
.irc-colours-spec:last-of-type{ margin-bottom: 0; }
.irc-colours-specValue{ font-weight: var(--irc-colours-strong-weight); }

/* --- "View on" links through to the colour visualiser --- */
.irc-colours-viewOn{
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
  padding-top: 18px;
  border-top: 1px solid currentColor;
}
.irc-colours-viewBtn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid currentColor;
  border-radius: var(--irc-colours-radius);
  color: inherit;
  font-size: var(--irc-colours-body-size);
  font-weight: var(--irc-colours-strong-weight);
  text-decoration: none;
  line-height: 1.2;
}
.irc-colours-viewBtn:hover{ text-decoration: underline; text-underline-offset: 3px; }
.irc-colours-viewBtn:focus{ outline: none; }
.irc-colours-viewBtn:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.irc-colours-viewIcon{ display: block; width: 17px; height: 17px; }
@media (max-width: 767px){
  .irc-colours-viewOn{ flex-direction: column; align-items: stretch; }
  .irc-colours-viewBtn{ width: 100%; }
}

.irc-colours-icons{
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
}

/* ---------- ICONS + TOOLTIPS ---------- */
.irc-colours-tipWrap{ position: relative; display: inline-flex; }
.irc-colours-iconBtn{
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 6px;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  border-radius: var(--irc-colours-radius);
}
.irc-colours-iconBtn:focus{ outline: none; }
.irc-colours-iconBtn:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 2px;
}
.irc-colours-icon{ display: block; width: 26px; height: 26px; }

.irc-colours-tip{
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 20;
  width: max-content;
  max-width: min(280px, calc(100vw - 32px));
  padding: 10px 12px;
  background: var(--irc-colours-tip-bg);
  color: var(--irc-colours-tip-ink);
  font-size: .8125rem;
  line-height: 1.4;
  font-weight: var(--irc-colours-font-weight);
  text-transform: none;
  letter-spacing: 0;
  border-radius: var(--irc-colours-radius);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--irc-colours-transition) ease;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine){
  .irc-colours-tipWrap:hover .irc-colours-tip{ opacity: 1; visibility: visible; }
}
.irc-colours-tipWrap:focus-within .irc-colours-tip,
.irc-colours-tipWrap.irc-colours-tipOpen .irc-colours-tip{ opacity: 1; visibility: visible; }

/* ---------- FOOTNOTES ---------- */
.irc-colours-disclaimer{
  margin: 38px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--irc-colours-rule);
  /* spans the full width of the grid. Set --irc-colours-disclaimer-width to a
     value such as 92ch if you would rather keep the lines shorter to read. */
  max-width: var(--irc-colours-disclaimer-width, 100%);
  font-size: .8125rem;
  line-height: 1.6;
  opacity: .82;
}
.irc-colours-disclaimer p{
  margin: 0 0 10px;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
.irc-colours-disclaimer p:last-child{ margin-bottom: 0; }
/* the sun and house symbols, sized to sit on the line of text */
.irc-colours-legendIcon{
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.24em;
  margin: 0 .12em;
}
.irc-colours-legal{
  margin: 10px 0 0;
  font-size: .8125rem;
  line-height: 1.55;
  opacity: .82;
}
.irc-colours-legal:empty{ display: none; }
@media (max-width: 767px){
  .irc-colours-disclaimer,
  .irc-colours-legal{
    padding-left: var(--irc-colours-mobile-padding);
    padding-right: var(--irc-colours-mobile-padding);
  }
}

.irc-colours-srOnly{
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  .irc-colours-root .irc-colours-panel,
  .irc-colours-root .irc-colours-cue,
  .irc-colours-root .irc-colours-tip,
  .irc-colours-root .irc-colours-nameStrip{
    transition: none !important;
  }
  .irc-colours-root .irc-colours-panel{ transform: none !important; }
}

/* ==========================================================================
   THEME ARMOUR - keep the component looking the same on any theme
   --------------------------------------------------------------------------
   Elementor kits and themes routinely style bare `button`, `a`, `h3`, `ul`
   and `p` with selectors such as `.elementor-widget-html button`, which has
   higher specificity than a single class and turns these controls into themed
   pills with their own padding, radius and colours.

   The rules below restate the values this component needs and are marked
   !important so nothing on the site can reach in and change them. They are
   all scoped inside .irc-colours-root, so they cannot affect anything else on
   the page. This block must stay LAST in the stylesheet.
   ========================================================================== */

/* --- buttons --- */
.irc-colours-root button[class]{
  -webkit-appearance: none !important;
  appearance: none !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  text-transform: none !important;
  text-shadow: none !important;
  text-decoration: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: auto;
  height: auto;
  line-height: inherit !important;
  transform: none !important;
  transition: none;
}
/* Colour is set per control below rather than on `button`, because the share
   control takes the open colour's automatic contrast ink and an !important
   rule here would outrank it. */
.irc-colours-root .irc-colours-cardBtn,
.irc-colours-root .irc-colours-close,
.irc-colours-root button.irc-colours-iconBtn{ color: inherit !important; }
/* The card sets --irc-colours-open-ink inline when its panel opens, so the
   share icon always contrasts with the swatch behind it. */
.irc-colours-root .irc-colours-card button.irc-colours-cardShare{
  color: var(--irc-colours-open-ink, inherit) !important;
}
.irc-colours-root button[class]:hover,
.irc-colours-root button[class]:active{
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
}
/* a mouse click must not leave a ring - only keyboard focus shows one */
.irc-colours-root button[class]:focus:not(:focus-visible){
  outline: 0 !important;
  box-shadow: none !important;
}
.irc-colours-root button[data-irc-colours-quietfocus]:focus,
.irc-colours-root button[data-irc-colours-quietfocus]:focus-visible{
  outline: 0 !important;
  box-shadow: none !important;
}

.irc-colours-root button.irc-colours-cardBtn{
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  border-radius: var(--irc-colours-radius) !important;
  text-align: left !important;
  cursor: pointer !important;
}
.irc-colours-root .irc-colours-card button.irc-colours-cardShare{
  position: absolute !important;
  right: 6px !important;
  bottom: 0 !important;
  width: 40px !important;
  height: var(--irc-colours-name-height) !important;
  padding: 0 !important;
  border-radius: var(--irc-colours-radius) !important;
  cursor: pointer !important;
}
.irc-colours-root button.irc-colours-close{
  padding: 6px 4px !important;
  border-radius: var(--irc-colours-radius) !important;
  font-size: var(--irc-colours-body-size) !important;
  font-weight: var(--irc-colours-strong-weight) !important;
  cursor: pointer !important;
}
.irc-colours-root button.irc-colours-iconBtn{
  width: 40px !important;
  height: 40px !important;
  padding: 6px !important;
  border-radius: var(--irc-colours-radius) !important;
  cursor: pointer !important;
}

/* --- links --- */
.irc-colours-root a[class]{
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  text-transform: none !important;
  letter-spacing: inherit !important;
  font-family: inherit !important;
}
.irc-colours-root a[class].irc-colours-link{
  display: inline-block !important;
  padding: 3px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: inherit !important;
  font-size: var(--irc-colours-body-size) !important;
  font-weight: inherit !important;
  text-decoration: underline !important;
}
.irc-colours-root a[class].irc-colours-viewBtn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px !important;
  padding: 10px 18px !important;
  border: 1px solid currentColor !important;
  border-radius: var(--irc-colours-radius) !important;
  color: inherit !important;
  font-size: var(--irc-colours-body-size) !important;
  font-weight: var(--irc-colours-strong-weight) !important;
  text-decoration: none !important;
}

/* --- text --- */
.irc-colours-root .irc-colours-h{
  margin: 0 0 10px !important;
  padding: 0 !important;
  color: inherit !important;
  font-family: inherit !important;
  font-size: var(--irc-colours-heading-size) !important;
  font-weight: var(--irc-colours-strong-weight) !important;
  line-height: 1.35 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
}
.irc-colours-root .irc-colours-products{
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  list-style-type: none !important;
  list-style-image: none !important;
}
.irc-colours-root .irc-colours-products li{
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  list-style-type: none !important;
  display: block !important;
}
.irc-colours-root .irc-colours-products li::before,
.irc-colours-root .irc-colours-products li::marker{ content: none !important; }
.irc-colours-root .irc-colours-spec{
  margin: 0 0 8px !important;
  padding: 0 !important;
  color: inherit !important;
  font-size: var(--irc-colours-body-size) !important;
  line-height: 1.45 !important;
}
.irc-colours-root .irc-colours-spec:last-of-type{ margin-bottom: 0 !important; }
.irc-colours-root .irc-colours-name{
  font-size: var(--irc-colours-name-size) !important;
  font-weight: var(--irc-colours-name-weight) !important;
  line-height: 1.25 !important;
  text-transform: uppercase !important;
  letter-spacing: .02em !important;
  color: inherit !important;
}
.irc-colours-root .irc-colours-mark{
  font-size: .62em !important;
  vertical-align: super !important;
  line-height: 0 !important;
  text-transform: none !important;
}
.irc-colours-root .irc-colours-disclaimer,
.irc-colours-root .irc-colours-legal,
.irc-colours-root .irc-colours-disclaimer p{
  font-size: .8125rem !important;
  line-height: 1.6 !important;
  color: inherit !important;
  text-transform: none !important;
}
.irc-colours-root .irc-colours-disclaimer p{
  margin: 0 0 10px !important;
  padding: 0 !important;
}
.irc-colours-root .irc-colours-disclaimer p:last-child{ margin-bottom: 0 !important; }
.irc-colours-root .irc-colours-disclaimer{
  width: 100% !important;
  max-width: var(--irc-colours-disclaimer-width, 100%) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.irc-colours-root svg.irc-colours-legendIcon{
  width: 1.15em !important;
  height: 1.15em !important;
  display: inline-block !important;
  vertical-align: -0.24em !important;
  max-width: none !important;
}
.irc-colours-root .irc-colours-tip{
  font-size: .8125rem !important;
  font-weight: var(--irc-colours-font-weight) !important;
  line-height: 1.4 !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

/* --- box model: nothing may widen or shift the component --- */
.irc-colours-root{
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: var(--irc-colours-max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
  position: relative !important;
  z-index: 0 !important;
  isolation: isolate !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}
.irc-colours-root .irc-colours-grid{
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding-left: var(--irc-colours-mobile-padding, 0px) !important;
  padding-right: var(--irc-colours-mobile-padding, 0px) !important;
}
.irc-colours-root .irc-colours-card,
.irc-colours-root .irc-colours-panel{
  min-width: 0 !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
.irc-colours-root .irc-colours-tip{
  max-width: min(280px, calc(100vw - 32px)) !important;
}

/* --- boxes and images --- */
.irc-colours-root .irc-colours-swatch{
  border-radius: var(--irc-colours-radius) var(--irc-colours-radius) 0 0 !important;
}
.irc-colours-root .irc-colours-nameStrip{
  height: var(--irc-colours-name-height) !important;
  border-radius: 0 0 var(--irc-colours-radius) var(--irc-colours-radius) !important;
}
.irc-colours-root .irc-colours-panel{
  border-radius: 0 0 var(--irc-colours-radius) var(--irc-colours-radius) !important;
}
.irc-colours-root svg{
  max-width: none !important;
  vertical-align: middle;
}