/* Sunflower Sign Designer — product page configurator.
   Deliberately low-specificity and theme-agnostic: everything is namespaced
   under .ssd so hello-elementor and Elementor Pro styles win where they should. */

.ssd, .ssd-stage-wrap {
  --ssd-rule: #dfe1dd;
  --ssd-ink: #1b2426;
  --ssd-ink-2: #5a6566;
  --ssd-ink-3: #838d8c;
  --ssd-accent: #0f6e5c;
  --ssd-warn: #a6412c;
  --ssd-warn-soft: #f9ece8;
  --ssd-surface: #fff;
  --ssd-sunk: #f6f7f4;
  display: block;
  margin: 0 0 1.5rem;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ssd-ink);
}

.ssd *, .ssd *::before, .ssd *::after { box-sizing: border-box; }

.ssd-stage-wrap.woocommerce-product-gallery {
  /* we borrow the gallery's classes for the theme's column width, then undo
     the gallery's own decoration */
  opacity: 1 !important;
  padding: 0; border: 0; background: none;
}
.ssd-stage-wrap {
  display: flex; flex-direction: column; gap: .6rem;
  margin: 0 0 1.5rem;
  font-size: 15px; line-height: 1.5; color: var(--ssd-ink);
}
.ssd-stage-wrap *, .ssd-stage-wrap *::before, .ssd-stage-wrap *::after { box-sizing: border-box; }
.ssd__stage { min-height: 18rem; }

.ssd__stage {
  border: 1px solid var(--ssd-rule);
  border-radius: 4px;
  padding: clamp(1rem, 4vw, 2rem);
  display: grid;
  place-items: center;
  min-height: 12rem;
  transition: background-color .25s ease;
}
.ssd__stage[data-bg="white"] { background: #f4f4f1; }
.ssd__stage[data-bg="oak"] {
  background:
    radial-gradient(120% 90% at 30% 5%, rgba(255,240,214,.30), rgba(0,0,0,.16) 78%),
    repeating-linear-gradient(96deg, #c08e52 0 7px, #b8854a 7px 13px, #c49459 13px 22px);
}
.ssd__stage[data-bg="mahogany"] {
  background:
    radial-gradient(120% 90% at 28% 4%, rgba(255,206,170,.22), rgba(0,0,0,.34) 76%),
    repeating-linear-gradient(93deg, #5c2519 0 5px, #4a1c12 5px 9px, #67301f 9px 15px, #521f15 15px 24px);
}
.ssd__stage[data-bg="dark"] {
  background: radial-gradient(120% 90% at 30% 5%, rgba(255,255,255,.07), rgba(0,0,0,.25) 80%), #2b2e30;
}
/* Openers get value steps rather than door materials: a mid warm tone between
   the white and the dark, so a pale print colour on a pale body has somewhere
   to fail visibly before a run of a hundred is committed. */
.ssd__stage[data-bg="kraft"] {
  background: radial-gradient(120% 90% at 30% 5%, rgba(255,246,224,.28), rgba(0,0,0,.14) 80%), #c8a97b;
}
.ssd__sign { width: 100%; }
.ssd__sign svg {
  width: 100%; height: auto; display: block;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.22));
}

.ssd__stage-bar {
  display: flex; flex-wrap: wrap; gap: .5rem;
  align-items: center; justify-content: space-between;
}
.ssd__dims {
  font-size: .72rem; color: var(--ssd-ink-3);
  font-variant-numeric: tabular-nums;
}

.ssd__segs { display: flex; border: 1px solid var(--ssd-rule); border-radius: 2px; overflow: hidden; }
.ssd .ssd__segs button,
.ssd-stage-wrap .ssd__segs button {
  background: var(--ssd-surface);
  border: 0; border-right: 1px solid var(--ssd-rule);
  color: var(--ssd-ink-3);
  font: inherit; font-size: .72rem; font-weight: 500;
  letter-spacing: .04em; text-transform: uppercase;
  padding: .4rem .7rem; cursor: pointer; margin: 0;
  border-radius: 0; min-height: 0; line-height: 1.4;
}
.ssd__segs button:last-child { border-right: 0; }
.ssd .ssd__segs button[aria-pressed="true"],
.ssd-stage-wrap .ssd__segs button[aria-pressed="true"] {
  background: var(--ssd-accent);
  color: #fff;
  border-color: var(--ssd-accent);
}
.ssd__segs button:focus-visible { outline: 2px solid var(--ssd-accent); outline-offset: -2px; }
.ssd__segs--wide { align-self: flex-start; }
.ssd__segs--wide button { padding: .45rem 1.1rem; }

.ssd__panel {
  background: var(--ssd-surface);
  border: 1px solid var(--ssd-rule);
  border-radius: 4px;
  display: flex; flex-direction: column;
  align-self: start;
}
.ssd__field {
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--ssd-rule);
  display: flex; flex-direction: column; gap: .6rem;
}
.ssd__field:last-child { border-bottom: 0; }
.ssd__field > header {
  display: flex; align-items: baseline; justify-content: space-between; gap: .5rem;
}
.ssd__field h3 {
  margin: 0; font-size: .68rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ssd-ink-3);
  line-height: 1.4;
}
.ssd__val { font-size: .78rem; color: var(--ssd-ink-2); text-align: right; }

