/* IRC Colour Visualiser - stylesheet. Upload to
   /wp-content/uploads/irc-colour-visualiser/v1/ */
/* ---------- IRC COLOUR VISUALISER - SCOPED STYLES -------------------------
   Every selector below begins with .irc-colour-visualiser, so nothing here
   can affect the theme, Elementor, WooCommerce or any other plugin.
   -------------------------------------------------------------------------- */

.irc-colour-visualiser{
  /* ===== TYPOGRAPHY =====
     Blauer Nue must already be loaded by the IRC theme or by 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. */
  --ircv-font: "Blauer Nue", "BlauerNue", "Blauer Neue",
               -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  --ircv-weight: 500;            /* medium */
  --ircv-weight-strong: 500;     /* headings and buttons */
  --ircv-body-size: 0.9375rem;
  --ircv-small-size: 0.8125rem;

  /* ===== COLOURS =====
     These read the site's own Elementor global colours, so the component
     matches industrialroofcoatings.com.au automatically. The value after the
     comma is only a fallback for when a global is not defined - replace any
     of them with a fixed hex if you would rather pin the colour. */
  --ircv-ink:      var(--e-global-color-text,      #1a1a1a);
  --ircv-heading:  var(--e-global-color-secondary, #14181c);

  /* ---- HIGHLIGHT COLOUR: the IRC green -------------------------------
     Everything that highlights - the selected surface button, the ring on
     the chosen swatch, the request-a-custom-colour button, chevrons and
     focus rings - uses this one value.

     It reads the site's Elementor accent global first. The hex after the
     comma is only used if that global is not defined, and it is a
     PLACEHOLDER, not IRC's green. To pin the exact colour, replace that hex:
       Elementor > Site Settings > Global Colors, or right-click a green
       button on the live site and choose Inspect.                         */
  --ircv-green:      #49A600;   /* IRC green - rings, ticks, chevrons, outlines */

  /* Filled buttons put white text ON the green, and white on #49A600 measures
     3.12:1, which fails WCAG AA for normal text (4.5:1 required). So filled
     areas use the deeper IRC green #367700 - 5.53:1 - while every non-text
     use above stays exactly #49A600.
     If you would rather the buttons were exactly #49A600, set
     --ircv-green-deep to #49A600 and --ircv-green-ink to #141414 (5.91:1). */
  --ircv-green-deep: #367700;
  --ircv-green-ink:  #ffffff;

  /* "Request Custom Colour" button. #395630 on #b6dd6c measures 5.32:1,
     which passes WCAG AA for normal text. */
  --ircv-request-bg:  #b6dd6c;
  --ircv-request-ink: #395630;

  --ircv-brand:    var(--ircv-green);
  --ircv-muted:    #5b5b5b;
  --ircv-rule:     #ddddd8;

  /* ===== LAYOUT ===== */
  --ircv-gap: 44px;              /* gap between preview and controls        */
  --ircv-preview-share: 1.75fr;  /* preview width vs controls (bigger = larger photo) */
  --ircv-sticky-top: 100px;      /* clearance for the sticky site header    */
  --ircv-radius: 3px;
  --ircv-swatch-min: 84px;       /* minimum swatch tile width (desktop grid) */
  --ircv-swatch-mobile: 78px;    /* swatch width in the mobile strip         */
  --ircv-summary-toggle-size: 0.875rem;  /* mobile "View Current Selection" text */
  --ircv-sum-swatch: 30px;       /* mini swatch in the "currently showing" row */
  --ircv-sum-size: 1rem;         /* text size of the "currently showing" row   */
  --ircv-sum-gap: 14px 30px;     /* row gap / column gap between the five items */
  --ircv-touch: 44px;            /* minimum touch target                     */
  --ircv-fab-size: 44px;         /* share control overlaid on the preview    */
  /* The share icon carries about 5px of empty space inside its own box, so the
     gap on the icon side looks larger than the same padding after the text.
     This is added to the right when the pill is open, to even the two up. */
  --ircv-fab-icon-inset: 5px;
  --ircv-transition: 180ms;
  /* The converted swatches are re-squared so the circle fills the frame edge
     to edge (see normalise_swatch in irc-convert-assets.py), which is what
     lets a ring at inset 0 sit perfectly concentric on every colour. */
  --ircv-disc-inset: 0%;
  --ircv-ring: 3px;              /* thickness of the selected ring */

  /* 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. */
  --ircv-max-width: 100%;

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

  /* Keep this component's stacking to itself. The image layers and the loading
     indicator use z-index 1-10; without this they compete with the page for
     stacking order and can end up painting over the mobile menu. Isolating
     means the whole component sits at one level in the page (z-index 0) and
     anything above it - menus, sticky headers, popups - stays above it. */
  position: relative;
  z-index: 0;
  isolation: isolate;

  font-family: var(--ircv-font);
  font-weight: var(--ircv-weight);
  color: var(--ircv-ink);
  line-height: 1.5;
}
.irc-colour-visualiser *,
.irc-colour-visualiser *::before,
.irc-colour-visualiser *::after{ box-sizing: border-box; }

/* ---------- LAYOUT ---------- */
.irc-colour-visualiser .ircv-layout{
  display: grid;
  grid-template-columns: minmax(0, var(--ircv-preview-share)) minmax(0, 1fr);
  gap: var(--ircv-gap);
  align-items: start;            /* required for sticky to work */
}
@media (max-width: 1024px){
  .irc-colour-visualiser .ircv-layout{ grid-template-columns: minmax(0,1fr); }

  /* Stacked, the buttons should come last - a visitor works down the page
     choosing colours and finishes with them. On desktop they stay inside the
     sticky preview column, where they are visible without scrolling.
     display:contents lifts the preview column's children into the grid so
     they can be reordered independently. */
  .irc-colour-visualiser .ircv-stageCol{ display: contents; }
  .irc-colour-visualiser .ircv-stage{ order: 1; }
  .irc-colour-visualiser .ircv-summaryWrap{ order: 2; }
  .irc-colour-visualiser .ircv-controls{ order: 3; }
  .irc-colour-visualiser .ircv-actions{ order: 4; }
}

/* Sticky preview on desktop, so the house stays in view while you scroll
   through the colours. */
@media (min-width: 1025px){
  .irc-colour-visualiser .ircv-stageCol{
    position: sticky;
    top: var(--ircv-sticky-top);
  }
}

/* ---------- PREVIEW STAGE ---------- */
.irc-colour-visualiser .ircv-stage{
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;          /* reserves height, prevents layout shift */
  overflow: hidden;
  border-radius: var(--ircv-radius);
}
.irc-colour-visualiser .ircv-stage img{
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  padding: 0;
  border: 0;
  max-width: none;               /* neutralises theme img rules, scoped only */
}
.irc-colour-visualiser .ircv-base{ z-index: 1; }
/* stacking order: base, wall, roof, fascia, gutters, doors */
.irc-colour-visualiser .ircv-layer[data-ircv-surface="wall"]{ z-index: 2; }
.irc-colour-visualiser .ircv-layer[data-ircv-surface="roof"]{ z-index: 3; }
.irc-colour-visualiser .ircv-layer[data-ircv-surface="fascia"]{ z-index: 4; }
.irc-colour-visualiser .ircv-layer[data-ircv-surface="gutters"]{ z-index: 5; }
.irc-colour-visualiser .ircv-layer[data-ircv-surface="doors"]{ z-index: 6; }

.irc-colour-visualiser .ircv-spinner{
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  background: rgba(255,255,255,.94);
  color: var(--ircv-ink);
  font-size: var(--ircv-small-size);
  border-radius: var(--ircv-radius);
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.irc-colour-visualiser .ircv-spinner[hidden]{ display: none; }
.irc-colour-visualiser .ircv-spinnerDot{
  width: 13px;
  height: 13px;
  border: 2px solid var(--ircv-rule);
  border-top-color: var(--ircv-brand);
  border-radius: 50%;
  animation: ircv-spin 700ms linear infinite;
}
@keyframes ircv-spin{ to{ transform: rotate(360deg); } }

/* ---------- "CURRENTLY SHOWING" ROW UNDER THE PREVIEW ---------- */
.irc-colour-visualiser .ircv-summary{
  display: flex;
  flex-wrap: wrap;
  gap: var(--ircv-sum-gap);
  margin: 18px 0 0;
  padding: 0;
  font-size: var(--ircv-sum-size);
  line-height: 1.3;
}
.irc-colour-visualiser .ircv-sumItem{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.irc-colour-visualiser .ircv-sumDisc{
  position: relative;
  flex: 0 0 auto;
  width: var(--ircv-sum-swatch);
  height: var(--ircv-sum-swatch);
}
.irc-colour-visualiser .ircv-sumSwatch{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  border: 0;
  max-width: none;
  background: transparent;
}
/* same hairline treatment as the main grid, for pale colours only */
.irc-colour-visualiser .ircv-sumDisc[data-ircv-outline="true"]::after{
  content: "";
  position: absolute;
  inset: var(--ircv-disc-inset);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.30);
}
.irc-colour-visualiser .ircv-sumLabel{ color: var(--ircv-muted); }
.irc-colour-visualiser .ircv-sumValue{
  color: var(--ircv-ink);
  font-weight: 700;
}
/* the colour name links through to that colour on the Colours page */
.irc-colour-visualiser a.ircv-sumValue{
  color: var(--ircv-ink);
  text-decoration: underline;
  text-decoration-color: var(--ircv-rule);
  text-underline-offset: 3px;
  border-radius: 2px;
}
.irc-colour-visualiser a.ircv-sumValue:hover{
  color: var(--ircv-green-deep);
  text-decoration-color: currentColor;
}
.irc-colour-visualiser a.ircv-sumValue:focus{ outline: none; }
.irc-colour-visualiser a.ircv-sumValue:focus-visible{
  outline: 3px solid var(--ircv-brand);
  outline-offset: 2px;
}

/* ---------- SWATCHES (shared by both layouts) ----------
   The supplied swatch PNGs are circles on a transparent square canvas, so
   nothing draws a box around them. Rings are drawn on the circle itself. */
.irc-colour-visualiser .ircv-radio{
  position: absolute;
  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;
}
.irc-colour-visualiser .ircv-swatchLabel{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: center;
}
.irc-colour-visualiser .ircv-disc{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
}
.irc-colour-visualiser .ircv-swatchImg{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  max-width: none;
  border: 0;
  background: transparent;
}
/* ring layer sits exactly on the printed circle */
.irc-colour-visualiser .ircv-disc::after{
  content: "";
  position: absolute;
  inset: var(--ircv-disc-inset);
  border-radius: 50%;
  pointer-events: none;
  transition: box-shadow var(--ircv-transition) ease;
}
/* only colours listed in OUTLINE_SLUGS get a permanent hairline circle,
   so pale swatches such as IRC White stay visible on a white page */
.irc-colour-visualiser .ircv-swatchLabel[data-ircv-outline="true"] .ircv-disc::after{
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.30);
}
.irc-colour-visualiser .ircv-swatchLabel:hover .ircv-disc::after{
  box-shadow: inset 0 0 0 var(--ircv-ring) var(--ircv-rule);
}
.irc-colour-visualiser .ircv-radio:checked + .ircv-swatchLabel .ircv-disc::after{
  box-shadow: inset 0 0 0 var(--ircv-ring) var(--ircv-brand);
}
.irc-colour-visualiser .ircv-radio:focus-visible + .ircv-swatchLabel .ircv-disc::after{
  box-shadow: inset 0 0 0 var(--ircv-ring) var(--ircv-brand),
              0 0 0 3px rgba(0,0,0,.22);
}
.irc-colour-visualiser .ircv-swatchName{
  font-size: var(--ircv-small-size);
  line-height: 1.25;
  color: var(--ircv-ink);
}
.irc-colour-visualiser .ircv-radio:checked + .ircv-swatchLabel .ircv-swatchName{
  font-weight: 700;
}
/* selection is never signalled by colour alone - a tick is shown too */
.irc-colour-visualiser .ircv-tick{
  display: none;
  font-size: var(--ircv-small-size);
  font-weight: 700;
  color: var(--ircv-brand);
}
.irc-colour-visualiser .ircv-radio:checked + .ircv-swatchLabel .ircv-tick{ display: block; }

/* the toggle is mobile only - on larger screens the row is always visible */
.irc-colour-visualiser .ircv-summaryToggle{ display: none; }

@media (max-width: 767px){
  .irc-colour-visualiser .ircv-summaryToggle{
    -webkit-appearance: none;
    appearance: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: var(--ircv-touch);
    margin: 0;
    padding: 12px 2px;
    border: 0;
    border-top: 1px solid var(--ircv-rule);
    background: transparent;
    color: var(--ircv-green-deep);
    font: inherit;
    font-size: var(--ircv-summary-toggle-size);
    font-weight: var(--ircv-weight-strong);
    text-align: left;
    cursor: pointer;
  }
  .irc-colour-visualiser .ircv-summaryToggle:focus{ outline: none; }
  .irc-colour-visualiser .ircv-summaryToggle:focus-visible{
    outline: 3px solid var(--ircv-brand);
    outline-offset: -3px;
  }
  .irc-colour-visualiser .ircv-summaryChev{
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--ircv-brand);
    transition: transform var(--ircv-transition) ease;
  }
  .irc-colour-visualiser .ircv-summaryToggle[aria-expanded="true"] .ircv-summaryChev{
    transform: rotate(180deg);
  }
  /* The closing rule sits on the wrapper rather than the button, so it stays
     beneath whatever is showing - tight under the label when closed, and below
     the last colour when the list is open. */
  .irc-colour-visualiser .ircv-summaryWrap{
    border-bottom: 1px solid var(--ircv-rule);
  }

  /* collapsed by default; one item per line when opened, which reads better on
     a narrow screen than a wrapping row */
  .irc-colour-visualiser .ircv-summary{ display: none; }
  .irc-colour-visualiser .ircv-summaryWrap.ircv-summaryOpen .ircv-summary{
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    /* 12px at the bottom matches the toggle's own padding, so the closing rule
       sits the same distance from the last colour as the top rule does from
       the label */
    padding: 4px 2px 12px;
  }
}

/* the chevron drawn by the script (used by the summary toggle) */
.irc-colour-visualiser .ircv-chev{
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  color: var(--ircv-brand);
}

/* ---------- CONTROLS: surface buttons + colour panel ----------
   The same controls at every width. The panel is a wrapping grid on tablet and
   desktop, and a single swipeable row on mobile. */
.irc-colour-visualiser .ircv-tabs{
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 0 10px;
  margin: 0;
}
.irc-colour-visualiser .ircv-tabs::-webkit-scrollbar{ display: none; }
.irc-colour-visualiser .ircv-tab{
  -webkit-appearance: none;
  appearance: none;
  /* equal shares of the row, but never squeezed below the label - if the five
     will not fit, the row scrolls sideways on mobile as before */
  flex: 1 1 0;
  min-width: max-content;
  text-align: center;
  min-height: var(--ircv-touch);
  padding: 10px 14px;
  border: 1px solid var(--ircv-rule);
  border-radius: var(--ircv-radius);
  background: transparent;
  color: var(--ircv-ink);
  font: inherit;
  font-size: var(--ircv-body-size);
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}
.irc-colour-visualiser .ircv-tab[aria-pressed="true"]{
  background: var(--ircv-green-deep);
  border-color: var(--ircv-green-deep);
  color: var(--ircv-green-ink);
  font-weight: 700;
}
.irc-colour-visualiser .ircv-tab:focus{ outline: none; }
.irc-colour-visualiser .ircv-tab:focus-visible{
  outline: 3px solid var(--ircv-brand);
  outline-offset: 2px;
}

.irc-colour-visualiser .ircv-stripHead{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 4px 0 8px;
}
.irc-colour-visualiser .ircv-stripLabel{
  font-size: var(--ircv-body-size);
  font-weight: var(--ircv-weight-strong);
  color: var(--ircv-heading);
}
.irc-colour-visualiser .ircv-stripHint{
  font-size: var(--ircv-small-size);
  color: var(--ircv-muted);
}
.irc-colour-visualiser .ircv-strip{
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding: 4px 0 10px;
  /* fades hint that the row continues past the edge */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
}
.irc-colour-visualiser .ircv-stripInner{
  display: flex;
  gap: 14px;
  padding: 0 14px;
  width: max-content;
}
.irc-colour-visualiser .ircv-strip .ircv-swatchLabel{
  flex: 0 0 auto;
  width: var(--ircv-swatch-mobile);
  scroll-snap-align: center;
}

/* Tablet and desktop: the same panel laid out as a wrapping grid, with no
   sideways scrolling, masking or snapping. */
@media (min-width: 768px){
  .irc-colour-visualiser .ircv-tabs{
    flex-wrap: nowrap;
    overflow: visible;
    padding-bottom: 14px;
  }
  .irc-colour-visualiser .ircv-strip{
    overflow: visible;
    scroll-snap-type: none;
    padding: 2px 0 0;
    -webkit-mask-image: none;
            mask-image: none;
  }
  .irc-colour-visualiser .ircv-stripInner{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--ircv-swatch-min), 1fr));
    gap: 18px 12px;
    width: auto;
    padding: 0;
  }
  .irc-colour-visualiser .ircv-strip .ircv-swatchLabel{
    width: auto;
    flex: initial;
  }
  .irc-colour-visualiser .ircv-stripHint{ display: none; }
}

