/* Dave's Drum Shop — DW finish swatches. Namespaced to avoid existing catalogue styling. */
.dw-finishes-trigger {
  display: inline-flex; align-items: center; justify-content: center;
  width: max-content; max-width: 100%; min-height: 36px;
  margin: 9px 0 11px; padding: 8px 12px; cursor: pointer;
  font-family:inherit; font-weight:700; font-size:12px; line-height:1.25; letter-spacing: .015em;
  color: #111; background: #fff; border: 1.5px solid #e46a25;
  border-radius: 7px; box-sizing: border-box; transition: background .16s ease, color .16s ease;
}
.dw-finishes-trigger:hover, .dw-finishes-trigger:focus-visible {background:#ee742c;color:#111;}
.dw-finishes-trigger:focus-visible, .dwf-modal button:focus-visible, .dwf-modal a:focus-visible {outline: 3px solid #ff9d54;outline-offset: 3px;}
.dwf-modal {width: min(960px, calc(100vw - 28px));max-width:960px;max-height: min(90vh, 850px);margin:auto;padding:0;border:1px solid #393939;border-radius:15px;background:#fff;color:#171717;box-shadow:0 24px 100px #0008;font-family:inherit;overflow:auto;overscroll-behavior:contain;}
.dwf-modal::backdrop {background:rgb(0 0 0 / 74%);backdrop-filter:blur(3px);}
.dwf-shell {min-width:0;}
.dwf-header {display:flex;justify-content:space-between;align-items:start;gap:18px;padding:22px 26px;background:#101010;color:#fff;}
.dwf-eyebrow {font-size:10px;letter-spacing:.16em;font-weight:700;color:#ff8738;margin-bottom:6px;}
.dwf-header h2 {color:#fff!important;font-family:inherit; font-weight:800; font-size:clamp(22px,3vw,32px); line-height:1.14;margin:0 0 6px!important;}
.dwf-product {font-size:13px;line-height:1.4;color:#c9c9c9;margin:0;}
.dwf-close {display:grid;place-items:center;flex:none;width:38px;height:38px;background:#2c2c2c!important;border:1px solid #656565!important;border-radius:50%;color:#fff!important;font-family:inherit; font-size:26px; line-height:1;cursor:pointer;}
.dwf-close:hover {background:#444!important;}
.dwf-layout {display:grid;grid-template-columns:1fr 270px;gap:0;align-items:start;}
.dwf-grid {padding:22px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;min-width:0;}
.dwf-tile {display:flex;flex-direction:column;align-items:stretch;text-align:left;gap:5px;padding:7px;background:#fafafa;border:2px solid #e6e6e6;border-radius:10px;cursor:pointer;color:#222;min-width:0;}
.dwf-tile:hover {border-color:#cb8a62;}
.dwf-tile.dwf-active {border-color:#e66c24;background:#fff6f0;box-shadow:0 0 0 1px #e66c24;}
.dwf-thumb {display:block;height:115px;border-radius:6px;overflow:hidden;background:#eee;}
.dwf-thumb img {display:block;width:100%;height:100%;object-fit:cover;}
.dwf-thumb-error {background:repeating-linear-gradient(45deg,#eaeaea 0 8px,#ddd 8px 16px);}
.dwf-thumb-error::after {content:'Photo unavailable';font-size:11px;color:#444;padding:8px;display:block;}
.dwf-name {font-size:12px;font-weight:800;line-height:1.25;padding:3px 1px;}
.dwf-flag {font-size:10px;color:#646464;padding:0 1px 4px;}
.dwf-preview {position:sticky;top:0;min-width:0;padding:22px;border-left:1px solid #e8e8e8;}
.dwf-large-wrap {display:flex;align-items:center;justify-content:center;aspect-ratio:1;background:#f4f4f4;border-radius:12px;overflow:hidden;}
.dwf-large {width:100%;height:100%;object-fit:contain;}
.dwf-image-failed::after {content:'DW swatch image unavailable';font-size:12px;color:#666;text-align:center;padding:16px;}
.dwf-selected-name {font-size:20px!important;line-height:1.2;color:#111!important;margin:16px 0 5px!important;font-weight:800!important;}
.dwf-usage {font-size:12px;color:#666;margin:0;line-height:1.4;}
.dwf-footer {padding:15px 24px;border-top:1px solid #e6e6e6;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 18px;font-size:11px;line-height:1.45;color:#666;}
.dwf-source {color:#be4b11!important;font-weight:800;text-decoration:underline!important;text-underline-offset:3px;white-space:nowrap;}
@media (max-width:700px) {
  .dwf-modal{max-height:90dvh;width:calc(100vw - 14px);border-radius:10px;}
  .dwf-header {padding:17px;}
  .dwf-layout{display:flex;flex-direction:column-reverse;}
  .dwf-preview{position:static;border:0;border-bottom:1px solid #eaeaea;width:100%;padding:13px 17px;display:grid;grid-template-columns:100px 1fr;column-gap:12px;align-items:center;box-sizing:border-box;}
  .dwf-large-wrap{grid-row:span 2;}
  .dwf-selected-name{margin:0!important;font-size:17px!important;}
  .dwf-usage{font-size:11px;}
  .dwf-grid{width:100%;padding:14px;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;box-sizing:border-box;}
  .dwf-thumb{height:96px;}
  .dwf-footer{padding:14px 17px;}
}
@media (prefers-reduced-motion:reduce){.dw-finishes-trigger{transition:none;}}

/* Finish selector stays above (not alongside) the displayed price. */
.dw-finishes-trigger { flex: 0 0 auto; align-self: flex-start; clear: both; }