.radio-finish-setting {
  display: grid;
  gap: 8px;
  width: 100%;
  max-width: 420px;
  margin-bottom: 22px;
  color: var(--amber);
  font: 800 .64rem/1.3 Arial, sans-serif;
}

.radio-finish-setting select {
  width: 100%;
  min-width: 0;
  height: 44px;
  min-height: 44px;
  -webkit-appearance: menulist-button;
  appearance: menulist-button;
  border: 1px solid #62684d;
  border-radius: 3px;
  padding: 9px 10px;
  background: #0d110b;
  color: var(--cream);
  font: 400 16px/1.4 Arial, sans-serif;
  color-scheme: dark;
}

.radio-finish-setting select:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
}

/* Only the housing and its printed labels change; control geometry is shared. */
.radio[data-finish="shiny-silver-metallic"] {
  border-color: #a3a9ae;
  background: #c9cdd0 url("assets/radio-silver-metallic.webp") center / cover no-repeat;
  background-blend-mode: normal;
  box-shadow: inset 0 1px 0 #fff, inset 0 -2px 0 #5d6369, 0 14px 36px #000;
}

.radio[data-finish="shiny-silver-metallic"]::before { opacity: 0; }

.radio[data-finish="shiny-silver-metallic"] .radio-topline,
.radio[data-finish="shiny-silver-metallic"] .radio-footer {
  color: #24292e;
  background: rgba(255, 255, 255, .18);
  border-color: #888f95;
}

.radio[data-finish="shiny-silver-metallic"] .radio-brand-burn {
  background: #292e32;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .7));
}

.radio[data-finish="shiny-silver-metallic"] .serial,
.radio[data-finish="shiny-silver-metallic"] .indicator-row,
.radio[data-finish="shiny-silver-metallic"] .desktop-channel-occupancy-head,
.radio[data-finish="shiny-silver-metallic"] .control-caption,
.radio[data-finish="shiny-silver-metallic"] .dial-label,
.radio[data-finish="shiny-silver-metallic"] .dial-label output,
.radio[data-finish="shiny-silver-metallic"] .switch-control,
.radio[data-finish="shiny-silver-metallic"] .defaults-control,
.radio[data-finish="shiny-silver-metallic"] .vox-delay-caption,
.radio[data-finish="shiny-silver-metallic"] .vox-delay-caption output,
.radio[data-finish="shiny-silver-metallic"] #radioStatus { color: #24292e; }