/* ---------- ACTIONS ---------- */
.irc-colour-visualiser .ircv-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}
/* Share spans the row; Reset and Request each take half of it beneath, and
   only fall onto separate lines if the column gets very narrow. */
.irc-colour-visualiser .ircv-btnFull{ flex: 1 1 100%; }
.irc-colour-visualiser .ircv-btnHalf{ flex: 1 1 150px; }
/* Reset is the least important action, so it stays neutral rather than
   competing with the three green ones. */
.irc-colour-visualiser .ircv-btnQuiet{
  border-color: var(--ircv-rule);
  color: var(--ircv-muted);
}
.irc-colour-visualiser .ircv-btnQuiet:hover{ border-color: var(--ircv-ink); color: var(--ircv-ink); }
.irc-colour-visualiser .ircv-btnRequest{
  background: var(--ircv-request-bg);
  border-color: var(--ircv-request-bg);
  color: var(--ircv-request-ink);
}
.irc-colour-visualiser .ircv-btnRequest:hover{
  background: var(--ircv-request-bg);
  color: var(--ircv-request-ink);
}
/* the full wording on desktop, the short form on mobile where the button is
   half the width and would otherwise wrap onto two lines */
.irc-colour-visualiser .ircv-labelShort{ display: none; }
@media (max-width: 767px){
  .irc-colour-visualiser .ircv-labelLong{ display: none; }
  .irc-colour-visualiser .ircv-labelShort{ display: inline; }
}
.irc-colour-visualiser .ircv-btn{
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--ircv-touch);
  padding: 12px 20px;
  border: 1px solid var(--ircv-brand);
  border-radius: var(--ircv-radius);
  background: transparent;
  color: var(--ircv-green-deep);   /* green text on white needs the deeper shade */
  font: inherit;
  font-size: var(--ircv-body-size);
  font-weight: var(--ircv-weight-strong);
  cursor: pointer;
  text-decoration: none;
}
.irc-colour-visualiser .ircv-btnPrimary{
  background: var(--ircv-green-deep);
  border-color: var(--ircv-green-deep);
  color: var(--ircv-green-ink);
}
.irc-colour-visualiser .ircv-btn:focus{ outline: none; }
.irc-colour-visualiser .ircv-btn:focus-visible{
  outline: 3px solid var(--ircv-brand);
  outline-offset: 2px;
}
.irc-colour-visualiser .ircv-icon{ width: 17px; height: 17px; display: block; }

