/* =====================================================================
   MIKE: look of the STYLE LIBRARY ("Browse more styles") in the visualizer (Oct 3, 2026).
   Built by remodeler-tags.js; uses the same colours as the rest of the tool (remodeler.css, not changed).
   Two looks: .btt-look-cards (swatch cards, default) and .btt-look-pills (slim pills).
   Switch with LOOK at the top of remodeler-tags.js. Every class starts with btt-.
   ===================================================================== */
#bt-remodeler .btt-lib { --btt-silver: linear-gradient(145deg,#f4f5f7 0%,#c3c7cd 30%,#eef0f2 52%,#a9adb4 76%,#e9ebee 100%);
  --btt-card: linear-gradient(180deg,#ffffff 0%,#f6f7f9 100%);
  --btt-card-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(30,35,45,.06), 0 4px 12px rgba(30,35,45,.06);
  --btt-ring: var(--btr-accent, #5f6b87);
  margin: -8px 0 26px; border: 1px solid transparent; border-radius: 16px;
  background: linear-gradient(180deg,#fdfdfe 0%,#f5f6f8 100%) padding-box, var(--btt-silver) border-box;
  box-shadow: inset 0 1px 0 #fff, 0 6px 18px rgba(30,35,45,.06); }

#bt-remodeler .btt-heading { font: 700 11.5px/1.4 'MT Lato', Arial, sans-serif; letter-spacing: .16em; text-transform: uppercase;
  color: var(--btr-kicker, #5f6b87); margin: 16px 0 9px; }
#bt-remodeler .btt-picks-title { margin-top: 12px; }
#bt-remodeler .btt-picks-title + .btr-chips { margin-top: 0; }

/* expander */
#bt-remodeler .btt-summary { cursor: pointer; padding: 14px 48px 14px 18px; font: 700 14.5px/1.3 'MT Lato', Arial, sans-serif; color: var(--btr-head, #3d4148);
  list-style: none; position: relative; border-radius: 15px; }
#bt-remodeler .btt-summary::-webkit-details-marker { display: none; }
#bt-remodeler .btt-summary::after { content: "+"; position: absolute; right: 14px; top: 50%; width: 26px; height: 26px; margin-top: -13px;
  border-radius: 50%; text-align: center; font: 400 20px/25px 'MT Lato', Arial, sans-serif; color: var(--btr-head, #3d4148);
  background: var(--btt-silver); box-shadow: inset 0 1px 0 #fff, 0 1px 3px rgba(0,0,0,.15); }
#bt-remodeler .btt-lib[open] > .btt-summary::after { content: "\2013"; }
#bt-remodeler .btt-summary:focus-visible { outline: 2px solid var(--btt-ring); outline-offset: 2px; }
#bt-remodeler .btt-body { padding: 2px 18px 18px; border-top: 1px solid var(--btr-divider, #e2e4e8); }

/* rows of small chips (add-ons, filters) */
#bt-remodeler .btt-row { display: flex; flex-wrap: wrap; gap: 8px; }
#bt-remodeler .btt-chip { background: var(--btt-card); color: var(--btr-chip-ink, #3d4148); border: 1px solid var(--btr-chip-border, #d5d8dc);
  border-radius: 999px; padding: 7px 14px; font: 13.5px/1.35 'MT Lato', Arial, sans-serif; cursor: pointer; text-align: left;
  box-shadow: var(--btt-card-shadow); transition: background .2s, color .2s, border-color .2s, box-shadow .2s; max-width: 100%; }
#bt-remodeler .btt-chip:hover { border-color: #aeb3ba; }
#bt-remodeler .btt-chip:focus-visible { outline: 2px solid var(--btt-ring); outline-offset: 2px; }
#bt-remodeler .btt-chip[aria-pressed="true"] { background: var(--btr-chip-hover, #5f6b87); border-color: var(--btr-accent, #5f6b87); color: #fff; }
#bt-remodeler .btt-filter { font-weight: 700; letter-spacing: .02em; }

/* group headings */
#bt-remodeler .btt-list { margin-top: 2px; }
#bt-remodeler .btt-group { margin-top: 18px; }
#bt-remodeler .btt-group-title { font: 500 21px/1.2 'MT EB Garamond', Georgia, serif; color: var(--btr-head, #3d4148); margin: 0 0 10px;
  padding-bottom: 7px; border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, rgba(160,165,172,.7), rgba(160,165,172,0)) 1; }
#bt-remodeler .btt-note { font: italic 13.5px/1.4 'MT Lato', Arial, sans-serif; color: var(--btr-muted, #7a7f87); margin: 14px 0 0; }
#bt-remodeler .btt-cols { display: grid; grid-template-columns: 1fr; gap: 0 18px; }

/* ---------- LOOK A: swatch cards (default) ---------- */
#bt-remodeler .btt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
#bt-remodeler .btt-card { position: relative; min-width: 0; display: flex; }
#bt-remodeler .btt-tag { flex: 1; display: grid; grid-template-columns: 54px 1fr; gap: 12px; align-items: center; min-height: 80px;
  text-align: left; cursor: pointer; padding: 11px 12px; color: var(--btr-chip-ink, #3d4148);
  background: var(--btt-card); border: 1px solid #d9dce0; border-radius: 14px; box-shadow: var(--btt-card-shadow);
  font: 12.5px/1.4 'MT Lato', Arial, sans-serif; transition: border-color .2s, box-shadow .2s, transform .2s; }
#bt-remodeler .btt-swatch { position: relative; width: 54px; height: 54px; border-radius: 11px; display: block;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.7), 0 1px 3px rgba(0,0,0,.12); }
#bt-remodeler .btt-text { min-width: 0; }
#bt-remodeler .btt-name { display: block; font: 700 14px/1.25 'MT Lato', Arial, sans-serif; color: var(--btr-head, #3d4148); margin-bottom: 3px; }
#bt-remodeler .btt-has-badge .btt-name { padding-right: 78px; }
#bt-remodeler .btt-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--btr-muted, #6f747c); }
#bt-remodeler .btt-tag:hover { border-color: #aeb3ba; box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(30,35,45,.08), 0 8px 18px rgba(30,35,45,.09); transform: translateY(-1px); }
#bt-remodeler .btt-tag:focus-visible { outline: 2px solid var(--btt-ring); outline-offset: 2px; }
/* selected: accent ring + a small check on the swatch */
#bt-remodeler .btt-pick[aria-pressed="true"] { border-color: var(--btt-ring); box-shadow: 0 0 0 2px var(--btt-ring), 0 6px 16px rgba(30,35,45,.12);
  background: linear-gradient(180deg,#ffffff 0%,#eef1f6 100%); }
#bt-remodeler .btt-tag[aria-pressed="true"] .btt-swatch::after { content: "\2713"; position: absolute; right: -6px; bottom: -6px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--btt-ring); color: #fff; font: 700 12px/20px 'MT Lato', Arial, sans-serif; text-align: center; box-shadow: 0 0 0 2px #fff; }
/* "Built by us": small and quiet */
#bt-remodeler .btt-badge { position: absolute; top: 9px; right: 9px; font: 700 9.5px/1 'MT Lato', Arial, sans-serif; letter-spacing: .1em;
  text-transform: uppercase; padding: 4px 7px; border-radius: 999px; color: var(--btr-kicker, #5f6b87); text-decoration: none;
  background: linear-gradient(180deg,#fff,#eef0f2); border: 1px solid #cfd3d8; }
#bt-remodeler a.btt-badge:hover, #bt-remodeler a.btt-badge:focus-visible { border-color: var(--btt-ring); color: var(--btr-head, #3d4148); text-decoration: none; }
/* Mix & Match combos: tidy two-column list of pill cards */
#bt-remodeler .btt-combos { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px; }
#bt-remodeler .btt-combo { display: flex; align-items: center; gap: 10px; min-height: 50px; padding: 8px 14px 8px 8px; text-align: left; cursor: pointer;
  background: var(--btt-card); border: 1px solid #d9dce0; border-radius: 12px; box-shadow: var(--btt-card-shadow); color: var(--btr-chip-ink, #3d4148);
  font: 13px/1.35 'MT Lato', Arial, sans-serif; transition: border-color .2s, box-shadow .2s; }
#bt-remodeler .btt-combo:hover { border-color: #aeb3ba; }
#bt-remodeler .btt-combo:focus-visible { outline: 2px solid var(--btt-ring); outline-offset: 2px; }
#bt-remodeler .btt-dot { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 8px; display: block;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.7); }

/* ---------- LOOK B: slim pills ---------- */
#bt-remodeler .btt-look-pills .btt-grid, #bt-remodeler .btt-look-pills .btt-combos { display: flex; flex-wrap: wrap; gap: 8px; }
#bt-remodeler .btt-look-pills .btt-card { display: inline-flex; align-items: center; }
#bt-remodeler .btt-look-pills .btt-tag { display: inline-flex; align-items: center; gap: 8px; min-height: 0; padding: 5px 14px 5px 5px; border-radius: 999px; }
#bt-remodeler .btt-look-pills .btt-swatch { width: 26px; height: 26px; border-radius: 50%; }
#bt-remodeler .btt-look-pills .btt-desc { display: none; }
#bt-remodeler .btt-look-pills .btt-tag { flex: 0 1 auto; max-width: 100%; }
#bt-remodeler .btt-look-pills .btt-text { min-width: auto; }
#bt-remodeler .btt-look-pills .btt-name { margin: 0; font-size: 13.5px; padding-right: 0; }
#bt-remodeler .btt-look-pills .btt-card { gap: 6px; }
#bt-remodeler .btt-look-pills .btt-badge { position: static; align-self: center; flex: none; }
#bt-remodeler .btt-look-pills .btt-tag[aria-pressed="true"] .btt-swatch::after { right: -4px; bottom: -4px; width: 15px; height: 15px; font-size: 9px; line-height: 15px; }
#bt-remodeler .btt-look-pills .btt-combo { min-height: 0; border-radius: 999px; padding: 5px 14px 5px 5px; }
#bt-remodeler .btt-look-pills .btt-dot { flex-basis: 22px; width: 22px; height: 22px; border-radius: 50%; }

@media (min-width: 768px) {
  #bt-remodeler .btt-cols { grid-template-columns: 1fr 1fr; }
  #bt-remodeler .btt-cols .btt-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  #bt-remodeler .btt-body { padding: 2px 12px 14px; }
  #bt-remodeler .btt-grid, #bt-remodeler .btt-combos { grid-template-columns: 1fr; }
  #bt-remodeler .btt-tag { grid-template-columns: 48px 1fr; min-height: 74px; }
  #bt-remodeler .btt-swatch { width: 48px; height: 48px; }
}
/* MIKE: no fades or lifts for people who turned on "reduce motion" */
@media (prefers-reduced-motion: reduce) {
  #bt-remodeler .btt-chip, #bt-remodeler .btt-tag, #bt-remodeler .btt-combo { transition: none; }
  #bt-remodeler .btt-tag:hover { transform: none; }
}

/* =====================================================================
   MIKE: LITTLE SILVER BUTTONS (Oct 3, 2026). Only used when LOOK = "pills" in remodeler-tags.js.
   Satin silver like the visualizer rim; the picked button turns into the site's dark smoked glass
   (same recipe as the .btn-smoked buttons in css/mike-tweaks.css).
   ===================================================================== */
#bt-remodeler .btt-look-pills .btt-tag,
#bt-remodeler .btt-look-pills .btt-combo,
#bt-remodeler .btt-look-pills .btt-chip {
  background: linear-gradient(180deg, #ffffff 0%, #f2f3f5 46%, #e3e6ea 54%, #eff1f3 100%);
  border: 1px solid #c2c6cc; color: #3d4148;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.05), 0 1px 2px rgba(30,35,45,.12), 0 3px 8px rgba(30,35,45,.06);
}
#bt-remodeler .btt-look-pills .btt-tag:hover,
#bt-remodeler .btt-look-pills .btt-combo:hover,
#bt-remodeler .btt-look-pills .btt-chip:hover {
  border-color: #959ba4; background: linear-gradient(180deg, #ffffff 0%, #f6f7f8 46%, #e9ebee 54%, #f5f6f7 100%);
  box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(30,35,45,.14), 0 6px 14px rgba(30,35,45,.09);
}
#bt-remodeler .btt-look-pills .btt-tag:hover { transform: translateY(-1px); }
/* picked = smoked glass, white text */
#bt-remodeler .btt-look-pills .btt-pick[aria-pressed="true"],
#bt-remodeler .btt-look-pills .btt-chip[aria-pressed="true"] {
  color: #fff; border-color: rgba(225,228,232,.9);
  background: linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.06) 50%, rgba(0,0,0,.08) 51%, rgba(0,0,0,.02) 100%), rgba(70,75,85,.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 2px 4px rgba(0,0,0,.22), 0 6px 14px rgba(0,0,0,.14);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
}
#bt-remodeler .btt-look-pills .btt-pick[aria-pressed="true"] .btt-name { color: #fff; }
#bt-remodeler .btt-look-pills .btt-swatch, #bt-remodeler .btt-look-pills .btt-dot { box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 0 0 2px rgba(255,255,255,.85), 0 1px 3px rgba(0,0,0,.18); }
#bt-remodeler .btt-look-pills .btt-name { font-weight: 700; }
#bt-remodeler .btt-look-pills .btt-combo { font-size: 13px; }
@media (prefers-reduced-motion: reduce) { #bt-remodeler .btt-look-pills .btt-tag:hover { transform: none; } }

/* =====================================================================
   MIKE: TILE MEDALLIONS + MIKE'S PICKS AS SILVER BUTTONS (Oct 3, 2026).
   The pictures are images/tile-icons/*.webp, added by remodeler-tags.js. If a picture fails,
   the colour dot underneath shows instead. This file is only linked on bathroom-remodeler.html,
   so the Creative Tiling page's visualizer is not affected.
   ===================================================================== */
#bt-remodeler .btt-swatch, #bt-remodeler .btt-dot, #bt-remodeler .btt-medal { position: relative; }
#bt-remodeler .btt-ico { position: absolute; inset: 0; width: 100%; height: 100%; display: block; border-radius: 50%; }
#bt-remodeler .btt-has-ico { background: none !important; box-shadow: none !important; }
#bt-remodeler .btt-look-pills .btt-tag .btt-swatch { width: 30px; height: 30px; }
#bt-remodeler .btt-look-pills .btt-tag { padding: 4px 16px 4px 4px; min-height: 40px; }
#bt-remodeler .btt-look-pills .btt-combo { padding: 4px 16px 4px 4px; min-height: 40px; }
#bt-remodeler .btt-look-pills .btt-dot { flex: 0 0 30px; width: 30px; height: 30px; }
#bt-remodeler .btt-look-pills .btt-tag[aria-pressed="true"] .btt-swatch::after { z-index: 1; }

/* Mike's Picks: same satin-silver button + medallion (label still comes from data-label) */
#bt-remodeler .btr-chips .btr-chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 4px 16px 4px 4px; border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #f2f3f5 46%, #e3e6ea 54%, #eff1f3 100%);
  border: 1px solid #c2c6cc; color: #3d4148;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(0,0,0,.05), 0 1px 2px rgba(30,35,45,.12), 0 3px 8px rgba(30,35,45,.06);
  transition: background .2s, border-color .2s, box-shadow .2s, transform .2s;
}
#bt-remodeler .btr-chips .btr-chip[data-label]::before { font-weight: 700; font-family: 'MT Lato', Arial, sans-serif; }
#bt-remodeler .btr-chips .btr-chip:hover {
  color: #3d4148; border-color: #959ba4; transform: translateY(-1px);
  background: linear-gradient(180deg, #ffffff 0%, #f6f7f8 46%, #e9ebee 54%, #f5f6f7 100%);
  box-shadow: inset 0 1px 0 #fff, 0 2px 4px rgba(30,35,45,.14), 0 6px 14px rgba(30,35,45,.09);
}
#bt-remodeler .btr-chips .btr-chip:focus-visible { outline: 2px solid var(--btr-accent, #5f6b87); outline-offset: 2px; }
#bt-remodeler .btr-chips .btr-chip[aria-pressed="true"] {
  color: #fff; border-color: rgba(225,228,232,.9); text-shadow: 0 1px 2px rgba(0,0,0,.35);
  background: linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.06) 50%, rgba(0,0,0,.08) 51%, rgba(0,0,0,.02) 100%), rgba(70,75,85,.92);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 2px 4px rgba(0,0,0,.22), 0 6px 14px rgba(0,0,0,.14);
}
#bt-remodeler .btt-medal { order: -1; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(145deg,#f4f5f7 0%,#c3c7cd 30%,#eef0f2 52%,#a9adb4 76%,#e9ebee 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.18); }
@media (prefers-reduced-motion: reduce) { #bt-remodeler .btr-chips .btr-chip { transition: none; } #bt-remodeler .btr-chips .btr-chip:hover { transform: none; } }