.radio[data-finish="shiny-silver-metallic"] .radio-transmitter.is-active,
.radio[data-finish="shiny-silver-metallic"] .radio-topline .speech-stars { color: #813900; }

.radio[data-finish="shiny-silver-metallic"] .radio-topline .linear-badge { color: #15554d; }

.radio[data-finish="shiny-silver-metallic"] .radio-controls {
  background: rgba(255, 255, 255, .12);
  border-color: #888f95;
}

.radio[data-finish="luxury-dark-gold"] {
  border-color: #8b7343;
  background:
    linear-gradient(rgba(12, 11, 7, .52), rgba(12, 11, 7, .58)),
    #302918 url("assets/radio-dark-gold.webp") center / cover no-repeat;
  background-blend-mode: normal;
  box-shadow: inset 0 1px 0 #b29a60, inset 0 -2px 0 #17130b, 0 14px 36px #000;
}

.radio[data-finish="luxury-dark-gold"]::before { opacity: 0; }

.radio[data-finish="luxury-dark-gold"] .radio-topline,
.radio[data-finish="luxury-dark-gold"] .radio-footer,
.radio[data-finish="luxury-dark-gold"] .radio-controls {
  background: rgba(12, 11, 7, .3);
  border-color: #7c663d;
}

.radio[data-finish="luxury-dark-gold"] .radio-brand-burn {
  background: #ebd28e;
  filter: drop-shadow(0 1px 1px #100d06);
}

.radio[data-finish="luxury-dark-gold"] .radio-topline,
.radio[data-finish="luxury-dark-gold"] .radio-footer,
.radio[data-finish="luxury-dark-gold"] .serial,
.radio[data-finish="luxury-dark-gold"] .indicator-row,
.radio[data-finish="luxury-dark-gold"] .desktop-channel-occupancy-head,
.radio[data-finish="luxury-dark-gold"] .control-caption,
.radio[data-finish="luxury-dark-gold"] .dial-label,
.radio[data-finish="luxury-dark-gold"] .dial-label output,
.radio[data-finish="luxury-dark-gold"] .switch-control,
.radio[data-finish="luxury-dark-gold"] .defaults-control,
.radio[data-finish="luxury-dark-gold"] .vox-delay-caption,
.radio[data-finish="luxury-dark-gold"] .vox-delay-caption output,
.radio[data-finish="luxury-dark-gold"] #radioStatus { color: #f2dda9; }

.radio[data-finish="luxury-dark-gold"] .radio-transmitter.is-active { color: #ffe5a0; }

.radio[data-finish="dark-brown-mamba"] {
  border-color: #85634c;
  background:
    linear-gradient(rgba(17, 10, 6, .18), rgba(17, 10, 6, .28)),
    #281a12 url("assets/radio-dark-brown-mamba.webp") center / cover no-repeat;
  background-blend-mode: normal;
  box-shadow: inset 0 1px 0 #aa8666, inset 0 -2px 0 #140c08, 0 14px 36px #000;
}

.radio[data-finish="dark-brown-mamba"]::before { opacity: 0; }

.radio[data-finish="dark-brown-mamba"] .radio-topline,
.radio[data-finish="dark-brown-mamba"] .radio-footer,
.radio[data-finish="dark-brown-mamba"] .radio-controls {
  background: rgba(17, 10, 6, .4);
  border-color: #70533e;
}

.radio[data-finish="dark-brown-mamba"] .radio-brand-burn {
  background: #eed9b5;
  filter: drop-shadow(0 1px 1px #100a06);
}

.radio[data-finish="dark-brown-mamba"] .radio-topline,
.radio[data-finish="dark-brown-mamba"] .radio-footer,
.radio[data-finish="dark-brown-mamba"] .serial,
.radio[data-finish="dark-brown-mamba"] .indicator-row,
.radio[data-finish="dark-brown-mamba"] .desktop-channel-occupancy-head,
.radio[data-finish="dark-brown-mamba"] .control-caption,
.radio[data-finish="dark-brown-mamba"] .dial-label,
.radio[data-finish="dark-brown-mamba"] .dial-label output,
.radio[data-finish="dark-brown-mamba"] .switch-control,
.radio[data-finish="dark-brown-mamba"] .defaults-control,
.radio[data-finish="dark-brown-mamba"] .vox-delay-caption,
.radio[data-finish="dark-brown-mamba"] .vox-delay-caption output,
.radio[data-finish="dark-brown-mamba"] #radioStatus { color: #f1dfc3; }

.radio[data-finish="dark-brown-mamba"] .radio-transmitter.is-active { color: #ffce82; }

.radio[data-finish="black-copper"] {
  border-color: #9d6a42;
  /* Move the image's inset frame to the housing edge without moving controls.
     Separate percentages keep the crop consistent on tall and wide housings. */
  background: #191714 url("assets/radio-black-copper.webp") center / 104% 106% no-repeat;
  background-blend-mode: normal;
  box-shadow: inset 0 1px 0 #bf8b5b, inset 0 -2px 0 #100c09, 0 14px 36px #000;
}

.radio[data-finish="black-copper"]::before { opacity: 0; }

.radio[data-finish="black-copper"] .radio-topline,
.radio[data-finish="black-copper"] .radio-footer,
.radio[data-finish="black-copper"] .radio-controls {
  background: rgba(12, 10, 9, .36);
  border-color: #76543c;
}

.radio[data-finish="black-copper"] .radio-brand-burn {
  background: #efc493;
  filter: drop-shadow(0 1px 1px #100c09);
}

.radio[data-finish="black-copper"] .radio-topline,
.radio[data-finish="black-copper"] .radio-footer,
.radio[data-finish="black-copper"] .serial,
.radio[data-finish="black-copper"] .indicator-row,
.radio[data-finish="black-copper"] .desktop-channel-occupancy-head,
.radio[data-finish="black-copper"] .control-caption,
.radio[data-finish="black-copper"] .dial-label,
.radio[data-finish="black-copper"] .dial-label output,
.radio[data-finish="black-copper"] .switch-control,
.radio[data-finish="black-copper"] .defaults-control,
.radio[data-finish="black-copper"] .vox-delay-caption,
.radio[data-finish="black-copper"] .vox-delay-caption output,
.radio[data-finish="black-copper"] #radioStatus { color: #f0d9bd; }

.radio[data-finish="black-copper"] .radio-transmitter.is-active { color: #ffd18c; }

.radio[data-finish="bronze-nederland"] {
  border-color: #9b7547;
  background:
    linear-gradient(rgba(21, 14, 8, .32), rgba(21, 14, 8, .38)),
    #51371f url("assets/radio-bronze-nederland.webp") center / cover no-repeat;
  background-blend-mode: normal;
  box-shadow: inset 0 1px 0 #c39a63, inset 0 -2px 0 #221509, 0 14px 36px #000;
}

.radio[data-finish="bronze-nederland"]::before { opacity: 0; }

.radio[data-finish="bronze-nederland"] .radio-topline,
.radio[data-finish="bronze-nederland"] .radio-footer,
.radio[data-finish="bronze-nederland"] .radio-controls {
  background: rgba(21, 14, 8, .5);
  border-color: #8c6941;
}

.radio[data-finish="bronze-nederland"] .radio-brand-burn {
  background: #ffe2af;
  filter: drop-shadow(0 1px 1px #21150a);
}

.radio[data-finish="bronze-nederland"] .radio-topline,
.radio[data-finish="bronze-nederland"] .radio-footer,
.radio[data-finish="bronze-nederland"] .serial,
.radio[data-finish="bronze-nederland"] .indicator-row,
.radio[data-finish="bronze-nederland"] .desktop-channel-occupancy-head,
.radio[data-finish="bronze-nederland"] .control-caption,
.radio[data-finish="bronze-nederland"] .dial-label,
.radio[data-finish="bronze-nederland"] .dial-label output,
.radio[data-finish="bronze-nederland"] .switch-control,
.radio[data-finish="bronze-nederland"] .defaults-control,
.radio[data-finish="bronze-nederland"] .vox-delay-caption,
.radio[data-finish="bronze-nederland"] .vox-delay-caption output,
.radio[data-finish="bronze-nederland"] #radioStatus {
  color: #fff0d5;
  text-shadow: 0 1px 2px #21150a;
}

.radio[data-finish="bronze-nederland"] .radio-transmitter.is-active { color: #ffe1a0; }

.radio[data-finish="royal-purple"] {
  border-color: #77536d;
  background: #221320 url("assets/radio-royal-purple.webp?v=2") center / cover no-repeat;
  background-blend-mode: normal;
  box-shadow: inset 0 1px 0 #a78097, inset 0 -2px 0 #160c14, 0 14px 36px #000;
}

.radio[data-finish="royal-purple"]::before { opacity: 0; }

.radio[data-finish="royal-purple"] .radio-topline,
.radio[data-finish="royal-purple"] .radio-footer,
.radio[data-finish="royal-purple"] .radio-controls {
  background: rgba(17, 9, 16, .35);
  border-color: #77536d;
}

.radio[data-finish="royal-purple"] .radio-brand-burn {
  background: #f0d5b5;
  filter: drop-shadow(0 1px 1px #160c14);
}

.radio[data-finish="royal-purple"] .radio-topline,
.radio[data-finish="royal-purple"] .radio-footer,
.radio[data-finish="royal-purple"] .serial,
.radio[data-finish="royal-purple"] .indicator-row,
.radio[data-finish="royal-purple"] .desktop-channel-occupancy-head,
.radio[data-finish="royal-purple"] .control-caption,
.radio[data-finish="royal-purple"] .dial-label,
.radio[data-finish="royal-purple"] .dial-label output,
.radio[data-finish="royal-purple"] .switch-control,
.radio[data-finish="royal-purple"] .defaults-control,
.radio[data-finish="royal-purple"] .vox-delay-caption,
.radio[data-finish="royal-purple"] .vox-delay-caption output,
.radio[data-finish="royal-purple"] #radioStatus { color: #f3e4d4; }

.radio[data-finish="royal-purple"] .radio-transmitter.is-active { color: #ffd18c; }

.shop-finish-preview {
  display: block;
  width: 120px;
  height: 64px;
  max-width: 100%;
  margin-bottom: 10px;
  object-fit: cover;
  border: 1px solid #8d8b7e;
  border-radius: 3px;
}

.shop-finish-preview[data-finish="luxury-dark-gold"] { filter: brightness(.48); border-color: #b29a60; }
.shop-finish-preview[data-finish="dark-brown-mamba"] { filter: brightness(.77); border-color: #aa8666; }
.shop-finish-preview[data-finish="black-copper"] { object-fit: fill; border-color: #bf8b5b; }
.shop-finish-preview[data-finish="bronze-nederland"] { object-fit: contain; background: #51371f; border-color: #c39a63; }
.shop-finish-preview[data-finish="royal-purple"] { object-fit: contain; background: #221320; border-color: #a78097; }
.shop-product.is-reward { grid-template-columns: minmax(0, 1fr); }