/* ---------- SHARE CONTROL, OVERLAID ON THE PREVIEW ---------- */
.irc-colour-visualiser .ircv-shareFab{
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 12px;
  right: 12px;                 /* anchored right, so it grows leftwards */
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--ircv-fab-size);
  height: var(--ircv-fab-size);
  margin: 0;
  padding: 0 calc((var(--ircv-fab-size) - 20px) / 2);
  border: 0;
  border-radius: 999px;        /* circle when closed, pill when open */
  background: var(--ircv-green-deep);
  color: var(--ircv-green-ink);
  font: inherit;
  font-size: var(--ircv-small-size);
  font-weight: var(--ircv-weight-strong);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.28);
}
/* The label is collapsed to nothing until the control is hovered or focused,
   which turns the circle into a pill without moving its right-hand edge. */
.irc-colour-visualiser .ircv-fabText{
  display: block;
  max-width: 0;
  margin-left: 0;
  margin-right: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-width var(--ircv-transition) ease,
              margin-left var(--ircv-transition) ease,
              margin-right var(--ircv-transition) ease,
              opacity var(--ircv-transition) ease;
}
@media (hover: hover) and (pointer: fine){
  .irc-colour-visualiser .ircv-shareFab:hover .ircv-fabText{
    max-width: 12em;
    margin-left: 8px;
    margin-right: var(--ircv-fab-icon-inset);
    opacity: 1;
  }
}
.irc-colour-visualiser .ircv-shareFab:focus-visible .ircv-fabText{
  max-width: 12em;
  margin-left: 8px;
  margin-right: var(--ircv-fab-icon-inset);
  opacity: 1;
}
.irc-colour-visualiser .ircv-shareFab:focus{ outline: none; }
.irc-colour-visualiser .ircv-shareFab:focus-visible{
  outline: 3px solid var(--ircv-green-ink);
  outline-offset: -6px;
}
.irc-colour-visualiser .ircv-shareFab .ircv-icon{ width: 20px; height: 20px; }

