/* The Fencing Co: photographic COLORBOND profile and colour selector */
.cb-selector-section { background: var(--paper); }
.cb-selector-intro { margin-bottom: 34px; }
.cb-selector {
  background: var(--card);
  border: 1px solid var(--line);
}
.cb-preview {
  background: #eef0f1;
  overflow: hidden;
  position: relative;
}
.cb-preview img {
  aspect-ratio: 1897 / 829;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}
.cb-preview-tint {
  background: #323233;
  inset: 0;
  mask-image: url('../images/colorbond-selector/trimclad-mask.png');
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
  mix-blend-mode: multiply;
  opacity: .96;
  pointer-events: none;
  position: absolute;
  transition: background-color .2s ease;
  -webkit-mask-image: url('../images/colorbond-selector/trimclad-mask.png');
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
}
.cb-preview-caption {
  align-items: center;
  backdrop-filter: blur(5px);
  background: rgba(20, 23, 26, .78);
  border-bottom: 1px solid rgba(255, 255, 255, .12);
  color: #fff;
  display: flex;
  gap: 18px;
  justify-content: space-between;
  left: 0;
  padding: 14px 18px;
  position: absolute;
  right: 0;
  top: 0;
  -webkit-backdrop-filter: blur(5px);
}
.cb-preview-caption strong {
  display: block;
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.2;
}
.cb-preview-caption span {
  color: rgba(255,255,255,.72);
  font-size: 13px;
}
.cb-selector-controls { padding: 28px; }
.cb-control-group + .cb-control-group {
  border-top: 1px solid var(--line);
  margin-top: 26px;
  padding-top: 26px;
}
.cb-control-heading {
  align-items: baseline;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 14px;
}
.cb-control-heading h3 { font-size: 21px; margin: 0; }
.cb-control-heading span { color: var(--muted); font-size: 13px; }
.cb-profile-options {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
}
.cb-profile-option,
.cb-colour-option {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font);
  font-weight: 600;
  text-align: left;
  transition: background .15s, border-color .15s, color .15s;
}
.cb-profile-option { padding: 13px 15px; text-align: center; }
.cb-profile-option:hover,
.cb-colour-option:hover { border-color: var(--ink); }
.cb-profile-option[aria-pressed='true'] {
  background: var(--dark);
  border-color: var(--dark);
  color: #fff;
}
.cb-colour-options {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(5, 1fr);
}
.cb-colour-option {
  align-items: center;
  display: flex;
  gap: 10px;
  min-width: 0;
  padding: 8px;
}
.cb-colour-option[aria-pressed='true'] {
  border-color: var(--dark);
  box-shadow: inset 0 0 0 1px var(--dark);
}
.cb-colour-swatch {
  background: var(--swatch);
  border: 1px solid rgba(20,23,26,.16);
  display: block;
  flex: 0 0 34px;
  height: 34px;
}
.cb-colour-name {
  font-size: 12.5px;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cb-selector-note {
  color: var(--muted);
  font-size: 12.5px;
  margin-top: 16px;
}
@media (max-width: 760px) {
  .cb-selector-controls { padding: 22px; }
  .cb-colour-options { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 520px) {
  .cb-profile-options { grid-template-columns: 1fr; }
  .cb-colour-options { grid-template-columns: repeat(2, 1fr); }
  .cb-colour-swatch { flex-basis: 30px; height: 30px; }
  .cb-preview-caption { gap: 8px; padding: 10px 12px; }
  .cb-preview-caption strong { font-size: 15px; }
  .cb-preview-caption span { font-size: 11px; text-align: right; }
}


/* Caption is now a solid bar ABOVE the image (not overlaying it). */
.cb-preview-caption {
  position: static;
  background: var(--dark);
  border-bottom: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
/* Image + colour tint live together below the caption. */
.cb-preview-media { position: relative; overflow: hidden; }

/* Desktop: preview beside the controls. Wider image column so the fence
   photo is larger; natural aspect so the whole fence, foliage and grass
   show (no cropping); controls compacted so the two columns are close in
   height and centre cleanly with little empty space. */
@media (min-width: 900px) {
  .cb-selector { display: grid; grid-template-columns: 1.6fr 1fr; align-items: center; }
  .cb-selector-controls { padding: 24px; }
  .cb-control-group + .cb-control-group { margin-top: 16px; padding-top: 16px; }
  .cb-control-heading { margin-bottom: 10px; }
  .cb-control-heading h3 { font-size: 19px; }
  .cb-colour-options { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .cb-colour-option { padding: 7px; }
  .cb-colour-swatch { flex: 0 0 30px; height: 30px; }
  .cb-selector-note { margin-top: 12px; }
}