/* =========================================================
   PRODUCT VARIATION SWATCHES + VARIATION CLIPS
   Loaded only by products.html.
   ========================================================= */

.variation-info{
  margin-top:24px;
  padding-top:19px;
  border-top:1px solid rgba(184,138,64,.28);
}

.variation-group + .variation-group{
  margin-top:17px;
}

.variation-heading{
  margin:0 0 9px;
  font-family:"Cinzel",serif;
  font-size:.64rem;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#c8ad73;
}

.swatch-row{
  display:grid;
  grid-template-columns:repeat(5,minmax(48px,1fr));
  gap:8px 7px;
  max-width:460px;
}

.swatch-row-ten{
  grid-template-columns:repeat(5,minmax(48px,1fr));
}

.swatch-item{
  min-width:0;
  text-align:center;
}

.swatch-item span{
  display:block;
  min-height:2.3em;
  margin-bottom:4px;
  font-family:"Cinzel",serif;
  font-size:.48rem;
  line-height:1.15;
  letter-spacing:.035em;
  color:#aa9b7e;
}

.color-chip{
  display:block;
  width:100%;
  height:15px;
  border:1px solid rgba(235,214,170,.32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.17),
    inset 0 -2px 4px rgba(0,0,0,.32),
    0 2px 5px rgba(0,0,0,.35);
}

/* Clothing / gem colors */
.chip-red{background:#a82925}
.chip-orange{background:#c96c20}
.chip-yellow{background:#d4aa2b}
.chip-green{background:#3e7a42}
.chip-blue{background:#355f9a}
.chip-cyan{background:#3d98a2}
.chip-purple{background:#694a8d}
.chip-brown{background:#68442f}
.chip-black{background:#171717}
.chip-white{background:#ddd8ca}
.chip-pink{background:#b86578}

/* Dwarven hair colors */
.chip-hair-blonde{background:#c6a76b}
.chip-hair-lightbrown{background:#8d6845}
.chip-hair-darkbrown{background:#4b3024}
.chip-hair-ginger{background:#9b4528}
.chip-hair-black{background:#171310}

/* Ring metals */
.chip-copper{background:linear-gradient(90deg,#6d3422,#b66b46,#7b3f29)}
.chip-iron{background:linear-gradient(90deg,#40413f,#777872,#444542)}
.chip-bronze{background:linear-gradient(90deg,#665026,#9b7a38,#5b4520)}
.chip-silver{background:linear-gradient(90deg,#868b8d,#d0d2d0,#85898a)}
.chip-gold{background:linear-gradient(90deg,#8e6921,#d2a73c,#8e6921)}

.variation-clips{
  display:grid;
  gap:10px;
  margin-top:18px;
  max-width:540px;
}

.ring-variation-clips{
  grid-template-columns:1fr;
}

.variation-clip{
  margin:0;
}

.variation-clip figcaption{
  margin:0 0 5px;
  font-family:"Cinzel",serif;
  font-size:.5rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#887653;
}

.variation-clip img{
  display:block;
  width:100%;
  height:auto;
  max-height:92px;
  object-fit:contain;
  object-position:left center;
  padding:5px 7px;
  border:1px solid rgba(95,70,38,.72);
  background:linear-gradient(90deg,rgba(8,7,5,.84),rgba(20,16,11,.6));
  box-shadow:inset 0 0 14px rgba(0,0,0,.35);
  user-select:none;
  -webkit-user-drag:none;
}

@media (max-width:900px){
  .swatch-row,.swatch-row-ten{max-width:560px}
  .variation-clips{max-width:650px}
}

@media (max-width:560px){
  .swatch-row,.swatch-row-ten{
    grid-template-columns:repeat(5,minmax(42px,1fr));
    gap:7px 5px;
  }
  .swatch-item span{font-size:.43rem}
  .color-chip{height:13px}
  .variation-clip img{max-height:82px}
}

/* v08: variation frames hug the actual strip image instead of filling the copy column. */
.variation-clips{justify-items:start;}
.variation-clip{display:inline-flex;flex-direction:column;width:max-content;max-width:100%;}
.variation-clip img{width:auto;max-width:100%;}