/* feedback after copying the link, shown beside the control */
.irc-colour-visualiser .ircv-shareStatus{
  position: absolute;
  top: calc(var(--ircv-fab-size) + 20px);
  right: 12px;
  z-index: 8;
  max-width: calc(100% - 24px);
  padding: 6px 10px;
  background: rgba(0,0,0,.78);
  color: #ffffff;
  font-size: var(--ircv-small-size);
  font-weight: var(--ircv-weight-strong);
  line-height: 1.3;
  border-radius: var(--ircv-radius);
  white-space: nowrap;
  pointer-events: none;
}
.irc-colour-visualiser .ircv-shareStatus:empty{ display: none; }

/* ---------- DISCLAIMER ---------- */
.irc-colour-visualiser .ircv-disclaimer{
  margin: 38px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--ircv-rule);
  max-width: var(--ircv-disclaimer-width, 100%);
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--ircv-ink);
  opacity: .82;
}
.irc-colour-visualiser .ircv-disclaimer p{
  margin: 0 0 10px;
  padding: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
.irc-colour-visualiser .ircv-disclaimer p:last-child{ margin-bottom: 0; }
/* the sun and house symbols, sized to sit on the line of text */
.irc-colour-visualiser .ircv-legendIcon{
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.24em;
  margin: 0 .12em;
}

/* screen-reader only live region */
.irc-colour-visualiser .ircv-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;
}

