.pg-group{margin:12px 0 16px}
.pg-group--list{margin:8px 0 10px}
.pg-attr{margin-bottom:12px}
.pg-group--list .pg-attr{margin-bottom:0}
.pg-attr-title{font-weight:500;font-size:14px;margin-bottom:8px;color:inherit}
.pg-attr-values{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pg-group--list .pg-attr-values{gap:6px}
.pg-chip{
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none!important;border:1px solid #c5ccd3;border-radius:4px;
  transition:border-color .15s,box-shadow .15s,opacity .15s;line-height:1.2;
  position:relative;cursor:pointer;flex:0 0 auto;
}
.pg-chip:hover{border-color:#222}
.pg-chip.is-active{border-color:#111;box-shadow:0 0 0 1px #111}
.pg-chip.is-oos{opacity:.72;overflow:hidden}
.pg-chip.is-oos::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(
    to top right,
    transparent calc(50% - 1.1px),
    rgba(200,16,16,.95) calc(50% - 1.1px),
    rgba(200,16,16,.95) calc(50% + 1.1px),
    transparent calc(50% + 1.1px)
  );
  pointer-events:none;border-radius:inherit;
}
.pg-group--list .pg-chip.is-oos::after{
  background:linear-gradient(
    to top right,
    transparent calc(50% - 1px),
    rgba(200,16,16,.95) calc(50% - 1px),
    rgba(200,16,16,.95) calc(50% + 1px),
    transparent calc(50% + 1px)
  );
}

/* Product page — larger */
.pg-group--product .pg-chip--text{min-width:42px;min-height:42px;padding:8px 12px;font-size:14px;color:inherit;background:#fff}
.pg-group--product .pg-chip--color{width:36px;height:36px;border-radius:4px;padding:0}
.pg-group--product .pg-chip--image{padding:2px;background:#fff;width:52px;height:52px}
.pg-group--product .pg-chip--image img{display:block;width:100%;height:100%;object-fit:cover;border-radius:2px}

/* Listing — compact color squares below price */
.pg-group--list .pg-chip--color{width:28px;height:28px;border-radius:3px;padding:0;border-width:1px}
.pg-group--list .pg-chip.is-active{box-shadow:0 0 0 1px #111}
.pg-group--list .pg-chip--text{min-width:22px;min-height:22px;padding:2px 5px;font-size:10px;background:#fff;color:inherit}
.pg-group--list .pg-chip--image{width:22px;height:22px;padding:1px;background:#fff}
.pg-group--list .pg-chip--image img{display:block;width:100%;height:100%;object-fit:cover;border-radius:1px}