.ssd__designs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .45rem; }
.ssd__design {
  padding: .25rem; background: var(--ssd-sunk);
  border: 1px solid var(--ssd-rule); border-radius: 3px;
  cursor: pointer; display: block; line-height: 0; margin: 0; min-height: 0;
}
.ssd__design svg { width: 100%; height: auto; }
.ssd__design[aria-pressed="true"] {
  border-color: var(--ssd-accent);
  box-shadow: 0 0 0 2px var(--ssd-accent) inset;
}
.ssd__design:focus-visible { outline: 2px solid var(--ssd-accent); outline-offset: 1px; }

.ssd__swatches {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(1.6rem, 1fr)); gap: .35rem;
}
.ssd .ssd__swatches button.ssd__swatch {
  aspect-ratio: 1;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 50%;
  cursor: pointer;
  padding: 0; margin: 0; min-height: 0; min-width: 0;
  width: 100%; height: auto;
  box-shadow: none;
  -webkit-appearance: none; appearance: none;
  font-size: 0; line-height: 0;
}
.ssd .ssd__swatches button.ssd__swatch[aria-pressed="true"] {
  box-shadow: 0 0 0 2px #fff inset, 0 0 0 3px var(--ssd-accent);
}
.ssd__swatch:focus-visible { outline: 2px solid var(--ssd-accent); outline-offset: 3px; }

.ssd__locked, .ssd__hint { margin: 0; font-size: .8rem; color: var(--ssd-ink-3); }
.ssd__locked { font-style: italic; }

.ssd__btn {
  background: var(--ssd-surface); border: 1px solid var(--ssd-rule);
  color: var(--ssd-ink-2); font: inherit; font-size: .74rem; font-weight: 500;
  letter-spacing: .05em; text-transform: uppercase;
  padding: .45rem .75rem; border-radius: 2px; cursor: pointer;
  align-self: flex-start; margin: 0; min-height: 0;
}
.ssd__btn:hover { color: var(--ssd-accent); border-color: var(--ssd-accent); }

