/* Sober card back and the other-colours sheet, for any shop.
   Loaded only by a local preview launcher; the sealed viewer stylesheet is
   untouched. The sheet inherits the ghostcard grammar and adds nothing to it
   but a scrollable body and a grid of colours. */

/* The back keeps the title, the seller, the price, the product description and
   the buy action. The size list, the seller's colour line, the price-level
   sentence and the raw `Productinformatie` disclosure are hidden: the colours
   have their own sheet, and the rest is shop mechanics. */
#matching-variant-info,
#matching-buy-help,
#matching-source,
.matching-price-preference { display: none !important; }

.card-colours-link {
  /* inline-block, not block: a button centres its own text, which would pull
     the link away from the left-aligned description above it. */
  display: inline-block;
  text-align: left;
  margin: 8px 0 0;
  padding: 0;
  border: 0;
  background: none;
  /* The ink of the price and the title, at full strength: the description
     above it is the same ink at .78, so the link reads as the firmer line. */
  color: #443a30;
  font: inherit;
  font-size: 12.5px;
  letter-spacing: .01em;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  cursor: pointer;
}
.card-colours-link:hover,
.card-colours-link:focus-visible { text-decoration-thickness: 2px; }

/* The one thing the sheet adds to the grammar: it scrolls. */
.ghostcard.card-colours .ghost-body {
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  padding-right: 6px;
}

.card-colours-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
  gap: 14px;
}
.card-colour {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 10px 12px;
  border: 1.5px dashed var(--ghost-dash);
  border-radius: 14px;
  color: inherit;
  text-decoration: none;
}
.card-colour:hover,
.card-colour:focus-visible {
  border-style: solid;
  background: rgba(255, 255, 255, .42);
}
/* Not cyan: #85D3DC belongs to the current Island anchor and nothing else. */
.card-colour.is-current {
  border-style: solid;
  border-color: var(--ghost-soft);
  background: rgba(255, 255, 255, .5);
}
.card-colour-beeld {
  display: block;
  aspect-ratio: 1 / 1;
  border-radius: 9px;
  overflow: hidden;
  background: rgba(255, 255, 255, .55);
}
.card-colour-beeld img { width: 100%; height: 100%; object-fit: contain; display: block; }
.card-colour-naam {
  font-size: 11px;
  line-height: 1.3;
  color: var(--ghost-ink);
}
.card-colour-prijs { font-size: 11.5px; color: var(--ghost-soft); }
.card-colour-merk {
  font-size: 9.5px;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--ghost-soft);
}