/* McCloud Gutter Gutter Colors — page-only v3 */
.mg-color-toolbar{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 24px}
.mg-color-filter{appearance:none;border:1px solid #cfd7de;background:#fff;color:#17334d;border-radius:999px;padding:9px 13px;font:inherit;font-weight:800;cursor:pointer}
.mg-color-filter:hover,.mg-color-filter:focus-visible{border-color:#245f8c;outline:2px solid transparent}.mg-color-filter.is-active{background:#17334d;border-color:#17334d;color:#fff}
.mg-color-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:stretch}
.mg-color-card{display:block;position:relative;width:100%;padding:0;border:1px solid #c8d2db;border-radius:18px;background:#fff;overflow:hidden;cursor:pointer;text-align:left;color:inherit;font:inherit;box-shadow:0 8px 22px rgba(15,30,40,.10);transition:transform .18s ease,box-shadow .18s ease}
.mg-color-card:hover,.mg-color-card:focus-visible{transform:translateY(-3px);box-shadow:0 15px 34px rgba(15,30,40,.17);outline:2px solid #245f8c;outline-offset:2px}
.mg-color-stage{display:block;position:relative;aspect-ratio:1.15/1;padding:16px;background:linear-gradient(135deg,#cbd1d7,#aeb7c0);border-bottom:1px solid #c8d2db}
.mg-color-swatch{display:block;width:100%;height:100%;border-radius:12px;background-position:center;background-size:cover;background-repeat:no-repeat;box-shadow:inset 0 0 0 1px rgba(0,0,0,.11),0 7px 16px rgba(0,0,0,.12)}
.mg-color-card-body{display:block;padding:14px 15px 16px}.mg-color-name{display:block;font-weight:900;font-size:1.08rem;line-height:1.18}
.mg-color-badge{display:inline-flex;margin-top:8px;padding:5px 9px;border-radius:999px;font-size:.76rem;font-weight:850;line-height:1.2}
.mg-color-status-standard .mg-color-badge{display:inline-flex;background:#e6f3e9;color:#215d31}.mg-color-status-lead-time .mg-color-badge{background:#e8f0fb;color:#244f7d}.mg-color-status-limited .mg-color-badge{background:#fff0c2;color:#725000}.mg-color-status-discontinued .mg-color-badge{background:#f5d8d8;color:#7b1d1d}
.mg-color-status-discontinued .mg-color-stage::after{content:"DISCONTINUED";position:absolute;left:-9%;top:43%;width:118%;padding:8px;text-align:center;background:rgba(120,20,20,.92);color:#fff;font-weight:900;letter-spacing:.08em;transform:rotate(-12deg)}
.mg-color-empty{grid-column:1/-1;background:#f5f7f9;border:1px solid #d7dee5;border-radius:12px;padding:18px;color:#5d6875}
.mg-color-modal{position:fixed;inset:0;z-index:99999;display:none;align-items:center;justify-content:center;padding:24px;background:rgba(0,0,0,.76)}.mg-color-modal.is-open{display:flex}
.mg-color-modal-box{width:min(900px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:18px;box-shadow:0 20px 70px rgba(0,0,0,.38)}
.mg-color-modal-stage{display:block;padding:24px;background:linear-gradient(135deg,#cbd1d7,#aeb7c0);border-bottom:1px solid #d7dee5}
.mg-color-modal-swatch{display:block;aspect-ratio:16/10;border-radius:14px;background-position:center;background-size:cover;background-repeat:no-repeat;box-shadow:inset 0 0 0 1px rgba(0,0,0,.10),0 7px 18px rgba(0,0,0,.13)}
.mg-color-modal-content{padding:18px 22px 22px}.mg-color-modal-content h2{margin:.1rem 0 .3rem}
.mg-color-modal-close{float:right;border:1px solid #d1d7dd;background:#eef2f5;color:#17202a;border-radius:50%;width:40px;height:40px;font-size:24px;line-height:1;cursor:pointer}.mg-color-modal-close:hover,.mg-color-modal-close:focus-visible{background:#e2e8ed;outline:2px solid #245f8c}body.mg-color-modal-lock{overflow:hidden}



/* v4: textured swatches use a real IMG element rather than a CSS background.
   This avoids the Designer Copper card falling back to its flat fallback color. */
.mg-color-swatch-image{
  display:block;
  width:100%;
  height:100%;
  border:0;
  border-radius:12px;
  object-fit:cover;
  object-position:center;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.11),0 7px 16px rgba(0,0,0,.12);
}

.mg-color-badge{white-space:normal;max-width:100%;text-align:left}


/* v9 mobile layout:
   Keep mobile thumbnails compact at 3 across.
   The click-to-enlarge modal remains unchanged and large. */
@media(max-width:980px){
  .mg-color-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
  }
}

@media(max-width:760px){
  .mg-color-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
  }

  .mg-color-card{
    border-radius:12px;
    box-shadow:0 4px 12px rgba(15,30,40,.09);
  }

  .mg-color-stage{
    padding:6px;
    aspect-ratio:1/1;
  }

  .mg-color-swatch,
  .mg-color-swatch-image{
    border-radius:8px;
  }

  .mg-color-card-body{
    padding:7px 6px 8px;
  }

  .mg-color-name{
    font-size:.78rem;
    line-height:1.08;
  }

  .mg-color-badge{
    margin-top:5px;
    padding:4px 5px;
    border-radius:8px;
    font-size:.60rem;
    line-height:1.08;
  }

  .mg-color-status-discontinued .mg-color-stage::after{
    left:-15%;
    width:130%;
    padding:4px 2px;
    font-size:.58rem;
    letter-spacing:.04em;
  }
}

@media(max-width:390px){
  .mg-color-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:6px;
  }

  .mg-color-stage{
    padding:4px;
  }

  .mg-color-card-body{
    padding:6px 4px 7px;
  }

  .mg-color-name{
    font-size:.70rem;
  }

  .mg-color-badge{
    font-size:.54rem;
    padding:3px 4px;
  }
}