.ssd__alert {
  margin: 0 1rem 1rem; background: var(--ssd-warn-soft);
  border-left: 3px solid var(--ssd-warn); border-radius: 2px;
  padding: .7rem .85rem; font-size: .85rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.ssd__alert[hidden] { display: none; }
.ssd__alert-ok { font-size: .8rem; color: var(--ssd-ink-2); }

/* The one-click contrast fix inside the warning. Styled as a real button rather
   than a link: it changes the customer's configuration, and something that
   changes state should not look like something that explains it. */
.ssd__alert-fix {
	display: inline-block;
	margin: .35rem .5rem .1rem 0;
	padding: .3rem .7rem;
	font: inherit;
	font-size: .82rem;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ssd-ink-1, #1b1b1b);
	background: #fff;
	border: 1px solid currentColor;
	border-radius: 999px;
	cursor: pointer;
}
.ssd__alert-fix:hover,
.ssd__alert-fix:focus-visible { background: var(--ssd-ink-1, #1b1b1b); color: #fff; }

.ssd__gate {
  margin: 0 1rem 1rem; border: 1px solid var(--ssd-warn);
  background: var(--ssd-warn-soft); border-radius: 3px;
  padding: .85rem .9rem; display: flex; flex-direction: column; gap: .6rem;
}
.ssd__gate h4 {
  margin: 0; font-size: .7rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ssd-warn);
}
.ssd__gate p { margin: 0; font-size: .88rem; }
.ssd__gate label {
  display: flex; gap: .5rem; align-items: flex-start;
  font-size: .85rem; line-height: 1.45; cursor: pointer;
}
.ssd__gate label input { margin-top: .25rem; flex: none; }
.ssd__gate-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.ssd__gate-row button {
  flex: 1 1 8rem; font: inherit; font-size: .78rem; font-weight: 600;
  padding: .55rem .7rem; border-radius: 2px; cursor: pointer;
  border: 1px solid rgba(0,0,0,.2); background: #fff; color: var(--ssd-ink);
  margin: 0; min-height: 0;
}
.ssd__gate-row button.go {
  background: var(--ssd-warn); border-color: var(--ssd-warn); color: #fff;
}
.ssd__gate-row button[disabled] { opacity: .5; cursor: not-allowed; }

/* Cart line thumbnail */
.ssd-cart-thumb { width: 100%; height: auto; display: block; border-radius: 2px; }

/* ---------------------------------------------------------------------------
   Theme overrides.
   hello-elementor and Elementor both reset button appearance aggressively and
   win on specificity in places. These rules are deliberately heavy-handed:
   they are scoped tightly to this widget, so they cannot leak into the theme.
   --------------------------------------------------------------------------- */

.ssd .ssd__swatches button.ssd__swatch,
.ssd .ssd__swatches button.ssd__swatch:hover,
.ssd .ssd__swatches button.ssd__swatch:focus {
  border-radius: 50% !important;
  aspect-ratio: 1 !important;
  width: 100% !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px;
  overflow: hidden;
  -webkit-appearance: none !important;
  appearance: none !important;
  transition: none;
}

.ssd .ssd__swatches button.ssd__swatch[aria-pressed="true"] {
  box-shadow: 0 0 0 2px #fff inset, 0 0 0 3px var(--ssd-accent) !important;
}

/* Segmented controls - the active state kept losing to a theme button reset,
   which made the selected option invisible rather than merely unstyled. */
.ssd .ssd__segs button,
.ssd-stage-wrap .ssd__segs button {
  background: var(--ssd-surface) !important;
  color: var(--ssd-ink-3) !important;
  border-radius: 0 !important;
  text-indent: 0 !important;
  font-size: .72rem !important;
  line-height: 1.4 !important;
  min-height: 0 !important;
  height: auto !important;
  width: auto !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.ssd .ssd__segs button[aria-pressed="true"],
.ssd-stage-wrap .ssd__segs button[aria-pressed="true"] {
  background: var(--ssd-accent) !important;
  color: #fff !important;
}

.ssd .ssd__segs--wide button { padding: .45rem 1.1rem !important; }

/* Design thumbnails */
.ssd .ssd__designs button.ssd__design {
  padding: .25rem !important;
  min-height: 0 !important;
  height: auto !important;
  width: 100% !important;
  border-radius: 3px !important;
  background: var(--ssd-sunk) !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.ssd .ssd__designs button.ssd__design[aria-pressed="true"] {
  border-color: var(--ssd-accent) !important;
  box-shadow: 0 0 0 2px var(--ssd-accent) inset !important;
}

/* Reset button */
.ssd button.ssd__btn {
  background: var(--ssd-surface) !important;
  color: var(--ssd-ink-2) !important;
  min-height: 0 !important;
  height: auto !important;
  width: auto !important;
  border-radius: 2px !important;
  box-shadow: none !important;
}
.ssd button.ssd__btn:hover { color: var(--ssd-accent) !important; }

/* ---------------------------------------------------------------------------
   Gallery strip: the live preview sits first, real photographs after it.
   --------------------------------------------------------------------------- */

.ssd__stage { position: relative; }
.ssd__photo {
  width: 100%; height: auto; display: block; border-radius: 3px;
  filter: drop-shadow(0 6px 14px rgba(0,0,0,.18));
}
.ssd__photo[hidden] { display: none; }
.ssd__sign[hidden] { display: none; }

.ssd__thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr));
  gap: .5rem;
  margin-top: .2rem;
}

.ssd-stage-wrap .ssd__thumbs button.ssd__thumb {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  width: 100% !important;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--ssd-rule) !important;
  border-radius: 3px !important;
  background: var(--ssd-sunk) !important;
  cursor: pointer;
  display: block;
  line-height: 0;
  box-shadow: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.ssd-stage-wrap .ssd__thumbs button.ssd__thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.ssd-stage-wrap .ssd__thumbs button.ssd__thumb[aria-pressed="true"] {
  border-color: var(--ssd-accent) !important;
  box-shadow: 0 0 0 2px var(--ssd-accent) inset !important;
}
.ssd-stage-wrap .ssd__thumbs button.ssd__thumb:focus-visible {
  outline: 2px solid var(--ssd-accent); outline-offset: 2px;
}

/* The first tile is the live preview rather than a photograph */
.ssd-stage-wrap .ssd__thumbs button.ssd__thumb--live {
  display: grid !important;
  place-items: center;
  background: var(--ssd-accent) !important;
  border-color: var(--ssd-accent) !important;
}
.ssd__thumb-live-inner {
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.25;
  text-align: center;
  padding: .2rem;
}

.ssd__thumbs-note {
  margin: .1rem 0 0;
  font-size: .76rem;
  color: var(--ssd-ink-3);
  line-height: 1.4;
}

/* Backdrop switcher is meaningless while a photograph is showing */
.ssd__stage-bar.is-photo .ssd__segs { visibility: hidden; }

/* ---------------------------------------------------------------------------
   Set builder: several designs, one shared colour scheme.
   --------------------------------------------------------------------------- */

.ssd-stage-wrap .ssd__thumbs, .ssd .ssd__designs { position: relative; }

.ssd .ssd__designs button.ssd__design { position: relative; }
.ssd__design-art { display: block; line-height: 0; }
.ssd__design-art svg { width: 100%; height: auto; display: block; }

/* Unselected designs recede so the chosen set reads at a glance */
.ssd .ssd__designs button.ssd__design[aria-pressed="false"] .ssd__design-art { opacity: .48; }
.ssd .ssd__designs button.ssd__design:hover .ssd__design-art { opacity: 1; }
.ssd .ssd__designs button.ssd__design.is-preview {
  border-color: var(--ssd-accent) !important;
  box-shadow: 0 0 0 2px var(--ssd-accent) inset !important;
}
.ssd .ssd__designs button.ssd__design[aria-pressed="true"] {
  border-color: var(--ssd-accent) !important;
}

.ssd__qty {
  position: absolute; left: .3rem; bottom: .3rem;
  min-width: 1.15rem; height: 1.15rem; padding: 0 .25rem;
  border-radius: .6rem;
  background: var(--ssd-accent); color: #fff;
  font-size: .62rem; font-weight: 700; line-height: 1.15rem;
  text-align: center; letter-spacing: .02em;
  pointer-events: none;
}
.ssd__qty[hidden] { display: none; }

.ssd__remove {
  position: absolute; right: .25rem; top: .25rem;
  width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: rgba(0,0,0,.55); color: #fff;
  font-size: .8rem; line-height: 1.05rem; text-align: center;
  cursor: pointer;
}
.ssd__remove[hidden] { display: none; }
.ssd__remove:hover { background: var(--ssd-warn); }

.ssd__setbar { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Running order summary */
.ssd__summary {
  margin: 0 1rem 1rem;
  border: 1px solid var(--ssd-rule);
  border-radius: 3px;
  background: var(--ssd-sunk);
  padding: .75rem .85rem;
  display: flex; flex-direction: column; gap: .5rem;
}
.ssd__summary[hidden] { display: none; }
.ssd__summary-lines { display: flex; flex-direction: column; gap: .25rem; }
.ssd__summary-line {
  display: flex; justify-content: space-between; gap: .6rem;
  font-size: .85rem; color: var(--ssd-ink-2);
}
.ssd__summary-line em { font-style: normal; color: var(--ssd-ink-3); }
.ssd__summary-total {
  display: flex; justify-content: space-between; align-items: baseline; gap: .6rem;
  border-top: 1px solid var(--ssd-rule); padding-top: .5rem;
  font-size: .85rem; color: var(--ssd-ink-3);
}
.ssd__summary-total strong { font-size: 1.15rem; color: var(--ssd-ink); }
.ssd__summary-save {
  margin: 0; font-size: .8rem; color: var(--ssd-accent);
  background: var(--ssd-surface); border-radius: 2px; padding: .4rem .5rem;
}
.ssd__summary-save[hidden] { display: none; }

/* Postage. The earned state is a statement of fact, so it reads calmly; the
   not-yet state is the same nudge as the price ladder above it and matches it. */
.ssd__summary-ship {
  margin: .35rem 0 0; font-size: .8rem; color: var(--ssd-accent);
  background: var(--ssd-surface); border-radius: 2px; padding: .4rem .5rem;
}
.ssd__summary-ship.is-earned {
  color: #1E6B3A; background: #EAF6EE; font-weight: 600;
}
.ssd__summary-ship.is-earned::before { content: "✓ "; }
.ssd__summary-ship[hidden] { display: none; }

/* Add-to-cart is disabled until something is chosen */
.ssd-product form.cart button.single_add_to_cart_button[disabled],
form.cart button.single_add_to_cart_button[disabled] { opacity: .5; cursor: not-allowed; }

/* Mid-submit: the button stays enabled so its name/value still posts, but it
   stops looking pressable and the second click is swallowed in JS. */
.ssd-product form.cart button.single_add_to_cart_button.ssd-is-submitting {
  opacity: .65; cursor: progress;
}

/* ---------------------------------------------------------------------------
   Bulk opener form.
   Shares the panel, fields and swatches with the sign builder; what's below is
   only the parts a sign has no use for.
   --------------------------------------------------------------------------- */

/* The file input is visually hidden rather than `hidden`, so it keeps its place
   in the tab order — a <label> cannot take focus, so hiding the input outright
   would put the uploader out of reach of the keyboard entirely. */
.ssd__file {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

.ssd__drop {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  border: 1px dashed var(--ssd-rule); border-radius: 3px;
  padding: .8rem .9rem; background: var(--ssd-sunk);
  transition: border-color .15s ease, background-color .15s ease;
  /* The whole box is the target, not just the button sitting in it. */
  cursor: pointer; margin: 0;
}
.ssd__drop:hover { border-color: var(--ssd-accent); }
.ssd__drop:hover .ssd__btn { color: var(--ssd-accent); border-color: var(--ssd-accent); }
.ssd__file:focus-visible + .ssd__drop {
  outline: 2px solid var(--ssd-accent); outline-offset: 2px;
}
.ssd__drop.is-over { border-color: var(--ssd-accent); background: #f2f8f6; }
.ssd__drop[hidden] { display: none; }
/* The button is a span now, so it needs the box behaviour a <button> gave it. */
.ssd__drop .ssd__btn { display: inline-block; pointer-events: none; }
.ssd__drop-hint { font-size: .8rem; color: var(--ssd-ink-3); }

/* The Texas tax-included statement. Quiet but always legible — it is a legal
   notice, so it must not be styled into invisibility. */
.ssd__taxnote {
  margin: .4rem 0 .8rem;
  font-size: .78rem;
  color: var(--ssd-ink-3);
}
.ssd-taxnote-row td { color: var(--ssd-ink-3); font-size: .78rem; }

/* Lead time, sitting directly above the Add to cart button. Quiet rather than
   alarming — it is a fact about how the thing is made, not a warning. */
.ssd__leadtime {
  margin: 0 1rem 1rem; padding: .7rem .85rem;
  font-size: .84rem; line-height: 1.5;
  color: var(--ssd-ink-2);
  background: var(--ssd-sunk);
  border-left: 3px solid var(--ssd-accent);
  border-radius: 2px;
}
.ssd__leadtime strong { display: block; color: var(--ssd-ink); margin-bottom: .15rem; }

/* Upload feedback, right under the zone it belongs to. */
.ssd__upload-msg {
  margin: .55rem 0 0; padding: .55rem .7rem;
  font-size: .84rem; line-height: 1.45; border-radius: 2px;
  border-left: 3px solid var(--ssd-rule); background: var(--ssd-sunk);
}
.ssd__upload-msg[hidden] { display: none; }
.ssd__upload-msg.is-error {
  border-left-color: var(--ssd-warn); background: var(--ssd-warn-soft);
}
.ssd__upload-msg.is-calm { border-left-color: var(--ssd-accent); }

.ssd__check {
  display: flex; gap: .55rem; align-items: flex-start;
  font-size: .87rem; line-height: 1.45; cursor: pointer; margin: 0;
}
.ssd__check input { margin-top: .2rem; flex: none; }

/* The upload note is information, not a warning — the alert box is reused for
   both, so it needs a voice for each. */
.ssd__alert--calm {
  background: var(--ssd-sunk); border-left-color: var(--ssd-accent);
  color: var(--ssd-ink-2);
}

.ssd--opener .ssd__summary { margin: 0 1rem 1rem; }
.ssd--opener .ssd__segs--wide button { flex: 1 1 auto; }

/* Opener form: text entry, and fields that come and go with the mode. */
.ssd__label {
  font-size: .78rem; color: var(--ssd-ink-2); display: block; margin: 0 0 .3rem;
}
.ssd .ssd__input {
  width: 100%; font: inherit; font-size: .9rem; line-height: 1.45;
  padding: .5rem .6rem; margin: 0;
  border: 1px solid var(--ssd-rule); border-radius: 3px;
  background: var(--ssd-surface); color: var(--ssd-ink);
  resize: vertical; min-height: 0;
}
.ssd .ssd__input:focus { outline: 2px solid var(--ssd-accent); outline-offset: -1px; border-color: var(--ssd-accent); }
#ssd-text-block > * + *, #ssd-artwork-block > * + * { margin-top: .6rem; }
[hidden] { display: none !important; }

/* Nine quantity buttons don't fit one row on a phone. */
.ssd__segs--wrap { flex-wrap: wrap; border: 0; gap: .3rem; }
.ssd .ssd__segs--wrap button {
  border: 1px solid var(--ssd-rule); border-radius: 2px; min-width: 2.6rem; text-align: center;
}

.ssd__hint.is-warn { color: var(--ssd-warn); font-weight: 600; }

/* A button that reads as a link. Used for "Use my original instead" under the
   drop zone: it is an undo, not a primary action, so it should not compete with
   the upload button beside it - but it must be a real <button>, because a bare
   <a href="#"> that runs JavaScript is a link to nowhere for anyone using a
   keyboard or a screen reader. */
.ssd__linkish {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	text-decoration: underline;
	cursor: pointer;
	opacity: .85;
}
.ssd__linkish:hover,
.ssd__linkish:focus-visible {
	opacity: 1;
}