/* ---------- MOBILE SIZING ---------- */
@media (max-width: 1024px){
  .irc-colour-visualiser{ --ircv-swatch-mobile: 84px; }
}
@media (max-width: 767px){
  /* a little more room under the surface buttons, and less dead space under
     the swatch row, which sat too far from what follows it */
  .irc-colour-visualiser .ircv-tabs{ padding-bottom: 16px; }
  .irc-colour-visualiser .ircv-strip{ padding-bottom: 0; }
  .irc-colour-visualiser .ircv-stripHead{ margin-bottom: 6px; }

  .irc-colour-visualiser{
    --ircv-gap: 20px;
    --ircv-fab-size: 42px;
    --ircv-swatch-mobile: 78px;
    --ircv-sum-swatch: 24px;
    --ircv-sum-size: 0.875rem;
    --ircv-sum-gap: 10px 20px;
  }
  .irc-colour-visualiser .ircv-btnFull{ flex: 1 1 100%; }
  .irc-colour-visualiser .ircv-btnHalf{ flex: 1 1 130px; }
}
@media (max-width: 767px){
  .irc-colour-visualiser .ircv-tab{ padding: 10px 10px; }
}
@media (max-width: 360px){
  .irc-colour-visualiser{ --ircv-swatch-mobile: 70px; }
  .irc-colour-visualiser .ircv-tab{ padding: 10px 8px; font-size: var(--ircv-small-size); }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce){
  .irc-colour-visualiser .ircv-spinnerDot{ animation: none; }
  .irc-colour-visualiser .ircv-summaryChev,
  .irc-colour-visualiser .ircv-fabText,
  .irc-colour-visualiser .ircv-disc::after{ transition: none; }
  .irc-colour-visualiser .ircv-strip{ scroll-behavior: auto; }
}

/* ==========================================================================
   THEME ARMOUR - keep the component looking the same on any theme
   --------------------------------------------------------------------------
   Elementor kits and themes routinely style bare `button`, `a` and `img` with
   selectors such as `.elementor-widget-html button`, whose specificity beats 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-colour-visualiser, so they cannot affect anything else on
   the page. This block must stay LAST in the stylesheet.
   ========================================================================== */

.irc-colour-visualiser 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;
  color: inherit !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;
}
.irc-colour-visualiser button[class]:hover,
.irc-colour-visualiser button[class]:active{
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
}
.irc-colour-visualiser button[class]:focus:not(:focus-visible){
  outline: 0 !important;
  box-shadow: none !important;
}
.irc-colour-visualiser [data-ircv-quietfocus]:focus,
.irc-colour-visualiser [data-ircv-quietfocus]:focus-visible{
  outline: 0 !important;
  box-shadow: none !important;
}

.irc-colour-visualiser button.ircv-tab{
  min-height: var(--ircv-touch) !important;
  padding: 10px 14px !important;
  border: 1px solid var(--ircv-rule) !important;
  border-radius: var(--ircv-radius) !important;
  font-size: var(--ircv-body-size) !important;
  line-height: 1.2 !important;
  cursor: pointer !important;
  flex: 1 1 0 !important;
  min-width: max-content !important;
  text-align: center !important;
}
.irc-colour-visualiser button.ircv-tab[aria-pressed="true"]{
  background: var(--ircv-green-deep) !important;
  border-color: var(--ircv-green-deep) !important;
  color: var(--ircv-green-ink) !important;
  font-weight: 700 !important;
}
.irc-colour-visualiser button.ircv-btn{
  display: inline-flex !important;
  min-height: var(--ircv-touch) !important;
  padding: 12px 20px !important;
  border: 1px solid var(--ircv-green-deep) !important;
  border-radius: var(--ircv-radius) !important;
  background: transparent !important;
  color: var(--ircv-green-deep) !important;
  font-size: var(--ircv-body-size) !important;
  font-weight: var(--ircv-weight-strong) !important;
  cursor: pointer !important;
}
.irc-colour-visualiser button.ircv-shareFab{
  position: absolute !important;
  top: 12px !important;
  right: 12px !important;
  bottom: auto !important;
  min-width: var(--ircv-fab-size) !important;
  width: auto !important;
  height: var(--ircv-fab-size) !important;
  min-height: 0 !important;
  padding: 0 calc((var(--ircv-fab-size) - 20px) / 2) !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--ircv-green-deep) !important;
  color: var(--ircv-green-ink) !important;
  font-size: var(--ircv-small-size) !important;
  font-weight: var(--ircv-weight-strong) !important;
  text-transform: none !important;
  cursor: pointer !important;
}

/* Find an Applicator is an anchor, and the generic link armour above strips
   backgrounds - so the filled green has to be restated for it here. */
.irc-colour-visualiser a[class].ircv-btn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: var(--ircv-touch) !important;
  padding: 12px 20px !important;
  border: 1px solid var(--ircv-green-deep) !important;
  border-radius: var(--ircv-radius) !important;
  color: var(--ircv-green-deep) !important;
  font-size: var(--ircv-body-size) !important;
  font-weight: var(--ircv-weight-strong) !important;
  text-decoration: none !important;
  text-align: center !important;
}
.irc-colour-visualiser a[class].ircv-btnPrimary{
  background: var(--ircv-green-deep) !important;
  border-color: var(--ircv-green-deep) !important;
  color: var(--ircv-green-ink) !important;
}
.irc-colour-visualiser button.ircv-btnQuiet{
  border-color: var(--ircv-rule) !important;
  color: var(--ircv-muted) !important;
}
.irc-colour-visualiser a[class].ircv-btnRequest{
  display: inline-flex !important;
  min-height: var(--ircv-touch) !important;
  padding: 12px 20px !important;
  border: 1px solid var(--ircv-request-bg) !important;
  border-radius: var(--ircv-radius) !important;
  background: var(--ircv-request-bg) !important;
  color: var(--ircv-request-ink) !important;
  font-size: var(--ircv-body-size) !important;
  font-weight: var(--ircv-weight-strong) !important;
  text-decoration: none !important;
  text-align: center !important;
}
.irc-colour-visualiser button.ircv-btnPrimary{
  background: var(--ircv-green-deep) !important;
  border-color: var(--ircv-green-deep) !important;
  color: var(--ircv-green-ink) !important;
}

.irc-colour-visualiser 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-colour-visualiser a[class].ircv-sumValue{
  padding: 0 !important;
  border: 0 !important;
  border-radius: 2px !important;
  color: var(--ircv-ink) !important;
  font-size: inherit !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
}
.irc-colour-visualiser a[class].ircv-sumValue:hover{ color: var(--ircv-green-deep) !important; }

/* --- labels: themes routinely set label{display:block;font-weight:700;margin}
       which would break the swatch tiles --- */
.irc-colour-visualiser label[class]{
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: inherit !important;
  font: inherit !important;
  font-size: inherit !important;
  text-transform: none !important;
  letter-spacing: inherit !important;
  line-height: 1.3 !important;
  cursor: pointer !important;
  width: auto;
  float: none !important;
}

/* --- the radio inputs stay visually hidden but focusable; themes that style
       `input` with width/height/border would otherwise reveal them --- */
.irc-colour-visualiser input[type="radio"].ircv-radio{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  min-height: 0 !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  opacity: 1 !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

/* --- structural blocks --- */
.irc-colour-visualiser div[class],
.irc-colour-visualiser span[class]{
  box-sizing: border-box !important;
}
.irc-colour-visualiser .ircv-stage{
  position: relative !important;
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  width: 100% !important;
}
.irc-colour-visualiser .ircv-stage img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  margin: 0 !important;
  padding: 0 !important;
}
.irc-colour-visualiser .ircv-disc{
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.irc-colour-visualiser .ircv-swatches,
.irc-colour-visualiser .ircv-tabs,
.irc-colour-visualiser .ircv-stripInner{
  background: transparent !important;
  box-shadow: none !important;
}
.irc-colour-visualiser .ircv-spinner{
  background: rgba(255,255,255,.94) !important;
  color: var(--ircv-ink) !important;
  font-size: var(--ircv-small-size) !important;
}

/* --- box model: nothing may widen or shift the component --- */
.irc-colour-visualiser{
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: var(--ircv-max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
  position: relative !important;
  z-index: 0 !important;
  isolation: isolate !important;
  transform: none !important;
}
.irc-colour-visualiser .ircv-layout,
.irc-colour-visualiser .ircv-controls{
  min-width: 0 !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
@media (max-width: 1024px){
  .irc-colour-visualiser .ircv-stageCol{ display: contents !important; }
}
.irc-colour-visualiser .ircv-strip{ max-width: 100% !important; }
@media (min-width: 768px){
  .irc-colour-visualiser .ircv-stripInner{
    display: grid !important;
    width: auto !important;
    padding: 0 !important;
  }
  .irc-colour-visualiser .ircv-strip{ overflow: visible !important; }
}

/* images: themes love adding radius, borders and max-width to img */
.irc-colour-visualiser .ircv-stage img,
.irc-colour-visualiser .ircv-swatchImg,
.irc-colour-visualiser .ircv-sumSwatch{
  max-width: none !important;
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}
.irc-colour-visualiser .ircv-stage img{ border-radius: 0 !important; }
.irc-colour-visualiser .ircv-swatchImg,
.irc-colour-visualiser .ircv-sumSwatch{ border-radius: 50% !important; }

.irc-colour-visualiser .ircv-labelShort,
.irc-colour-visualiser .ircv-labelLong{
  text-transform: none !important;
  letter-spacing: inherit !important;
}
.irc-colour-visualiser .ircv-labelShort{ display: none !important; }
@media (max-width: 767px){
  .irc-colour-visualiser .ircv-labelLong{ display: none !important; }
  .irc-colour-visualiser .ircv-labelShort{ display: inline !important; }
  .irc-colour-visualiser button.ircv-summaryToggle{
    font-size: var(--ircv-summary-toggle-size) !important;
  }
}
.irc-colour-visualiser button.ircv-summaryToggle{
  text-transform: none !important;
  letter-spacing: inherit !important;
  color: var(--ircv-green-deep) !important;
}
@media (max-width: 767px){
  .irc-colour-visualiser button.ircv-summaryToggle{
    display: flex !important;
    width: 100% !important;
    min-height: var(--ircv-touch) !important;
    margin: 0 !important;
    padding: 12px 2px !important;
    border-top: 1px solid var(--ircv-rule) !important;
    border-bottom: 0 !important;
  }
  .irc-colour-visualiser .ircv-summaryWrap{
    border-bottom: 1px solid var(--ircv-rule) !important;
  }
  .irc-colour-visualiser .ircv-tabs{ padding-bottom: 16px !important; }
  .irc-colour-visualiser .ircv-strip{ padding-bottom: 0 !important; }
}
.irc-colour-visualiser .ircv-summary{
  margin: 18px 0 0 !important;
  padding: 0 !important;
  font-size: var(--ircv-sum-size) !important;
  line-height: 1.3 !important;
}
/* On mobile the summary sits inside the disclosure, where it needs its own
   spacing. This has to be restated here because the rule above is !important
   and would otherwise flatten it. */
@media (max-width: 767px){
  .irc-colour-visualiser .ircv-summaryWrap.ircv-summaryOpen .ircv-summary{
    margin: 0 !important;
    padding: 4px 2px 12px !important;
  }
}
.irc-colour-visualiser .ircv-swatchName,
.irc-colour-visualiser .ircv-stripHint{
  font-size: var(--ircv-small-size) !important;
  text-transform: none !important;
}
.irc-colour-visualiser svg{ max-width: none !important; vertical-align: middle; }
.irc-colour-visualiser .ircv-disclaimer,
.irc-colour-visualiser .ircv-disclaimer p{
  font-size: .8125rem !important;
  line-height: 1.6 !important;
  color: var(--ircv-ink) !important;
  text-transform: none !important;
}
.irc-colour-visualiser .ircv-disclaimer{
  width: 100% !important;
  max-width: var(--ircv-disclaimer-width, 100%) !important;
  margin: 38px 0 0 !important;
}
.irc-colour-visualiser .ircv-disclaimer p{ margin: 0 0 10px !important; padding: 0 !important; }
.irc-colour-visualiser .ircv-disclaimer p:last-child{ margin-bottom: 0 !important; }
.irc-colour-visualiser svg.ircv-legendIcon{
  width: 1.15em !important;
  height: 1.15em !important;
  display: inline-block !important;
  vertical-align: -0.24em !important;
}